PYGG: A Gamified Financial Literacy App
Award-winning project to empower youths to build confidence in their finances.
Winner of the Mento Design Award for best UX/UI Design 🏆 Featured on Emily Carr’s website!
PYGG took on the challenge to tackle financial inequality and promote education through design and code. We had the honor of participating in Build ‘23, a virtual hackathon dedicated to creating positive social impact through design and code.
We had the option to focus on one of three tracks: healthcare, sustainability, and inequalities. As our first hackathon, we put in a lot of hard work and dedication, resulting in a winning submission for the Mento Design Award. The judges were particularly impressed with our UI design, earning us high praise.
Role
UX Research, Project Management, UX Design, Wireframing, Prototyping
Members
Diana Tu, Carmen Tin, Sydney Batters, Jancis Wong
Duration
45 hours. (February 18-19, 2023)
Background
Problem
4.8 million Canadians are living in low-income households, with youths aged 15-24 having the highest poverty rate.
Financial literacy strongly affects a person’s social determinants of health. The lack of financial education taught in school negatively impacts young adults’ ability to manage their wealth which consequently will affect their health down the road.
During my three years working at TD Bank (Toronto Dominion), I observed recurring patterns of poor financial decision-making among the clients I assisted. Aligned with UN sustainable development goals, we focused our project on eliminating poverty (1) and reducing inequalities (8) through providing quality education (4). By starting education early, it can provide a higher success rate to achieve better outcomes in life.
Background
The Solution
PYGG aims to empower youths to build on their financial literacy by providing hands-on financial literacy, giving users the autonomy to save for their own goals and learn at their own pace, packaged in a relaxing and fun UI. To make finance more approachable, we used a friendly tone of voice and gamified the content, reducing barriers to accessing financial education.
Personalized for you
We strive to create a personalized experience just for you. Our friendly mascot, Pygg, is with you every step of the way on your financial journey, building a lasting relationship with our users.
All in One Place
Providing people with ease of use, you can access all your finances in one place. No more needing to compare your accounts in different browsers.
Setting Goals, at your own pace
Everyone’s financial journey and knowledge look different, that’s why PYGG allows people to progress at their own pace.
Make education engaging
Youths can explore topics that matter to them. Designing learning materials with audio functions, quizzes, and rewards incentives, helping users to engage in learning in different ways.
Exploration
Competitor Analysis
We investigated existing financial literacy tools in the market. Discovering there weren’t a lot of competitors out there, we widened our scope and found the financial literacy program by the government of Canada, the Mint app, and Duolingo.
Insights
Findings
From our secondary research, we found that:
- A clean and simple design interface to display financial numbers helps to ease anxiety while projecting accurate information.
- The mascot (Duo from Duolingo) makes it personable for users to interact with the app.
- Gamification, rewards, and incentives encourage users to revisit the app.
The government of Canada’s program had a lot of information to digest, as well as making it hard to navigate through the links and sites. We want to avoid cognitive overload and directed the project to incorporate the insights as we create PYGG.
Design Process
Start to finish in 45 hours (sleep included)
Under time constraints, we create a work back schedule to ensure we allocate enough time to each phase of our project:
Discover (3 hours) — Brainstorming possible solutions for our chosen track. Define (7 hours) — Validate our problem scope through research, limitations, and feasibility. Develop (3 hours) — Create a rough draft of the key features of PYGG using Crazy 8’s and affinity mapping. Deliver (15 hours) — Using design sprints, we produced and delegated work in wireframing, prototyping, and final presentation through an iterative process based on internal team feedback to ensure PYGG is clear and refined.
Due to time constraints, we prioritized our ideas based on Gamification/Rewards and UI.
User persona
Target Audience
Our target audience is individuals aged 15-24, defined as “youth” by the United Nations, who come from a low-income background and want to learn how to manage their finances effectively.
Particularly in Canada, Indigenous peoples experience the highest levels of poverty: 40% of Canada’s Indigenous children live in poverty. We aim to set them up for financial success by providing education starting in their teenage years and continuing into adulthood.
Informed by research, we created Anna, an Indigenous youth as our primary persona. Our design decisions were informed by her goals, needs, and pain points.
app navigation
Site Map
To map out the content of PYGG, we built a site map to flush out our ideas. This helped us to target and begin to delegate different sections of the screens to different members.
User Flow
The user flow of PYGG aims to address three main tasks:
- Onboarding Anna to set her first financial goal to save up for a laptop
- Updating her financial goal, as well as adding a new goal
- Learn from educational resources with rewards and incentives
Wireframes
With our concept and key tasks solidified, we moved on to wireframing. We focused on the three flows we brainstormed earlier and started laying out UI elements.
My primary responsibilities included designing the onboarding flow, micro-interactions, prototyping, as well as assembling the building blocks of our lo-fi design system.
Lo-Fi Wireframes 
Hi-Fi Wireframes
Branding
Visual System
Our logo “pygg,” originated from an Old English term used to describe clay jars utilized for storing money, and later evolved into the term “piggy bank.” We incorporated a playful pigtail into our all-lowercase logo, creating a more relaxed and approachable brand.
For the color palette, we chose:
- Green for wealth and instilling a sense of calmness
- Pink for our Pygg mascot while adding a sprinkle of fun and excitement
- Sunshine yellow for money and warmth
We ensure the color combinations meet the WCAG 2.0 Accessibility standards.
Larsseit is a great san-serif font that reduces cognitive load, making it easier for users to learn on a screen.
To meet the WCAG 2.0 Accessibility standards, we ensure fonts are eligible with a minimum size of 16px.
Illustrations
You’ll notice a playful touch in the background of every screen with the presence of pig footprints, symbolizing the partnership between the user and Pygg as they take steps forward together in financial management.
Reflection
Time Constraint: Overcoming time constraints can be challenging but possible. Participating in my first hackathon taught me how to communicate effectively with my team, manage expectations, and stay grounded, even in moments of panic.
Progress over Perfection: I learned to prioritize progress over perfection, acknowledging that the first design is never the final version. Focusing on creating a Minimum Viable Product (MVP) allowed us to move forward efficiently and revisit the details later without getting bogged down by minor issues.
Task Distribution: Delegating tasks based on each team member’s strengths was essential to keeping our project on track and moving quickly. By assigning roles strategically, we were able to streamline our workflow and maximize productivity.
Room for Reiteration: If I could do this again, I would like to conduct usability testing to get valuable feedback and assess its effectiveness in teaching financial literacy.
Other Projects
Redesign Emergency Care
BUNZ
Stay tuned. Coming Soon!