This is a concept project I worked on in a UI Design bootcamp. Since my work experience is so mobile-focused, I was curious to design a web app that has to do with financial workflows, to get more experience designing experiences around numbers and money.
MDGT is a web app that supports people hitting their financial goals. In theory, this web app comprises both budgeting/saving as well as debt paydown tools, but for this design exercise I focused on the debt paydown aspects of the tool. This web app is a financial tool for consumers, and the look & feel is approachable, clean, and trustworthy, so that users feel they can work with the tool effectively.
To see how other web tools presented budgeting and debt payoff information, I looked at legacy/industry-leading tools Undebt.me and You Need A Budget, and I also looked at more modern/startup-y tools like Wealthfront. I noticed these fintech tools went with a lot gray/blue/black colors in their visual identity, so I decided to lead with a kelly green color for MDGT. I selected colors and fonts for MDGT’s brand bible that evoked simplicity, freshness, steadiness, and growth.
Here's how that onboarding process looks for the user.
The primary flow the user has to do upon sign up is to set up their debt pay-down plan. They do this by adding in account details, currently in a manual process of entering in the data for each account. In theory, this web app could support a financial account direct integration tool like Plaid, but for the purposes of this design exercise I did a more manual process.
I went through a rapid prototyping, mid-fi and hi-fi process to build out and pressure test the UX and UI of this web app, honing how all the pieces of the puzzle fit together.
Users are also able to see how their debt pay-plan looks and is tracking in various other views: a calendar view, an account list, a view of their payment history, and a chart graphing their progress. Throughout the web app, I sought to provide unique views of information and not repeat information too much, definitely relying on the sticky header that shows at a high level this month's payment progress and how the user is moving towards their goal.