Eccountable:
End-to-end product design for a personal financing app.
Field :
My Role
Project Goal:
Design Goals:
Fintech
UX Research, UI Design, Prototype
Design an end-to-end budgeting process UI for a personal financing app
Design the app logo and overall branding.
Design 2 primary features : Personalizable budgeting feature and a simple financial overview
Development Stages
Objective:
Understand pre-existing products in the market and identify ways to improve user journey
UX Research
Method 1:
Process:
Market Research & Competitor Analysis
I started off my UX research by going on the Apple appstore to identify the most popular personal financing apps and doing further analysis of real time users of the top rated apps. To better understand the features available on each apps and the user journey for each product, I read the most recent product reviews and recorded any feedback that are either insightful and/or have been pointed out by more than 2 users. I then used my research findings to create a competitive analysis of these products.
Findings:
Market research indicated that Mint, Personal Capital and Marcus are the top 3 personal financing apps with varying pros and cons. The biggest pain points for user with these apps are primarily focused around AI limitations when it comes to how quickly these apps learn over time and the limited ways to tag transactions. One pain point that seem resolvable was the lack of ability to update transaction type or category over time.
Method 2:
Process:
Survey
With my target audience in mind, I sent a survey to young professionals to better understand their experience with personal financing apps and their motive in using such apps.
Findings:
Participants who have and/or are using personal financing apps have consistent flow of income
9 of 15 participants use Mint and 3 use Personal Capital
Participants are mostly concerned about tracking their spendings and monitoring their overall finances
Method 3:
Process:
User Interview
Among participants who took the initial survey, I interviewed 3 of them to better understand their motivation and behavior of using these personal financing apps.
Finding:
Participants are more interested in budgeting than indicated on the survey
Participants are most interested in tracking their spendings against a personalized budget
Inability to update transaction category is the biggest pain point
All existing apps seem to lack a smart budgeting process
Objectives:
Define user persona
Define product features and information architecture
Defining User
Method:
Process:
User Persona
Based on the results from user research, I created a persona for a young professional.
Method:
Process:
Customer Journey Map
With our persona in mind, I then created a journey map based on user’s experience with competitor products.
Information Architecture
Metod:
Process:
Feature Roadmap, Site Map & User Flow
I utilized my findings from Research to build a feature roadmap that will help me prioritize and map our the product features. And then created a site map of the features.
With our user persona and feature prioritization in mind, I created a user flow as the first phase of the project. The user flow focuses on the budgeting task which will be the primary focus of the project.
Feature RoadmapSite MapUser FlowBranding
Metod:
Process:
Style Tile
Now that I have an understanding of the product content and the product user target, I started off by brainstorming a name for the product. Once I decided on “Eccountable” as the product name, I designed couple it iterations of the logo and then the color palette. I initially chose a vivid and dark blue as my primary brand color and later changed it to a lighter shade to better reflect the overall color template and the visuals. The lighter color palette also helps make the product feel less serious and more playful and fun. I then picked Open Sans as my typography since it has a clean and rounded visual which complements the overall color scheme and the logo. I then designed some key icons to use for the app using the same color palette and rounded vectors to complement the typography.
Objectives:
Brainstorm low fidelity wireframe for the app
Start designing high-fidelity wireframe for the budgeting user task
Finalize UI Design
Low-fidelity wireframe
Method:
Processs:
Lo-fi Wireframe Brainstorm
To get started, I created multiple iterations of the maine pages I will be designing for project, mainly focusing on the content placement and overall site flow, making sure to follow the User Flow from earlier and sticking to the sitemap. Once I had couple iterations, I discussed my options and the pros and cons of each wireframe with my mentor with my key design goals in mind.
Lo-fi Wireframe IterationsFinalized Lo-Fi WireframeHigh-Fidelity Wireframe
Method:
Process:
Hi-Fi Wireframe & UI Design
Once I had a final set of Lo-Fi Wireframes I started working on the Hi-Fi wireframe, paying closer attention to detail. The design of each screen required designing UI components that I can utilize thorough different screens of the site, such as the transaction category icons as shown in the Style Tile. This is also the stage where I incorporated examples of images that will go well with the overall UI Design. While trying to finalize the Hi-Fi Wireframe, I ended up iterating each screen to simplify the Creating Budget User Flow and the overall UI Design.
Objectives:
Build a clean and easy to follow prototype
Prototyping
Method:
Hi-Fidelity Prototype
Once the final Wireframes were done, I started prototyping and designing components such as drop down overlays and pop-ups required for a functional prototype. An important part of this stage was also making sure each component of the wireframe (i.e. icons, buttons, sliders etc.) all performed the way a user might expect.
Test the final prototype to find gaps on the prototype and test if the app functions as per user’s expectation.
Objective :
Usability Test
Method:
Process:
Usability Test
With the completed prototype, I recruited 3 people who have used budgeting apps in the past to test my app. This virtual test included below prompts:
Imagine that you’ve set up your account in this app and added your personal bank account. Now log back into the app and set up a monthly budget.
Locate where you can edit the budget in the future
Test Findings:
All users were able to set up their monthly budget without much confusion.
All users were able to locate where to edit budget without much difficulty.
All users commented that they like the overall UI Design and the use of visuals and images to break up the screen.
2 out of 3 users followed “Create Budget” pop-up while one navigated from home page.
1 of 3 users had difficulty differentiating the functionality of “Edit” and “Review” for budgeting monthly expense.
1 user said they would prefer allocating their remaining balance to different savings by percentage rather than dollar amount.
1 user commented that they would have liked to see an example of how to create new transaction category/sub-category
reflection on the project
Key Takeaways:
In order to build a full product, I need to consider the production process in phases, which is where I can break down my functionality of each function of the product or by the overall functions of the product.
Each stage of the project production can and will need re-iteration through out the development process and so it is better to think of each step as a working process rather than a final deliverable. My overall color palette and User flow, which I initially considered finalized during each stage eventually changed over the course of the project. Which was a bit challenging to accept first, but then I had to accept those changes since they allowed me to improve the product’s usability and ooverall design.
Next Steps:
Build out the other screens for the product, including Investments as that was a big part of user’s interest as found during Research.
Further polish the budgeting workflow, by simplifying the process and making it more intuitive.