UI/UX DESIGN
Studebt
DATE
May 2020
TOOLS
Figma, Miro
MY ROLE
Solo Class Project
College students often have a difficult time managing and understanding their student loans, finding them intimidating. STUDEBT is an app designed to guide students in the different stages of managing student loans and make the stressful loans less daunting.
PROBLEM STATEMENT
Many current and former students have a hard time managing their student loans and find loans daunting mainly because of a lack of education and resources to manage them. Because of this, many students end up accumulating more debt from interest from their loans because they were not taught or given the tools to plan for their loans.
THE BIG QUESTION
How might we streamline loan information, payments, and future loan plans for current and recently graduated students so that they better understand and plan for paying off their student loans?
GOALS
Lower the amount of interest accumulated from student loan debt by educating students about their loans
Help the users create a plan to pay off their student loans in a way that works with their needs but also is most beneficial to them in the long run
Encourage students to face their student loan debt and pay it off in a timely manner.
Encourage students to reach out for advice from financial advisors.
Educate students so that student loans and debts seem less daunting and easier to understand.
Research
USERS + AUDIENCE
The target audience and users of this app are UC Davis students as well as other Davis residents that regularly use their bicycle as a mode of transportation.
SURVEY
The target audience and users of this app are current and former university students who have student loans to pay for their education.
Former students will be the majority of the consistent users because they have already created a plan through the app and can still use the app for managing their loans and paying off payments as they are due.
Current students, mainly students who will be graduating soon, can benefit by learning more about student loans and creating payment plans for their loans so they can start making payments as soon as they graduate.
UNDERSTANDING OUR AUDIENCE (STORYBOARD)
I created a short storyboard in order to demonstrate how the STUDEBT app would be used by users, and in what setting it would be used. The storyboard shows the interaction of the user receiving a notification that their payment is due, and the user making their payment. This showcases one of the most common and consistent user interactions with the app.
Ideation + Early Prototypes
Before jumping into putting together the app on Figma, I went through some processes in order to gather layout ideas and other feature placement ideas for the app.
CRAZY 8 SKETCHES
First, I did the crazy 8 exercises to rapidly create ideas for layouts for the home screen. In this exercise, I played with the different features and worked through different options in terms of hierarchy on the app. Through this, I was able to decide the general way I wanted to present the “upcoming payments” feature. Although later on, I did not stick with this on the homepage, I still used the layout on its own page. Aside from that, I also kept a few of the other ideas in the app, such as a bottom navigation bar.
PAPER PROTOTYPE
To get started with the first user task flow for Studebt I did an analog sketch of a rough prototype user flow. This medium allowed me to easily and rapidly adjust the task flows and layouts for the app.
WIREFRAMES
Directly after creating the paper prototype, I translated the prototype into its digital wireframe form and mapped out the buttons and task flows. This low-fidelity prototype allowed me to have a rough idea of what the digital design would look like.
Usability Tests
I ran multiple usability tests at 3 main different stages of the prototype in order to gain a better insight into issues and usability problems within the STUDEBT app. The tasks changed slightly over time, but at each user test, I was able to gain feedback that greatly helped improve the app.
TASKS
Making a Loan Payment
1. Find most upcoming loan payment due on March 20
2. Make the payment
Making an Appointment with an Advisor
1. Pick a date and time to schedule an appointment with a financial advisor
2. Finalize the appointment
RESEARCH CONCLUSION
After completing our user research, we identified 4 key problems we wanted to identify in the design of the Rota app.
Assist bikers with learning how to fix their bikes on their own
Develop a way to respond to bike-related theft and help bikers take preventative measures to avoid bike theft
Help new bikers learn the rules of the road for biking
Make safe biking routes accessible to users
KEY FINDINGS + USABILITY PROBLEMS
“I wouldn’t have gotten student loans though because they are scary, I don’t know much about them but interest and tax are scary.”
Problem: This is more of a general overall problem with student loans, but many students are not educated about student loans and how to manage them or plan for them, so as a result people stay away from them altogether because it is something unknown and foreign. Many students who have student loans also struggle with understanding them.
Solution: I added a mini-feature within the app where the user can learn about student loans and look through various articles and readings on student loans and their important information.
“It is kind of confusing what the app is about so maybe you could add a tutorial at the beginning.”
Problem: Jumping into the app head-on after signing up, it was a bit confusing for the user what they could do in the app, and they would need to explore the app to discover what kind of features and tools were available for them.
Solution: I added an onboarding process before the sign-up pages; that way the user could see a brief overview of what they could do on the app and what parts they could take advantage of to help them with their loans.
“The home page is a bit repetitive with one of the other pages.”
Problem: The home page originally featured a list of some of the user’s most upcoming payments and two other buttons. Although that information is important, it was taking up too much valuable space from other things that could have been displayed and prioritized on the homepage.
Solution: In the next iteration, I changed the homepage entirely so that there were only buttons that lead to other pages. In the end, based on other feedback I got, I decided to only feature the most upcoming payment on the homepage and change the layout to a dashboard format so that the users can see other important information as well.
“Are you going to extend the loan payment page so that the user can make the payment?”
Problem: The task ended with the user looking at a page that contained the information for their most upcoming loan. Because the user couldn’t actually make the payment within the app, they would need to do each payment separately on their respective websites.
Solution: I extended the user flow so that the user could actually make the loan payment within the app for their loans and did not have to pay on multiple different websites for the payments. This created a more practical and convenient use for the app for the users.
Final User Flows
MAKE A PAYMENT
The first main user flow is to make a loan payment. This flow is pretty self-explanatory; a user can make a payment through the app for their loan. There are multiple paths that the user can take to reach the end of the task. The main way of completing the task is to look at their payment plan and sort the page by upcoming. After doing this, the user can select the due payment they want to pay. At the payment screen, the user can input their payment information and make the payment. In the end, they are congratulated and given the option to go back to the home page.
SCHEDULE AN APPOINTMENT
The second main user flow is to set up an appointment with a financial advisor. In this task, the user can schedule an appointment with a financial advisor if they have any questions about their loans or want to need help with creating a plan to pay off their loans. To complete this, the user navigates to the talk page where they choose to schedule an appointment. After this, the user chooses a date and time, then inputs some brief information about what they want to talk about before submitting.
ONBOARDING
The small user flow is the onboarding and signing up process. At this flow, the first-time users learn about what the app can offer and the various features that the user can take advantage of within the app. This task is the most simple; the user swipes through the different onboarding cards before creating an account with their information.
Interactive Prototype
Outcomes + Lessons
This current prototype’s tasks are very limited. As I look back on it, I notice that I need to do more research into what the other options are for people who have student loans in order to develop the app further. I would need to do more research into people who have been successful in paying off their loans quickly or just successful with their student loans in general, and what steps they took to get there. Although I did look into that at the research stage, I believe that more research would need to be done for future prototypes.
While working on this project, I learned about the importance of extensive and frequent usability tests. Conducting usability steps multiple times throughout the process and using the results and feedback at each iteration taught me how much faster the project can be improved and problems can be found and resolved with the tests. Although the iterations have come to a stop at this moment, before developing future iterations of the app, I would need to conduct more usability tests on the current prototype, and then continue the cycle.
Upon reflection and reviewing this project now nearly 3 years later (2023), I also see how my visual design skills have improved since then and notice multiple mistakes I made in designing this app. One of the most glaring issues I notice now is that there are some accessibility problems, especially with reading the smaller white text against some of the yellow backgrounds. If I were to do this project again or spend more time on it now, I would review the accessibility concerns as well as some of the design choices I made in the past that may not be user friendly or are visually unappealing. I would also spend more time on some of the user research steps, such as putting the storyboard I created in front of users to test.
Let’s Connect!
Made with <3 by Evelyn Huey