Bright Path Growth
Building Early Money Habits
Background
This product was a design challenge to create an onboarding process for a company whose main product is a 5 week online course for increasing financial literacy among 10 to 12 year olds. The goal was to provide a number of deliverables which will serve as a base for additional content teams to fill in, including:
-
Information about the course
-
Account creation user flow
-
Check out process
-
Learner profile creation
Process
Phase 1
Competitive Analysis
Phase 2
User interviews and analysis
Phase 3
​Feature prioritization
Site Map
User flow
Phase 4
Ideation
mid-fidelity prototyping
Annotating
Phase 5
Usability testing and analysis
Competitive Analysis
In order to determine the strengths and weaknesses of online learning services, a short competitive analysis and comparison was completed for 3 platforms. This will help us to narrow down feature prioritization in a future step, as well as learn about users’ pain points with online learning services.
Strengths
-
Wide variety of classes in all age ranges
-
Free to use
-
Self-paced
-
4 officially supported language options
Weaknesses
-
Company policies and administrative information found exclusively in the footer navigation
-
Business is heavily reliant on donations, leaving them open to the risk of a lack of funding
Strengths
-
Offers in person and online classes in a variety of locations across the country
-
Includes a featured provider section to help promote the educators that create content on the platform
-
Blog with content for parents such as fun activities to do with kids or information about early development
Weaknesses
-
Top navigation does not work as expected
-
Using “See All” under a parent category such as “Topics” does not lead the user to a list of all topics, but a list of all classes instead
-
-
Dark pattern home page prompts users to create an account on a landing page without ever seeing what courses are offered
-
Class type (i.e. 1 on 1 or group lesson) is not visible in search results, only on the lesson page
Strengths
-
Wide variety of courses available
-
Simple language used to cater towards a younger demographic
Weaknesses
-
Poor website performance due to inefficient image use
-
Some text does not meet WCAG AA standard contrast
Competitor Feature Comparison
User Research
Through conducting several short interviews with and some assumptions about our target audience we have created a User Persona.
Age
Job Title
Status
Location
41
Office Manager
Married
Burlington, VT
Passionate
Helpful
Jessica
“I use my organizational talent to facilitate the success of those around me.”
About
Jessica is an office manager in Burlington, VT. She has 2 children, ages 9 and 12. She enjoys taking advantage of the outdoor spaces in the surrounding areas with her husband and children. This mainly takes the form of biking in the spring and summer, and skiing in the winters.
Goals
-
Learn more money savings tips to pass on to her children
-
Save for season ski passes for the entire family
Needs
-
To be sure that the sites her children visit are appropriate and secure
-
New ways to provide wholesome and educational activities for the children to enjoy
Adventurous
Curious
Paint Points
-
Worried about not knowing enough about a subject to teach her children
-
Trying to balance between fun and educational activities with kids
-
Having a busy home life means that a course should not take too much time
Personality
Photo by Edward Cisneros on Unsplash
Site Architecture
A basic sitemap was created first in order to visualize the key navigation points that would be required for our intended user flow.
The focus of our user flow was the purchasing and onboarding process. Starting on the home page, we believe our users would informational pages about the course first, or if they have already visited the site previously to gather information, they can immediately navigate to enrollment. Due to the nature of this being a service based product, an account would be required before moving forward to the purchase process and then finally to an short onboarding process where the user would be prompted to create a simple learner profile for the student that will be taking the course.
Prototyping
Top Navigation Menu
1
Website header. Includes company branding/logo, account navigation, cart navigation, and 4 main navigation options:
-
The Course
-
Testimonials
-
Contact us
-
Learning Zone
2
Hover state dropdown menu. Main text becomes bold and underlined, option text is centered, and bounding box uses curved/fluid shape following UI dimension guidelines.
3
Hover state dropdown menu. Main text becomes bold and underlined, option text is centered, and bounding box uses curved/fluid shape following UI dimension guidelines.
Homepage
1
Chat feature icon. Button is sticky and will remain in the user’s view.
2
Opened customer service chat window. To keep the use natural, the window mimics other typical text message and direct message windows, where the user’s message is on the right side of the window and the service representative is on the left. This window also remains sticky and scrolls along with the user.
3
Profile picture of the customer service representative is visible. This is a personal touch that adds a level of professionalism to the brand.
4
5
As the chat window is opened, the content on the page should shift over to make room for the window. This will allow the user to continue to view all available content while receiving help from the chat.
1
2
Provides link between Log in and Sign up pages for users needing to do either.
3
Input boxes with fully rounded ends. Clear labels above with faded dummy text inside until the user begins typing.
4
Single Sign-on capability for ease of use
5
Visibility icon to allow the user to show or hide password when typing. Default setting is not visible, showing only dots instead.
Cart
1
Cart item. Allows user to select course start date via dropdown box as well as removing or adding course quantity with + and - icons. Price updated as this is increased or decreased. This section and section 2 are sticky and scroll with the user for the length of the information column on the left.
2
Subtotal with estimated taxes shown.
3
Contact information. Only name and email required. If we have no need for collecting a data point such as phone number, the input is labeled as optional.
4
Allows any matching form fields from the contact section to be transferred to billing info in order to save the user time.
5
Call to action button to move the user to the next step in the checkout process; confirmation and payment information.
Confirm and Pay
1
Returns the user to the previous screen of the purchase process in order to edit or change any information.
2
3
Sections are locked for users to confirm information. Can be edited by using the button at he bottom of the screen to return to the previous screen.
4
5
Information icon that presents a popup with an infographic showing where the code is located as different card companies place them in different areas on payment cards.
Usability Testing
We provided two different tasks for each of our three test participants to complete. Both tasks were conducted using the Retroactive Think Aloud method. This way we could time the tasks more accurately and then collect comments about their process afterwards.
Task 1
“You are interested in taking this course, but are unsure if your child has time to take it as they are involved in extracurriculars. Discover when and where the course takes place, as well as how much it will cost to enroll.”
Task 2
“You heard about this course from a friend at work and have already determined that you want to purchase it for your 10 year old. Using the site, please enroll in the course and create a learner profile.”
Comments and Observations
Users were asked whether anything about the log in, sign up, or checkout process seemed unusual. All three indicated that everything appeared natural and straightforward, aligning with their mental models.
​
User 1 noted that the checkbox used for copying information from the ‘Contact information’ section to the ‘Billing information’ may be unnecessary as the duplicate information is the Name field. They also took longer to perform their task due to struggling with the Figma prototype. As this was a Mid-Fidelity test, every object was not prototyped and they were unsure which ones could actually be clicked on.
​
While User 2 used the dropdown menu to complete their first task, User 3 instead utilized the ‘Learn More’ call-to-action button on the homepage. This gives us some insight into how different users navigate through a site, and providing multiple ways to reach the same page will help a greater number of users achieve their goals faster.
Recommendations
Short Term
Polish the checkout process by:
-
Removing unnecessary elements such as the “Same as contact information” checkbox
-
Creating error states when required form fields are missing
Working with the Course content team, begin creating layouts for the Learning Zone course pages
Long Term
Create a typeface and color guide
​
Introduce additional courses for more advanced learners