SWAP
Making finance entertaining for preteens (ages 10-13)
Introduction
SWAP is a MasterCard app designed for preteens to manage money and connect with banking services. My goal was to create more than just a finance app by incorporating new functions and a playful character, making financial education fun and engaging. The personalized, gamified UI/UX transforms product exploration into an enjoyable adventure.
My role: UI/UX designer, UX writer, Illustrator
The challenge
I received a brief and wireframe to design a mobile app. The initial concept lacked engagement and customization. After market research, I identified key issues and developed a new UX/UI design with enhanced writing, introducing a fresh perspective with interactive features.
Insights
Market Research
The claim
There is a growing demand for parents to teach preteens about finance. The pandemic exposed financial instability, driving financial literacy efforts.
The problem
Many preteens miss out on school financial education, while parents often lack the time or resources to teach essential money skills at home.
Competitive analysis
The good
The apps offer easy ways to earn and invest money.
The bad
There’s a lack of engaging, customizable tools to spark preteens’ interest in finances, and most apps fail to provide meaningful financial knowledge.
Persona and new ideas
I created a persona to empathize with her while considering the target audience and client needs. Based on this persona, I decided to:
- Design a unique character to foster user empathy and create a relatable experience.
- Integrate gamified elements to increase user engagement and maintain user interest.
- Develop modules teaching preteens to create strong, secure passwords for online safety.
- Enable users to customize their avatars, enhancing personalization and time investment.
- Add features promoting financial literacy to build responsible money management skills.
- Implement an AI-powered chat function for real-time user assistance and support.
User flow
I created a flow diagram outlining the main user tasks to improve Emma’s financial journey. I devised strategies to make the app engaging and customizable. This included creating SWAPY and adding extra screens to provide financial literacy.
Design
Wireframe
13 new screens were added
After researching how financial literacy is key to a young person’s future success, I designed a new wireframe. I also created SWAPY, the money spirit to make the app more fun and engaging. The wireframe has extra screens and functions to teach and help.
The research article mentioned is from Stateline.
SWAPY the money spirit
The SWAP app onboarding introduces my custom designed character SWAPY, the face of the app. SWAPY is a money spirit in the form of a golden cube that makes financial education fun for preteens, guiding them through the app and teaching safe password creation. It also encourages users to complete chores for pocket money, fostering responsibility while teaching them about money and financial literacy in an engaging and enjoyable way.
Colors and typography
To maintain brand consistency for the SWAP app, I incorporated MasterCard’s official colors, selecting a palette that resonates with our target age group while effectively highlighting call-to-action elements and ensuring readability. I chose the slightly rounded Rubik font to complement the app’s 3D illustration style, enhancing the overall playful aesthetic. This approach not only reinforces brand recognition but also creates an inviting atmosphere that encourages preteens to engage with financial concepts in a fun and accessible way.
3D visuals and customization
To make onboarding more fun and engaging, I designed 3D illustrations inspired by video games and used MasterCard’s color palette. I also added a feature allowing preteens to create their avatars.
More than a finance app
I built a platform that’s more than a finance app. SWAPY avatars teach preteens to create strong passwords, encourage them to do chores for pocket money, and introduce financial literacy. Preteens can also chat with SWAPY AI for finance or app help.
Testing
Prototype and accessibility
After creating the wireframes and illustrations, I shifted my focus to the high-fidelity (hi-fi) design. I followed the WCAG accessibility contrast guidelines to ensure inclusivity and developed an interactive prototype to showcase my ideas. For interactions and animations, I used Figma components to maintain consistency and streamline the design process.
User testing and iteration
I conducted in-person testing with five preteens and their parents, observing how they navigated the app and gathering feedback through targeted questions. Based on their insights, I simplified key screens to better align with preteens’ needs, improving clarity and reducing cognitive load.
Additionally, I refined user flows and UX copy to enhance usability for both preteens and parents, making the app more intuitive and engaging.
Behind the scenes
The most challenging interactive components were user interactions and the avatar maker. For strong password creation, I simulated real-time typing to illustrate the process. For the avatar maker, I designed each avatar with unique colors and expressions.
Impact
- User testing revealed strong interest from preteens and parents, indicating market potential.
- SWAPY, the character I created, helped preteens remember the app name instantly.
Learnings
Creating this project was fun and challenging. Here are my main insights:
- Teaching through design: I found a passion for teaching users through intuitive design, motivating me to create more educational and user-friendly interfaces.
- 3D illustration exploration: For the first time, I created 3D illustrations using generative AI, expanding my creative toolkit.
- Custom avatars: I designed my custom avatars, adding a personal touch to the project and enhancing user engagement.
- Real 3D model creation: I successfully developed a real 3D model based on my illustrations, bridging the gap between digital art and tangible design.
- Next Steps: I plan to learn more about 3D software to enhance my skills and create more engaging user experiences.