Earnest Dashboard UI for Android
Imagining the Earnest mobile experience
--
For a one-weekend material design challenge, I presented my take on a possible user interface design for Earnest’s native Android app. My design contributions are based on the materials presented on Earnest’s website.
Anything finance can be cumbersome and daunting. One of the values that Earnest is bringing to their clients is the support for financial responsibility and I wanted my design to reflect this idea.
In this project, I tried to emphasize the concept of goal completion. Every payment you make to Earnest is not a repayment of debt, but a reassurance of your personal responsibility and earning of success.
My goal was not to solve any specific usability problem but to explore potential design solutions to improve the experience of student loan management. I focused on making loan repayment a simple and rewarding experience, rather than a disheartening task to make ends meet.
This article is a walk-through of my reasoning behind the design, highlighting two main factors:
1. How I think the design is useful and relevant to the user
2. How I think it can be improved. What are the limitations?
About the Project
What I designed
An Earnest-inspired mobile app dashboard for flexibly managing and paying off student loans
The app is used to track, organize and make payments
Who I designed for
Earnest clients who will benefit from an easier way of paying off their loans and a more personalized loan management experience
Why I designed
To offer a possible design solution for how to make the experience of paying off loans simple and rewarding, like a weight lifted off your shoulders
Understand the core product
I wanted to transport the existing Earnest’s web dashboard experience to mobile. To achieve this, I focused on designing an experience that accomplishes the basic functions of the web product, as listed on Earnest’s product page (https://www.meetearnest.com/). I read through the FAQs page to get a better sense of what Earnest offers. The fact that I’ve never used their web tool meant that I was able to approach the mobile design from a fresh and mobile-focused angle.
Explore design ideas
My design drew on four main user tasks: 1) Track 2) Manage 3) Pay and 4) Plan. The material design card framework is perfect for presenting these different task elements on a dashboard, as it provides a consistent, unifying UI layer without costing a lot of space. At the same time, it allows for more customizing abilities for each individual piece of content.
Design & Iterate
My goal was to capture the idea that every payment made is a step of progress. Earnest’s green, green-blue, white and grey color palette and fresh aesthetics provided me a great inspiration for fulfilling this goal.
In my first iteration, the Loan Overview card was a payment schedule graph that serves to display information and celebrate progression. When you make a payment, Earnest will light up your day with a green checkmark or dollar sign symbol, marking completion. This synchronizes with the animated green-blue gradient area in the graph, which adds a burst of positive energy to the cost trajectory curving down. Additionally, the dotted curve gives a sense of confidence and predictability to your financial journey.
After a careful consideration of the overall aesthetics, I decided to minimize the graph into a progress bar. This decision was led by how I prioritized simplicity and effortlessness in this design. The graph feels heavy and naturally complex, as it requires time to process or interpret. I figured that adding aesthetic values and emotional function to the graph complicates its fundamental purpose. Rather, the loan overview should directly and clearly provide users specific information such as current balance and months remaining.
Final Design
Some feature descriptions + Design Analysis
This was a good exercise that taught me about the challenges of designing for a financial system. To limit the scope of the project, I only focused on the visual aspect of the app. With more information on Earnest’s technology and clients’ needs, I’d also love to tackle other practical UX requirements such as the specifics of use cases and architecture of payment flows.
Disclaimer: I’m not affiliated with Earnest in any way. I was simply inspired by Earnest’s “Radical Repayment Flexibility” web dashboard concept. The core ideas and features of the product, such as Loan Overview, Make a Payment and Update Autopay belong entirely to Earnest. The UI design parts above were created by me with the the exception of some material icons and Earnest logo, which was taken from Earnest’s Press page.
References
https://www.meetearnest.com/
https://www.meetearnest.com/personal-loans
https://www.meetearnest.com/press
https://www.google.com/design/icons/
