Zinnia: end-to-end iOS app design
Teaching teens about money is hard. We created Zinnia to help.
Team:
Me; sole product designer
FatCoin Cofounders; Eric Kim, Head of Product at Mount Sinai Health System, Kishore Setty, Managing Director at CIBC Private Wealth
Tools:
Figma, Figjam, Maze User Testing
Deliverables:
User research, background research, Figma prototype of minimum viable product
Duration:
Part-time; January 2024-ongoing
Parents of college-bound teens need help teaching them financial independence
THE CHALLENGE
Only 50% of 15 year olds have age-appropriate financial literacy skills, according to the Milken Institute. But many parents are not discussing money with their kids, according to T. Rowe Price:
CLIENT PROBLEM
FatCoin wants to teach families 21st century financial literacy skills
Founded by Eric Kim, Head of Product at Mount Sinai Health System, and Kishore Setty, Managing Director at CIBC Private Wealth, FatCoin was created to help families with 21st century financial literacy
I want to help families and kids have happier, healthier lives, so I was excited to join FatCoin to design the minimum viable product for their app
Current status: Designs accepted by FatCoin and engineering resources are being secured
Zinnia, an iOS app that gives parents a roadmap for teaching teens financial independence
THE SOLUTION
Must-learn teen financial skills in simple categories
Real-world challenges teach skills
Support for parents along the way
The Problem Space
01. CLIENT MEETING
Defining the goals
Validate the user problem
Test the solution concept
Create a prototype of the minimum viable product
During our first meeting, we discussed FatCoin’s business goals:
Parents want to help their kids become financially independent
Parents want to know what other parents are doing to teach their kids about money
Parents need resources to learn about personal finance
We also discussed user goals and hypothesized problems:
My first task was to validate the hypothesized user goals and problems.
Interviewing 7 parents to understand the user problem
02. USER INTERVIEWS
I wanted to know: Are parents actually concerned about their kids’ financial literacy skills? Are they doing anything about? What do they need help with?
The older the child, the more their parent worries about their financial literacy
Three key insights:
7/7 parents reported some worries, but parents of older children are most concerned
Parents are creating some solutions…
Parents (5/7) talk to their kids about basic financial concepts
Some involve their children in basic financial decisions (3/7), a few have their children actively save money (2/7)
…but still want and need guidance:
Parents specifically want a kid-friendly curriculum or tailored guidance (5/7)
63 million adults in the US are parents. Which ones are our users?
03. DEFINING THE USER
From my interviews, we knew that parents of older kids were more worried about teaching financial independence
I saw an opportunity to refine the problem and narrow the project scope down
Pre-college teen years are key for developing independence; I believed we should focus on parents of this group
But first, I needed to test my hypothesis by speaking to parents of college-bound teens.
8 million current high school students will enter college in the next 4 years. Focusing on their parents felt manageable.
I confirmed: parents need specific help teaching college-bound teens financial independence
04. USER INTERVIEWING x2
Key findings after talking to 3 more parents of teens:
They aren’t sure what their teen should know before leaving for college
They want their teen ‘set up’ before leaving home (need a bank account, credit card, budgeting skills, etc.)
They don’t want new teen-specific bank accounts or financial products
After validating my hypothesis, I met with FatCoin to review the data and we agreed to refine our problem statement:
Parents of college-bound teens need help teaching them financial independence before they leave home.
Understanding and communicating who our user is
05. USER PERSONA + EMPATHY MAP
I created a persona document to communicate who our typical user is and to better understand our users.
Mike, the father of a 14 year old needs to figure out which concepts to teach his daughter and how to do it effectively, so that she is financially independent before leaving home in 4 years.
I created an empathy map to explore the user’s thoughts and feelings to better understand their needs before brainstorming solutions.
Even though Mike has financial stability and success, he feels pressure to secure his daughter’s future.
These exercises helped me empathize with our user to learn more deeply about what they need. Before I could translate these needs into solution ideas, I wanted to understand what products are already on the market.
Exploring 6 competitors to understand what users expect and how FatCoin can differentiate itself
06. COMPETITIVE RESEARCH
FatCoin can differentiate itself by creating a solution that educates and provides activities that families can do together to reinforce learning.
Key insight
Competitors offer two main types of solutions: financial education and financial tools. Most focus on only one or two aspects of personal finance (usually just investing or spending and saving).
Few combine both financial education and activities to reinforce learning.
The Solution Space
FatCoin’s constraints:
Family challenges: FatCoin wanted the product to provide financial challenges for families to do together, because research shows the best way to teach kids about money is through real-world examples
No financial products: FatCoin didn’t want to build a financial product, due to the complexity of regulations
Time: FatCoin wanted the prototype completed quickly, to coincide with the release of an article about their financial literacy model
01. HOW MIGHT WE + USER STORIES
Brainstorming solutions to the problem
To narrow the functionality of our solution, I brainstormed approaches based on my research insights using the how might we exercise.
To dig deeper into what parents want to achieve using our product, I created user stories.
Next steps:
Based on these activities, I created possible feature ideas, and we worked together to prioritize which ones to build first for the MVP prototype by creating a product priorities document.
02. USER FLOW, SKETCHING, WIREFRAMING
Laying the foundation
To start visualizing the user experience, I created a user flow building from my brainstorming and our priorities document.
Working from the user flow, I sketched some ideas for FatCoin to review.
With their buy-in, I created wireframes based on my sketches.
Next steps:
After sharing my wireframes with FatCoin, we decided to scale back some of more complex features like photo upload and video download
Before diving into higher fidelity mockups, I created the product name and branding
Creating Zinnia’s look and feel
03. BRANDING
FatCoin wanted a playful feel to balance the seriousness of personal finance, but still create a trustworthy brand.
The words knowledgeable, trustworthy, open, and fun guided my branding process.
Why Zinnia?
Zinnias are colorful and hearty flowers, I chose it to infuse the product with the feeling of growth, maturation, and cheerfulness
With these ideas in mind, I created the logo:
Based on these concepts, I created a style tile to guide the visual design; it includes a blue and purple-based palette to convey trust, wisdom, wealth, and creativity
Bringing the design to life: mockups and prototype
04. HIGH FIDELITY MOCKUPS
Building on the wireframes and drawing on my style tile, I created v1 mockups
With feedback from FatCoin and my design mentor, I iterated to create v2 with a simplified, cohesive visual design and tighter information architecture, then created a prototype in Figma.
Get started
Financial pillars
‘Spend’ challenges
Challenge description
Sign up
Usability testing revealed some issues with the designs
05. USABILITY TESTING
Tested 5 tasks: (1) navigate to first challenge, (2) discover resources tab, (3) start the challenge, (4) finish the challenge, (5) sign up
3 virtual, moderated usability tests over Zoom
6 remote, unmoderated usability tests with Maze
There were no major usability issues (all 9 users completed all 5 tasks) but users discovered minor issues:
Users experienced some minor usability issues
One user didn’t notice the segment controller options
One user wondered how she could skip challenges that don’t apply to her child
Some users were surprised/annoyed about seeing account sign up (3/9)
The landing screen visual design created unnecessary confusion
Some users lacked context for a subway map or were confused by it (4/9)
Others found the lines a distracting contrast to the curves throughout the app (2/9)
Some did not know to scroll to view additional categories (2/9)
Three post-test updates based on user feedback
06. USABILITY TESTING UPDATES
Updated landing screen
Removed small illustrations and condensed text so user can view all categories without scrolling
Replaced subway map with road motif to reduce unnecessary distraction and match curves throughout
2. Changed segment controller label colors
Changed color of active and inactive labels to improve readability and discoverability
3. Allow users to skip a previously completed challenge
New alert dialog lets users skip challenges completed on their own time
Reflection and what’s next
1. If visual design is distracting or out of context, it doesn’t matter if it’s beautiful, it’s not good for the user
As a New Yorker, my original subway map design was familiar and comfortable to me
Usability testing showed me not all users have the same context and heavily stylized design can be distracting
I loved the look, but it wasn’t serving a purpose, so it had to go
2. Nailing the information architecture first leads to faster, better iterations
My first wireframes were messy because I dove into visual design before nailing down the information architecture
Once I created a clear hierarchy of challenge details nested in challenges, nested in financial pillars, building the app became much faster and easier
3. Sometimes business needs come first
Some users were put off by requiring account sign up to continue, but it is a necessary process for the business
What’s next?
FatCoin approved the designs and will include the prototype in an upcoming article about the pillars of teen financial literacy.
I will continue to iterate and add features as we secure engineering resources.