The problem: Parents and children in the U.S. need a comprehensive interactive tool to teach children financial literacy because low financial literacy is correlated with many negative credit behaviors and current information on the internet is only in bits and pieces.
The goal: conduct visual research and analysis and use the resulting insights to develop brand attributes and artifacts to give the client a distinct visual identity.
My role: UI Designer, Project Manager, basic UX Research
Discovery
I conducted visual research of similar products looking at color palettes, buttons, animation, iconography and hierarchy.
Completed competitive analysis on five similar product using a SWOT format as part of the UX Research for this project.
User research was provided by the client.
Disabled
Hover
Disabled
Hover
Final color palette
Solutions
Hierarchy
Used font weight and size, color and grid layouts to emphasize certain elements in the frame.
Color
Used color meaningfully to grab the user’s attention. For example, using different colors for CTAs vs. regular buttons vs. body text.
Consistency
Used microinteractions and animations to provide an enjoyable experience for users.
Results
Both mobile and desktop high-fidelity prototypes for a child and parent flow
Parent user flow
Child user flow
Key takeaways
Set a realistic timeline
As this was my first design project with the role of a project manager, I learned valuable lessons on how long each step of the design process takes. This will better inform the scheduling of my next project.
Seek feedback early and often
I made it a point in this project to seek feedback more than ever before. I reached out to instructors, classmates and family members for their input. This helped me tremendously to make the design more user friendly.
Animating in Figma
This was my first major project that utilized microinteractions. By seeking out assistance from my peers, I was able to learn new animation tools in Figma that I had never experimented with before.
Next steps
Build out mobile and tablet application versions of the design
Get logo from client to implement into the design
Build out all possible frames for each user flow so that the prototype is completely functional