Product Designer
Building Better Money Habits
Crafting an Inclusive Interface for Financial Literacy Education
Background
Building Early Money Habits needed an interface that could resonate with both parents and students
The pain points:
-
Parents sought an informative website with insights into their child's progress
-
Students required a platform for accessing virtual classrooms and assignments.
Objective: To create an interface that appealed to both parents and students
Key functions:
-
Clean design for presenting course information to parents
-
Portal for parents to monitor student progress
-
Peparate portal for students to access classes and assignments
The Design Process
Team contributions
Research team:
-
User interviews
​
My role:
-
competitive analysis
-
feature prioritization
-
user flow development
-
low-fidelity wireframing
-
style tile creation
-
high-fidelity wireframing
-
user testing.
Target Audience
Parents
-
Parents seeking information about a financial literacy course for their 10-12-year-olds,
-
Parents with internet access.
Children
-
Enrolled students ages 10-12
-
Students with internet access
Discovery Phase
Design inspiration:
-
Create a design that would cater to both parents and children.
-
Inspiration: Childhood piggy bank
The Outcome
Solution
How the design was determined
The solution involved incorporating key design elements, ensuring a simplistic design that addressed common user actions. The color scheme drew inspiration from piggy bank imagery, employing shades of pink, green, and gold. Vector images and interactive components were refined through user testing.
Design Inspiration
I took inspiration from:
-
images of money, coins, and piggy banks.
-
Piggy banks represent the innocence of children collecting money as one of their first money saving learning experiences.
Feature competitive Analysis
I compared the features of 5 different websites to see what features worked well and can be added to the Building early money habits website.
User Flow Diagram
A user flow diagram was created to show how the flow of the Building Early Money habits will be. It shows what content each page should have and is very helpful for the idea process.
Style Competitive Analysis
Key style ideas I wanted to incorporate:
-
Bright complementary colors
-
Images related to money, students, and class
-
Animated images and icons
-
Testimonials that stand out from the page
-
Text hierarchy to easily find content
Font Style and Imagery
Font Style
The Font used is a san serif font that can be easily read. It also has a clean casual and inviting feel to it.
Iconography
I used rounded icons to match the soft rounded theme of the design. The icons give a more playful feel to the design.
Imagery
I used vector images with a similar color scheme that related to money. They look very child friendly and they are easy to interpret.
Design Iterations
I made multiple iterations of each component and tested out the sizing and color until I found what looked best.
Results
The final deliverables
The final product boasted a simplified interface with a complementary color scheme, utilizing pink, green, and gold. The parent portal adopted a warm yellow, while the student portal embraced a vibrant green. Deliverables showcased the cohesive design in action.
Building Early Money Habits Website
Student and Parent portal
Project Takeaways
Key Takeaway
Iteration is very important. The more versions of a component you create, the more options you have during the design process. Eventually you will find the components that create a cohesive design.
What I learned
I've learned that designing for two different age groups poses challenges, and there is a need for extensive research before creating an interface design.
Next Steps
Looking ahead, the plan is to conduct more user tests with a broader audience in subsequent stages, ensuring a more comprehensive understanding of user preferences and needs.