Our target audience are college students 18-24 years old. We created these user personas to guide our design process. Click them!
Angela comes from a background where she has to pay off student loans herself. Unfortunately, her love for shopping prevents her from saving up towards her student loans, and she ends up losing money in the process.
Angela uses Genie to not only to save up towards her student loans, but also to notify her when she spends too much on shopping for clothes!
Nathan is lucky enough where his parents pay for his college tuition, but he is on his own when it comes to paying for school supplies, eating out, and any additional feeds.
He uses Genie to track his subscriptions and weekly expenses to make sure he doesn't go over budget.
Eric just started his second year in college and is trying to save up for the future after college! He is hoping that his personal clothing line takes off, but to be safe, he searches for a solution toa financially secure future.
How is the Gen Z population managing money?
To learn more about the current design systems and user flows of FinTech applications, I discovered 3 applications that served as key sources of inspiration to help make Genie's app better.
They also helped us explore how we could be better and more tailored to how college students track their spending habits.
I lead an ideation work session with my coworkers. Here are our Key insights:
1. Clearly breakdown spending, saving and income of user
2. Design an interface that is user friendly and appeals to Gen Z
3. Make the user feel in control
Here's an early look at some of Genie's designs :) I go more in depth on my wireframes below
Prototype → Usability test→ Apply changes
Widgets are the most common solution to a clean and clear finance app. In my first design, the app was still geared towards improving one's credit score. Here is what I discovered after conducting several user interviews:
1. Too many widgets. In order to view all the different widgets, a user would have to click on each tab to view all the different widgets and its unique functions. At times, certain widgets would also overlap onto multiple pages, which also caused confusion for the user.
2. Design clearly for a mobile device. There was too much going on on one page, and text on some pages would be smaller than 12px, which can be very difficult for most smartphone users to read.
3. Give users control over the prototype. Having a prototype helped A LOT. Giving users the ability to interact with the active prototype provided the most beneficial feedback, and allowed me to examine the importance of gestures and micro-interactions from each feature in the application.
💡 Students are getting lost; maybe restructure the widgets.
On the right are the different iterations of how we envisioned the pages to contain our 3 widgets. Following apple's design style, widgets and buttons were rounder, contained, and more clear to follow.
However, there were a few things to improve with the design and functionality of the application. Our team decided to redesign the application so that there were only 3 widgets: goals, spending breakdown, and recommendations.
💡 If it can be simplified... simplify it. Focus on accessibility and avoid crazy colors!
When designing the structure of a layout, I have to decide which design elements can best communicate information to a user. In this case, I played around with iconography and color to best deliver the progress of a goal to a user.
The graph illustrates how effectively subjects could perform each task without getting lost.
After user testing the prototype on the students, we were able to design a final product that included all the bells and whistles to successfully onboard an individual that had never experienced Genie before.
Here is what I added:
1. Assisting onboarding screens. In order to familiarize users with the layout of the main page, I designed an introduction screen to better inform users of certain widgets.
💡 Encourage familiarity through design
2. Introduction pages/pop-ups. Our student testers were unfamiliar with what each widget's main functions were, so I designed modal screens to communicate how the feature would help them.
3. Re-ordering widgets. Some students that we interviewed told us that they would like to prioritize their spending breakdown as opposed student loans, so I designed a new icon and pop-up page to suit the diversity of potential users.