top of page

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.

edward-cisneros-_H6wpor9mjs-unsplash.jpg

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

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

Cart2.png

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

bottom of page