FirstCents, Financial Education
Many parents have recognized the need to teach their child core concepts of financial literacy, but often lack time, energy, and confidence in finding the right material.
FirstCents is an online education course that helps older children learn the foundations of financial literacy. The goal of this project was to design a set of marketing landing pages and a registration flow for FirstCents.
Overview
Role: User Research, User Experience Design, and User Interface Development
Task: Create a responsive marketing landing and sign up page.
Timeline: 3 Weeks
Tools: Figma, OptimalSort
Dollars, Cents, and Sitemaps
Initial Research 01
To guide the process, a timeline was laid out. 3 week long sprints were detailed with clear deliverables laid out for each week. By having a clear plan, a sustainable pace could be maintained through the project.
To begin, an initial sitemap was created in order to best understand how to organize the necessary information parents would need and expect when learning about the course.
Target users were defined as parents with older, elementary aged children (4th to 7th grade). Using Optimal Sort, card sorts and tree tests were administered to several members of the target audience to validate the sitemap.
From this, a number of insights were gathered that lead to minor tweaks and rearranging of the sitemap. Given the relative simplicity of the initial sitemap — it contained 4 basic pages and a sign up page — the testing did not lead to many profound insights.
Regardless, the project continued.
Cold Calculus
Early Ideation 02
Ideation for the landing page began with researching how competitors in the online education space presented their own marketing pages. NatWest and Juni both provide online education courses with a financial focus for kids.
Common themes on these sites included bright, inviting color schemes as well as sans-serif fonts that presented as professional yet approachable.
Rapid sketching was conducted to explore different layouts for the landing page. By focusing on speed and variety, this sketching allowed for the exploration of many ideas in a short amount of time.
Sketches were made and some early mid fi prototypes were even mocked up…
But something felt off. There was no clear direction in how to refine a landing page design. Similarly, the user did not feel served by these initial mock ups. Why should the target audience care about this product?
Everything felt cold. It quickly became clear redefining why parents would want to use FirstCents was critical to moving forward.
Talk is Cheap (but worth every penny)
User Interviews 03
Qualitative interviews were conducted to better understand what parent’s would value most in their search for financial education for their kids. These were done in person and with a handful of set questions, but space for free form discussion was emphasized.
The interviews lead to these insights:
Parents want to feel involved in their child’s financial education
Parents value other parents’ opinions of a product
Parents want to feel confident in the qualifications of their children’s teachers
The following problem statement was created in order to guide the rest of the project:
Parents of older elementary students want to feel like they are a part of financial education that their child is experiencing, so they can feel confident their child is receiving trustworthy content.
Building Capital
Mid-Fidelity 04
With a clear sense of direction, mid-fidelity prototypes of the site were created. A premium was placed on parent testimonials, highlighting teacher qualifications, and most importantly, encouraging parent involvement with the education.
Rubbing Two Pennies Together
Visuals 05
After setting a clear structure with the mid-fidelity prototypes, work began on defining the visual feel and of each section of the site.
To ideate and find visual inspiration, dozens of websites were explored and studied. Special attention was paid to the display of each section and how other designers chose to organize different types of information.
Using Figma, sections from different sites were stitched together to create a frankenstein-esque webpage. By doing this, many ideas were able to be explored and visualized as the project moved into the design of the interface.
Cashing In
Hi-Fi Fidelity 06
In high fidelity, the goal was to use design language that reflected parent and child collaboration. A color palette with calm, pastel colors combined with a splash of bright blue was selected to be inviting for kids but also welcoming for parents.
In addition to the feelings evoked by the color palette, special attention was paid to the following elements:
Color contrast compliance with WCAG and ADA guidelines
Creating scalability through reusable elements, such as the glass-like, quick info cards
Using the striking blue sparingly to emphasize important elements such as CTAs
This same design approach was applied to the registration progression, but with an increased focus on simplicity. The steps were spread across 5 screens, and a stepper was added to help orient the user during the process.
Money at Work
Prototype Video 07
You can see the prototype in action from the home screen to final registration in the video below: