DollarEducation: a mobile app for young adults to learn about finance

Background

For the final project of the Google UX Design Professional Certificate Course, I was tasked to create a mobile app for social good based on the prompt of designing a way for young adults to start learning about finance. Due to the nature and time constraints of this project, I based my design on a hypothetical organization and product. Despite this, I utilized the UX Design Process throughout the entire project. I came up with DollarEducation, a mobile app that aims to introduce basic knowledge of finance to young adults.

Duration: August 2022 - September 2022

Problem: Young adults do not have basic knowledge of finance and feel unprepared to handle financial topics

Goal: Design a way for young adults to start learning about financce

Role: UI/UX Designer for DollarEducation

Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

Research

I conducted user research and performed a competitive audit to learn more about my target users and areas in direct and indirect competitors that DollarEducation could improve on. I found out that while users in the target audience had some knowledge of finance, they did not have knowledge of specific areas about finance like the W-2 form or taxes. With an app that would help users build good spending and saving habits and teach them about finance, users would have more knowledge about finance to feel comfortable in their daily lives.

Personas

I came up with some user insights and used them to create two personas that best represented the target user I wanted to reach with the DollarEducation mobile app. These personas helped me keep my designs grounded and feasible, while also incorporating user pain points into daily scenarios. Here is James, a newly graduated college student that recently started his first job and is overwhelmed with all the new information he is receiving. And here is Chloe, a newly graduated high school student that wants to learn about responsible financial practices so she can have enough money through college.

Initial Design

With the insights gathered from the personas and research, I created paper and digital wireframes. I aimed to make the wireframes easy to navigate and having a clear user flow. After doing so, I connected my digital wireframes together to create a clickable low-fidelity prototype.

Usability Testing

I conducted an unmoderated usability test with five participants. The main goal of the study was to make sure the navigation was clear and that the user flow was easy to keep track of. Here were the main insights from the usability testing:

  1. Users wanted easier access to classes and resources

  2. Users had trouble tracking progress

  3. Users were unclear of where they were in the user flow

Final Product

Taking in the feedback from the usability testing, I created high-fidelity mockups that overhauled the low-fidelity wireframe designs to be less complex and more concise. I also added additional resources for users to be able to access.

Home and Class Screens

When entering the home screen, users will see a list of classes sorted by the classes they are currently taking and/or interested in. Clicking on a in-progress class will take you to the part of the class you are currently on. Once finished with the class, a notification will pop up saying the class is complete.

Resources and Classes List

When the user clicks on the hamburger menu, they can see a list of links to settings, profile, classes, and scheduling a tutor. Clicking on the classes link takes them to a list of classes they are currently enrolled in as well as classes that are recommended to them, as well as their completion status.

High-fidelity prototype

After completing the mockups, I linked them together to create a clickable prototype, following the same flow as my low-fidelity wireframes.

Responsive Designs

I also created tablet and desktop designs for the DollarEducation home page. I had to rescale the navigation bar and the image elements to make them fit onto the tablet and desktop layouts.

Reflections

What I learned:

Throughout this project, I learned that I should spend a good amount of time on each step of the design process before moving on to the next step. Throughout the ideation process of the low and high-fidelity wireframes, I found that taking my time to reason through each design choice and referencing my insights to support them helped me validate my designs and gave me another perspective to consider when I redesigned different parts of the mobile app.

Next Steps:

I would perform another round of usability testing on the high-fidelity prototype to solidify the user needs and making sure that the user pain points were addressed with the mobile app. With those insights, I would ideate another high-fidelity prototype and conduct additional usability testing on that prototype to validate my design choices. Finally, I would also decide on performance metrics to measure its success.

Thanks for reading!

Previous
Previous

ArtGo: Google UX Certificate Case Study (mobile design)