Florida Prepaid App
Eilin Cuenca
UX/IA Product Designer

Florida Prepaid App

The project

Florida Prepaid College Program offers prepaid and savings plans for student tuition who are planning on going to higher education in Florida. They currently have a mobile responsive website. This project is aimed to design a mobile app focused on educating parents/guardians about prepaid plans and facilitating an easy and intuitive enrollment process. 

The problem

The current website does not provide a mobile solution that guides users to learn about the prepaid plans nor provides an easy and intuitive enrollment process.

The information offered on the website is complete but it is not centralized and content quality is lost in the mobile responsive view. Users find it difficult to learn about the plans and enroll in the plans when visiting the site on their mobile device.

The role

UX Designer and Product Strategist

STRATEGY FOR A CHALLENGE

Florida Prepaid App
12
days
12 +
steps to reduce
98
users involved
Florida Prepaid App

Assumptions

  • Average user is just browsing through the site looking for information.
  • Difficulty of finding proper information is causing low rates of completion.
  • A walk-through guide would increase the users completion rate for enrollment.

THE OUTCOME

Florida Prepaid App

ON-BOARDING

Users would be able to engage and get a quick pick of which features the app will provide them. For first time users this module is key.

The module integrates a cards scanner, this way is easy to collect data and reduce data entry of personal information and credit cards. 

Florida Prepaid App

LEARNING

One of the main goals of this application is to quickly provide succinct information about the prepaid plans and how parents could save.

Educating users about the options they have is critical form them to decide to enroll and how to do it.


Florida Prepaid App

ENROLLMENT

Once the users are ready to apply for a plan, they can get into 4 steps wizard. They would verify their information, edit few fields, select the prepaid plan and finish.

  1. Parent information
  2. Student information
  3. Plans to apply for
  4. Payment information



FRAMEWORK & PROCESS

Florida Prepaid App

DISCOVER:
What do users need ?

Florida Prepaid App

Website Analytics 

Had access to analytics of the current website within a date range of 3 months. Studied users behavior indicators through their interaction with the site such as bounce rate, pages per visit, and amount of time. Accessed also to some demographic information such as age range, geographic data, etc. This lead the team to make some assumptions.

Surveys

Once gathered some fact data, ran a survey in order to obtain more qualitative and quantitative information.


Users felt skeptical and overwhelmed

58%
mobile bounce rate
7
minutes per visit
7
pages per visit
Florida Prepaid App

Website usability: Heuristic evaluation

Tested the usability of the mobile site through a Heuristic evaluation by defining criteria to identify weaknesses and strengths  of the website. This same criteria would be used to guide our project and test the new product.

Florida Prepaid App
Florida Prepaid App

Some findings

As result of the audit of the mobile view, these were some critical elements:

STRENGHTS:

  • Content: good resources and information
  • Features: complete and useful calculators 

WEAKNESSES:

  • On-boarding process practically inexistent
  • Walkthrough flow there was no explicit guide or flow in order to learn about plans. 
  • Navigation: labeling and categories were inconsistent. Hierarchies were ambiguous.
  • Task completion: 12 steps for current users. For first time users could be 16 or more.


ANALYZE: Defining the Minimum Viable Product

Florida Prepaid App



Personas

Based on the surveys and data analysis we set up two personas. They were archetypes of real users. We referred to them throughout the entire product development process as a guide to make assumptions and scenarios where they would perform as users.





Florida Prepaid App

Ideation session: 

My team and I ran an ideation session to determine the interaction of users with the business, and their natural behavior on the website. This helped identify pain points, opportunities, and ideas for features that can be included in the Minimum Viable Product. 

Florida Prepaid App
Florida Prepaid App

Card Sorting

After analyzing the current structure, I ran two sessions of card sorting: open and close, once the current structure was analyzed and the user journey map was created.


I asked users to group information and features the way it was meaningful to them. This exercise was aimed to understand their mindset, identify labels obtain expected to find them on the app.

Based on these results the app architecture was defined, and so was the flow to enroll and learn about the plans offered.

Florida Prepaid App

Product Architecture

The structure was defined prioritizing functionality and critical information the mobile app should have.

An inventory was made in order to categorize and elevate content.

A Taxonomy was defined to conceptualize the content structure to avoid polisemia and sinonimia. 

Florida Prepaid App


Enrollment flow

Once the structure was defined, I determined the user flow of enrollment and the flow for users to learn about the plans offered. 

Florida Prepaid App

Route analysis (Users flow)

The flows were tested with users by asking them to complete certain tasks. This exercises was aimed to verify the paths users went through and if they could complete tasks as expected.

  • Green: success completing task
  • Red: Task not completed

DESIGN: Creating interfaces

Florida Prepaid App


Sketches

The design process started with low fidelity sketches. This was the way to iterate through many design options quickly. This is also an inexpensive way to create a first approach to the interface and get quick feedback. 

  • 4 versions were made and tested


Florida Prepaid App

Wireframes

Created wireframes in order to test labels and placement of patterns. Color nor images were not included as they were distractors from the main objective.


TEST : adjusting designs towards the final product.

User Testing

Tests were done in different stages of the project. All of them were planned to take into account the main objectives of the app: improving enrolling and learning processes.

Methods:    

  • Guerrilla Tests
  • Remote Tests

Techniques: 

  • Card sorting (closed): to validate labeling and structure            
  •  Route analysis : to determine common user flows            
  • 5 seconds test: to quickly verify CTAs and labels   
  • A/B test: to decide navigation pattern (Hamburger or bottom menu)

Strategy: 

  • Have at least 5 users for each test round to move up in the truth curve
  • Main task's goals are "Apply for a plan" and 'Learn about plan and savings"

Florida Prepaid App

Heat-mapping

This exercise was aimed to determine the understanding of the labels and the elements placed on the interface.

Users were set up in a scenario and then were asked to complete certain tasks, for example:

  "Where would you clic to apply for a prepaid plan?"

The image shows the distribution of clics as response to that question, resulting Enroll the 60% of the clics.


"Now this is awesome"

User testing final prototype

Florida Prepaid App
20
Iterations
67
Screens and Sketches
98
Users
100
cups of coffee
Florida Prepaid App