FUNDSY
Mobile App Prototype
Role: Sole Visual Designer, UX Researcher and UX/UI Designer
Timeline: ~16 weeks (2020)
Tools: Adobe Illustrator, Sketch, inVision
PROBLEM
Teens and young adults need a way to budget and learn how to save their money because there’s a vast amount of people who don’t have any savings but there’s no one teaching them how to do it.
GOALS
-
Design an iOS app that allows users to make transactions, budget, and learn key financial concepts
-
Implement a new feature that splits bills for you, and sends a notification to the person who owes you
1. DISCOVERY
COMPETITOR APP AUDIT
By conducting the audits of competitor apps, I learned different things:
-
Overall, Venmo provides the best user experience. It’s very clear and simple to understand.
-
Mint offers great features, however, some seem to be hidden because the user has to continuously scroll to find the information needed.
-
As far as steps needed to complete a transaction, Venmo and Cash App had really short flows, while Mint and Wells Fargo App had a long flow to follow.
USER RESEARCH
I wanted to learn about which aspects of finance should be more accessible: budgeting, tracking your income and expenses, and saving your money for a goal. In order to do this, I created a survey that was completed by 12 participants. It allowed me to quickly gather information from a sample of my target audience to understand how they struggle with their finances.
The main takeaways were:
-
Asking people to pay you back for a bill you split can be uncomfortable
-
Most people have trouble keeping track of their spending habits and are worried about spending too much
-
They’re discouraged when using finance apps because they’re too many steps
MEET EMMA
By using the findings of my research, I created 5 proto-personas, including Emma, in order to understand how I can help users achieve their goals by creating certain features in the app.
IDEATION
To brainstorm features for the product, I created idea vignettes using insight from my research and my proto-personas.
2. INTERACTION DESIGN
IDEAL USERS
My ideal users are teens and college students who have limited financial knowledge and are starting to earn their first income through a part-time job. I’m hoping that my app will enable them to master budgeting by making it simple to understand and that they will learn financial concepts through video lessons and quizzes.
INFORMATION ARCHITECTURE DIAGRAM
After defining important features, I mapped out an information architecture diagram to understand the hierarchy of major and minor features.
WIREFRAMES
My wireframes allow the user to have their bill easily split by just entering the information, and it automatically will notify the person that owes them. There’s no need to awkwardly remind your friends to pay you back! Also, users can easily budget their expenses by setting a limit for each category per month, and the user will be notified when they are going over the set limit.
3. PROTOTYPING AND USER TESTING
PROTOTYPING
USER TESTING
I chose to test the learning component of my app with users. When I first began creating my wireframes, I gave too much emphasis to the transaction and bill splitting components of the app. Thus, the learning section was confusing to use. At this stage, I decided I had to simplify the transaction section and differentiate my app by going more in-depth in the learning component.
A broad problem I identified through user testing was that the learning component was confusing as there were no categories for the videos. To resolve this, I created different categories that had subcategories for each financial concept. In addition, I incorporated learning stages: where different sections would be unlocked once you completed earlier lessons.
4. VISUAL DESIGN
APP PERSONALITY
The personality of my app is a very friendly one. Because I found out during my research that users get discouraged when there are too many steps, I wanted to visually convey simplicity so users wouldn’t feel overwhelmed. In order to prevent users from having a dreadful feeling when opening the app to check their finances, I wanted to have a design that would feel light-hearted and fun (hence the name FUNDSY) but formal at the same time.
HIGH-FIDELITY PROTOTYPE
5. NEXT STEPS
The next step I would take to continue improving on my design would be to add more illustrations, as these can not only make the app look more engaging, but they can further explain some concepts.
I would also create a way to recommend certain financial concepts from the learning section depending on the user’s financial habits.
Previous
Netflix Case Study
Next
Libro de Recuerdos