Build Early Money Habits
A Mobile Website Design
Role: UX Researcher, UX/UI Designer
Duration: 2 months
Project Brief
Many families struggle to instill healthy financial habits in their children. Build Early Money Habits (BEMH) is an online program that teaches children ages 10-12 financial literacy at the prime age that they’re able to comprehend complex topics. Offering a 5-week interactive virtual course for only $30, parents can get the support they need to get their kids curious about healthy money habits. As the sole designer for this project, I was tasked with creating a cohesive sign-up and onboarding process, while helping BEMH establish a professional and engaging brand identity.
The Result?
A mid-fidelity mockup that delineates a digital experience for parents to learn about the program, sign up for the course, explore educational resources, and onboard their children to the class.
Landing page with a prominent CTA for class registration
Marketing pages to learn about courses and explore free learning materials
A simple, short step-by-step registration process
A fluid continuation from registration to onboarding for student class access
Design Process
Discover
Understanding the users and recognizing problems
Research
I made user personas based on participants that I have personal relationships with and whose children I know well. As a non-parent, it was critical for me to step into the user’s shoes and understand the the problem from their perspective.
I did a brief search of competing products to draw inspiration for navigation labels and voice, but I relied more heavily on my card sort to dictate information architecture and reflect the users’ mental models.
Target Users
Target users were defined as U.S. residing parents/guardians of children between ages 10-12 that met the following criteria:
working towards a financial goal
provide or interested in providing their child an allowance
own or rent a home
maybe want to leave an inheritance for their child
Parents and guardians of children ages 10-12 need support in teaching their children age-appropriate lessons on financial topics that are engaging and affordable, in order to encourage future financially literacy and responsibility.
Problem Statement
How Might We…
Create a digital experience and brand identity for BEMH that is:
Informative and transparent
Engaging for adults and children
Intuitive to navigate
With easy-to-follow steps
Define
Defining the scope of project and product deliverables
To assure I met the necessary requirements of the project and also the user needs, I created a feature prioritization using MoSCoW method. This helped me focus on ideas within scope. From there I built a site map to outline the information architecture, a task scenario, and user flow diagram to map out the ideal navigation steps.
Ideate
Must Have Features
Task Scenario
User: Imagine you have already done the necessary research and decided that BEMH will be a great program for your child.
Task 1: Register for an upcoming opening of the 5-week BEMH course.
Task 2: Once registered, try getting access to your first class, Money 101.
Develop
Rapid prototyping of potential solutions
After defining essential user needs, I did rounds of rapid sketches of pages and features to include that would best assist the user in completing the task.
Rapid sketches
I translated the paper sketches into low-fidelity wireframes in Figma, prepping them to be wired up for usability testing, I asked a fellow cohort member to review for feedback on page layout and task flow.
Low-fidelity wireframes
Deliver
Moderated, concurrent usability test on mid-fidelity prototype
Both users made it to the end of each task flow without critical error
1 of 2 users completed the registration and onboarding in the ideal time of less than 5 minutes
0 of 2 users began the registration process in the first-click
2 of 2 users met the goal of 6 clicks to access the first class, Money 101
Results
Iterations
Testing revealed that users were more inclined to select the “Explore the courses” CTA button in version 1 of the prototype. To correct this in later iterations, I highlighted the registration CTA and brought it above the fold to make it more visible as a primary action on homepage.
V. 1
V. 3
Another suggestion my user had was making the “Next Steps” to prepare for the class and access the BEMH Student Portal more clear and bold, to keep users from guessing what to do next. I also included links to install Zoom and add the classes to a calendar of user’s choice.
V. 1
V. 3
One of my users brought to my attention that parents might misplace their confirmation number, and suggested adding an option on the page to resend it to a desired email. I immediately implemented it as a helpful way to avoid user error and frustration.
V. 1
V. 3
Next Steps
Considering my limitations on time and resources, the BEMH platform has much potential to move forward in development. Some next steps might include:
Testing additional users for more robust usability results
Designing a prototype in high fidelity with a style guide, UI elements and interactions applied
Developing responsive designs for mobile and other devices
Impact & Reflections
The goal of the Build Early Money Habits was to create a brand identity and digital experience that was affordable, trustworthy, and easy to use. The age group this product targets is a pivotal moment in a child’s cognitive development, where learning healthy money habits provides a great value for their future financial literacy and responsibility. Even parents/guardians that don’t feel like they their finances quite figured out can have affordable access to these important lessons through BEMH.
In the future, I would execute the steps involving users differently to achieve more useful results. For example, being more strategic with who I request card sorts from, and also creating better cards. I learned that providing clear instructions and communicating the goals and expectations of users in card sorts and usability tests are critical to convey in the beginning. Working with users, I also realized the importance of budgeting time for delays, and having work to fall back on in those waiting periods. This project was also a reminder to define scope early. Because the prompt was so broad, I really had to be selective with my focus. Feature prioritization is one of my favorite ways to hone in on ideas for now and for the future.
