Happy Wallet
Financial Literacy for College Students
Role:
Designer
Time:
Oct - Dec 2024
Team:
Patricia English, Kristen Chung, Kiera Fong,
Maiella Nuqui, Heidi Tran, Kalia Miyasaki
Context
Design Project Teams is a quarter-long program at UC Irvine where interdisciplinary student teams create a solution around a central design theme. For our quarter, the prompt was "caring for yourself, others, or the world." Our team chose to focus on financial literacy for college students, aiming to empower them with tools and knowledge to manage their finances confidently and sustainably.
The Challenge
"How might we help college students who struggle to understand and prioritize financial goals gain the knowledge and confidence to manage their finances effectively?"
Research
To ensure our design aligned with real user needs, we surveyed 67 participants and conducted 8 interviews to identify pain points and gaps in the current landscape of financial education tools.
Surveys
Our survey consisted of questions regarding how users would rank their financial literacy and if they wanted to boost their financial literacy. Most students showed a strong desire to learn more about managing money but lacked the confidence and tools to begin.
We found that:
84%
Do not feel financially literate
76%
Want to increase their financial literacy
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 85 85" xmlns="http://www.w3.org/2000/svg"><path d="M 37.5 75 C 58.211 75 75 58.211 75 37.5 C 75 16.789 58.211 0 37.5 0 C 16.789 0 0 16.789 0 37.5 C 0 58.211 16.789 75 37.5 75 Z" fill="transparent" height="75px" id="t9CCK3vdo" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.46036" stroke="rgb(0, 255, 151)" transform="translate(5 5)" width="75px"/><path d="M 0 0 L 0 22.5 L 15 30" fill="transparent" height="30px" id="k44QYh0S4" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.46036" stroke="rgb(0, 255, 151)" transform="translate(42.5 20)" width="15px"/></svg>)
Competitive Analysis
We researched 12 education and finance apps, focusing on features like incentives and educational resources. We noticed that many apps did not include financial topics that our survey participants were interested in, so we made a point to include them in our app.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 103" xmlns="http://www.w3.org/2000/svg"><path d="M 0 82.5 L 0 10 C 0 4.477 4.477 0 10 0 L 67 0 C 68.657 0 70 1.343 70 3 L 70 90" fill="transparent" height="89.9999px" id="RZspd7lp9" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(6 6)" width="70px"/><path d="M 0 0 L 30 0" fill="transparent" height="1px" id="lRUX81rMO" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(26 26)" width="30px"/><path d="M 0 0 L 62.5 0" fill="transparent" height="1px" id="IPCM8ukvX" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(13.5 66)" width="62.5px"/><path d="M 0 0 L 62.5 0" fill="transparent" height="1px" id="XDUUGzszS" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(13.5 81)" width="62.5px"/><path d="M 0 0 L 62.5 0" fill="transparent" height="1px" id="aqyQiiDGK" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(13.5 96)" width="62.5px"/><path d="M 7.5 15 C 2.5 15 0 11.642 0 7.5 C 0 3.358 2.5 0 7.5 0" fill="transparent" height="15px" id="QI0Le539u" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(6 66)" width="7.5px"/><path d="M 7.5 15 C 2.5 15 0 11.642 0 7.5 C 0 3.358 2.5 0 7.5 0" fill="transparent" height="15px" id="t1dQcsoSr" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.1361" stroke="rgb(0, 255, 151)" transform="translate(6 81)" width="7.5px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 85 85" xmlns="http://www.w3.org/2000/svg"><path d="M 83.844 73.488 L 67.291 56.938 C 66.544 56.191 65.531 55.776 64.469 55.776 L 61.763 55.776 C 66.344 49.916 69.067 42.546 69.067 34.528 C 69.067 15.454 53.609 0 34.534 0 C 15.459 0 0 15.454 0 34.528 C 0 53.601 15.458 69.055 34.534 69.055 C 42.553 69.055 49.926 66.333 55.786 61.751 L 55.786 64.457 C 55.786 65.519 56.201 66.532 56.948 67.279 L 73.501 83.829 C 75.062 85.39 77.585 85.39 79.129 83.829 L 83.828 79.131 C 85.388 77.57 85.388 75.049 83.844 73.488 Z M 34.534 58.431 C 21.33 58.431 10.628 47.749 10.628 34.528 C 10.628 21.325 21.311 10.625 34.534 10.625 C 47.739 10.625 58.44 21.306 58.44 34.528 C 58.44 47.731 47.757 58.431 34.534 58.431 Z M 39.035 33.107 L 31.563 30.865 C 30.706 30.608 30.107 29.74 30.107 28.752 C 30.107 27.545 30.987 26.562 32.066 26.562 L 36.732 26.562 C 37.49 26.562 38.22 26.776 38.861 27.18 C 39.399 27.517 40.083 27.497 40.543 27.059 L 42.493 25.198 C 43.079 24.638 43.046 23.669 42.399 23.182 C 40.888 22.048 39.065 21.394 37.191 21.298 L 37.191 18.594 C 37.191 17.86 36.596 17.265 35.863 17.265 L 33.206 17.265 C 32.473 17.265 31.878 17.86 31.878 18.594 L 31.878 21.27 C 27.955 21.374 24.793 24.681 24.793 28.752 C 24.793 32.067 26.949 35.029 30.035 35.955 L 37.508 38.197 C 38.364 38.454 38.964 39.322 38.964 40.31 C 38.964 41.517 38.084 42.5 37.005 42.5 L 32.34 42.5 C 31.583 42.5 30.852 42.286 30.211 41.882 C 29.674 41.545 28.99 41.565 28.53 42.003 L 26.579 43.864 C 25.993 44.424 26.026 45.393 26.674 45.88 C 28.184 47.014 30.007 47.668 31.882 47.764 L 31.882 50.468 C 31.882 51.202 32.476 51.797 33.21 51.797 L 35.866 51.797 C 36.6 51.797 37.194 51.202 37.194 50.468 L 37.194 47.792 C 41.117 47.688 44.28 44.382 44.28 40.31 C 44.28 36.995 42.123 34.033 39.035 33.107 Z" fill="rgb(0, 255, 151)" height="84.99957500000001px" id="iReBqVOYr" width="84.99995832169603px"/></svg>)
Interviews
We were able to conduct 8 interviews and gained qualitative insights into users' frustrations.
We found that:
Lack of Time
Overly Technical
Incentivization
Users prefer bite-sized information & short form content to save time
Users want to learn content on their own rather than compete with others, so we focused on self-learning over competition
We want to avoid overly complicated and jargon-heavy vocabulary
“I think that learning about finances is not something that you need to be ranked on. I think it should be done at your own pace and not in competition with others.”
-Interviewee #3
Our Solution
To address these needs, we created Happy Wallet, a mobile app that delivers personalized courses tailored to individual financial goals and preferred learning styles. Instead of gamification, the app uses a calm, professional tone and breaks down complex concepts into simple, goal-oriented lessons.
Design Process
User Flow
Our initial user flow that was created after the research process that included a forum page to make/view posts from other users.
After further analyzing our research and findings from our surveys and interviews, we decided to scrap the forum idea since users did not seem too keen on interacting with others when it came to financial literacy.
Sketches
Our team divided the necessary pages among ourselves and began sketching designs based on group discussions, incorporating features we wanted to include and any ideas we had for the pages.
Lo-Fi Wireframes
This led us to low fidelity wireframing, where we transformed our sketches into basic wireframes. This step was essential in helping us plan out the structure and layout of our app, and many of us made several versions of the same page to explore different layouts and determine which best aligned with the goal we aimed to accomplish.
Mid-Fi Wireframes
During our mid-fi wireframing process, we established the project's visual style by carefully selecting fonts and iconography that align with our design goals. We refined the pages by focusing on and finalizing the layout to enhance user flow and clarity. By prioritizing both aesthetics and functionality, we created a strong foundation for the next steps in development.
Style Guide
Usability Testing
We tested our high-fidelity prototype with 9 users to identify areas for improvement and we iterated on those suggestions, which were:
Course page was overcrowded with large blocks of text and lacked a clear textual hierarchy.
“It feels like there’s so much to look into. Even looking into one thing can turn into a whole rabbit hole of information.”
-Interviewee #3
We added separate pages, clear instructions, more modularity, and an understandable hierarchy.
It’s not apparent from the home page that there are more than just courses in the app, like the avatar and goals features.
We added easier navigation that reflects the rest of the app’s features, including the avatar, daily streak, daily challenge, and goals.
Many users thought the app was a game and did not view it as an educational app.
We changed the font to be more sophisticated to emphasize the educational aspect of the app and increase professionalism.
Final Demo
Reflection
This project reinforced the value of continuous user feedback and the power of simplicity. Every decision, from content hierarchy to color choice, was informed by actual user needs.
Lessons Learned:
Always start with user research
Iteration sharpens clarity and impact
Simplicity + focus over flashy features
Thank You!