New Feature Add | Mint Mobile App
a speculative design project on adding a new feature to Mint, a budget tracking app (not associated)
Role
Sole UX/UI Designer
Timeline
10 weeks - 20 hours/week
Skills/Tools
User Research, Information Architecture, Wireframes, Sketch, InVision
Challenge
Add a new feature that seamlessly integrates into the Mint app.
Solution
Based on research, users were interested in tracking their finances in one place, especially their investments. They also want to become more educated in their finance decisions, therefore, the new features include a deeper overview of their investment performances and a news section to inform users of the current financial market.
01. Discovery & Research
Research Findings
As a budgeting app, Mint is able to link multiple financial accounts so that everything can be seen in one place. However, while it does a great job in tracking expenses and gives a good general overview of budgets, there are areas for improvement in tracking personal investments. Therefore, in the research phase, I wanted to uncover how people were tracking their investments, what they are look at and how to improve Mint’s capabilities in providing the information people need. First off, I wanted to see how people felt about investing and through this research, I discovered that:
Millennials want to gain financial independence, but is living paycheck to paycheck with high expenses
Transamerica reported that 53% of Millennial believe that that the primary source of retirement income will be from 401K, IRA, and other savings accounts and have started thinking about savings, investing and retirement earlier than other generations
Millennials are interested in investing, and see technology as their best friend to inform them of their investments
Source: The Balance, CBINSIGHTS, Investopdedia, Raconteur
Competitive Analysis
And from there, I wanted to understand how Mint compared to other apps in the same market. Since there were many budgeting apps with similar capabilities as Mint, I looked to identify which areas these competitors were strongest in and where they were weakest to help pinpoint how Mint could differentiate from the rest.
User Research
Based on Secondary/Market Research and the surveys conducted among 4 participants, a common theme is that:
With the multitude of finance apps, having one that tracks all their finances would be helpful
Many would like to be more educated and up to date with finance news
Millennials are more conscious about their finances due to their experience with the recession and look to alternative methods to make passive income
Majority of users wanted to see an option to learn more about the market to inform their decisions, therefore a possible solution was adding an area within the platform to keep up with the financial news. Another point that users emphasized was the ability to track everything in one place so instead of going back and forth between apps, allowing Mint to track all things finance and providing more information from their linked accounts would be easier to digest and to use.
02. Define
Persona & User Journey
Using the research, two personas were created Allie and Nick, to define who the users were and what they think about when going through their personal finance journey. It delved into their personality as well as their thought process and feelings so that I could identify what kinds of opportunities were there to help design a feature that would be beneficial to their financial journey.
03. Ideate
Site Map
First is the information architecture which is built off of the existing app architecture and the revised included the new features. The new information architecture is used to visualize how the design will flow once completed.
User Flow
Once I had a good visual of how the app would flow within the existing app, I created the user flow to showcase how the user would go through the app given the scenario.
Scenario 1
Allie wanted to see an overview of her investments and a graph of her Robinhood linked account and its performance.
Scenario 2
Nick wanted to see an overview of his investments, but also wanted to see an update and some resources on the market.
04. Design
Low-fidelity Wireframes
To quickly visualize how the new features would be integrated into the existing app, I first sketched it out with pen and paper. I decided to go with low-fidelity wireframes as part of the design process, and omit the mid-fidelity, because there are already existing components to the design. And so, I felt that sketches would make a better visualization without devoting too much time given the time constraint.
UI Kit
I then re-created the UI kit using the existing components so that it would be seamlessly integrated into the app.
High-fidelity Wireframes
Using the existing components and the sketches, I built the high fidelity wireframes with a more holistic view of the investment accounts and more visibility into its performance. In addition to this, the finance news tab was included to provide more information for users who wanted the latest market information.
05. Implementation & Iteration
Using the tool, Maze, the high fidelity prototype was tested with 7 participants to understand how the participants would navigate through the site and identify the areas for improvement
Prototype
From the homepage, you would be able to go to your investment accounts and see an overview of your investments. By selecting an account, you can then see the daily, weekly and monthly performance as well as any transactions made through that account
In the navigation bar, the finance news feature was added so that users can easily view the latest finance news to better inform their financial and investment decisions. This view also include trending stock where the user can click in and view the performance of that stock.
From research, financial information was crucial to their decision making so having that piece would enable them to be better informed.
High Fidelity and User Testing
Based on the user testing, I made the following improvements and iterations:
The click through for the investment account wasn’t noticeable enough, so made a clearer distinction there
3 participants found the colors on the pie chart to be too similar, therefore updated the colors
Bigger text sizes for the percentage breakout of the investment overview
Key Learnings & Next Steps
If I had more time, I would dive a little deeper in the research phase and learn more about the audience I’m reaching. I would also like continue to test the usability and get more feedback to further improve the design.