Genie

Project Summary

I designed a mobile application to help students tackle loans and make financial literacy more accessible

Timeline
Summer 2020
My Role
Product Designer
Tools
‍‍
Figma, Webflow
Skills
Interaction Design, Product Strategy, User Research, Graphic Design, Website Design

Instagram | Website

Outlining the problem

Student loan debt in the U.S. is over $1.59 trillion and it's growing every single day.

Opportunity

Empowering the Gen Z population to tackle loans one step at a time.

By changing the perspective on loans to little steps to a goal rather than a large lump sum, Genie makes paying off student loan debt approachable.

Product Preview

Student Loan Page

Pay off your student loans all in one place. This page outlines the future of one's loan and encourages pay-off progress through round-ups

Track your Spending Breakdown

Organize purchases into 13 different categories and notify yourself when you over spend

Manage your Wallet

Provide a clear and organized space for your debit and credit cards. Highlight subscriptions and spending habits to users.

The Process
Behind Genie

User Research

Target Users

Our target audience are college students 18-24 years old. We created these user personas to guide our design process. Click them!

Angela, 20
– the shopaholic
New York, New York

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!

Genie

Nathan, 22 – zero allowance
Los Angeles, California

Genie

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, 19 – financially independent
Portland, Oregon

Genie

‍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?
User Research

Competitive Analysis

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.

Sketching out ideas

What is our solution?

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

Wireframes

Here's an early look at some of Genie's designs :) I go more in depth on my wireframes below

Designing my ideas to fit the user's needs

We went through user testing and design cycles to develop our final high-fidelity prototype.

Prototype → Usability test→ Apply changes

Version 1

Widgets are our friend

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.

Version 2

Decluttering Tabs

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!

Design Challenge

How I Tackle Variable Widget Design

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.

User Testing

Can they do it?

The graph illustrates how effectively subjects could perform each task without getting lost.

Version 3

The Final Stretch

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.

💡 Customization!

How Genie works

Add Money, Budget, and add Round-ups

By giving a more strategic approach to managing money, Genie enables users to take full control of their financial flows.

Breakdown + Limit View

With two ways of viewing spending structure, Genie gives users a macro view of their categorical spendings helping them feel in control.

Manage your wallet

In this subscription-saturated world, Genie keeps users accountable by putting all your subscriptions and spendings in one location.

Designing the Full Experience

I designed a website to serve as the landing page for Genie's main source of sign-ups for the beta launch! Check it out here: genie.so

Design System

Key Takeaways

A pair of fresh eyes
Almost none of the students that user-tested the prototype were able to understand the main functions of the application without an initial explanation. Short descriptions or simple icons can go a long way.
Providing Options
After working with a team of developers, designers, and critical-thinkers, I learned that people like to see multiple design iterations! It gives them a voice in the design and serves as first-hand research!

Challenges

Developing Trust and Security
If I had more time on this project, I would love to do research on the long-term behavior of users to evaluate their trust in this financial product.
Adding Accessibility
After my term ended, I recognized the lack of accessibility in many areas of the app. Some include unclear data visualization, small text and poor color contrast. These are principles I have learned following the project and will keep in mind for future projects!

View my other projects

Nick Nack

View Project

Otterspace

View Project