Original Visual assets from the client.
Sophia Huang
Sr. UX/UI Designer
Untangle Money
Creating a new financial planning journey for Women.
About this project
Untangle Money is a Canadian start-up that wants to focus on the younger female financial planning market and needs help to re-work on their member login portal and rebrand their visual systems.
Challenge:
The client wants to rebrand their current visual guide and creates a system to help their customers understand the money that is tailored for women.
Target User:
22 - 35 years old female
Currently not married and have no children
Pre-mortgage
Recently grad with steady income
My role:
My task is to re-design the member login portal for subscription members.
Rebranding strategy
Brand development/ Style Guide
Competitive research
Customer Journey
Product strategy
User research & Analysis
MVP definition
User flow
Wireframes
UI Design & Prototyping
Timeline:
Mid-September to mid-October 2020 ( It's a five week weekend-only project.)
Tools:
Adobe XD, Figma, Adobe Photoshop, Adobe Illustrator
Discover
Competitive Research
I studied industry leaders and similar female-focused financial tools and did the analysis and comparison to them.
Findings:
Competitors' tools are not easy to use.
A lot of them don't have an online platform or app. Most of them are offline programs.
Constantly required re-adding accounts can be a lot of hassles for users.
Limited retirement tracking.
No suggestion or goals personalized to users.
Not many female-oriented experiences.
Survey and Interview
The client already has previously conducted interviews and surveys.
Top Quotes:
Here are some of the top quotes from users:
“ I want the ability to play with different scenarios and timelines to understand and build my own custom plan (e.g. I want to see what happens when I invest $100 a month versus when I invest $500 a month)”
“ I want to learn enough about financial planning to be able to work effectively with professionals (e.g. I want to feel comfortable having conversations with investment advisors, mortgage brokers, etc.)
Define
Affinity Map
I created an affinity map by distilling, categorizing, and prioritizing the research findings. And cross-analysis with the competitive findings.
23% of interviewees say I don’t have time to think about financial planning.
36% of them haven’t been able to find a good tool.
Findings:
The tools are not easy to follow.
Most girls prefer to have financial advisors for suggestions but the cost is too high.
Users want people to listen more and better understand needs, don't push products.
Users want to know the exact suggested amount to put in 401K, savings acct, and health savings account.
Persona
The main pain points for the current user are listed below:
Finance apps are too complicated.
Not sure how much I should put into savings.
Hard to navigate through all the information.
I can’t play with different scenarios with current tools.
I have tried to make a plan before, but nothing works.
And there are two different types of users. One focuses on pay off debts early and another one is to save up for future houses and have enough flex money to spend on traveling and big purchases.
Ideations
User's Journey
Creating User Journeys is a great way to help define key features and error prevention for applications. Along with User stories we are able to knead out possible problems based on their needs and desires.
I sketched out for the current flow on the demo site. And regroup them into another flow to simplify the flow and make it align with users' feedback based on the affinity map.
MVP
The MVP was defined as the following:
Dashboard- A all-in-one page for on-demand access to the most important categories and finances goals.
Smart slider- A interactive tool that can calculate how much you need to put in the retirement plan and savings to reach your goal with minimum human resources.
Finance coach- And bundle with monthly consultation sections with virtual financial advisors to ask the questions and adjust the planning to keep things on track.
User Flow
scenario 1: the first-time user wants to sign up and fill out their current financial situation by themselves or talk to the advisor.
scenario 2: existing user login to the Dashboard and check and set the goals.
scenario 3: existing users login to the Dashboard and book a financial advisor call.
Validation
Wireframes
After applied the revisions from the initial sketches, I moved on to creating wireframes in Adobe XD. I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
To save time and maximize productivity. I used wireframe UI kits to develop low-fidelity wireframes rapidly. This allowed me to create tons of clean wireframes in just minutes and get ready for user testing.
Low-fi Usability Testing:
During this round of usability testing with 4 participants, my main focus was to identify obvious usability issues with the prototype and hear the things my test participants wanted to share.
Rebranding
Moodboard
I initial the style ideas from the mood board to gather the ideas for Untangle Money.
Theme
“ Real wealth is about freedom.”
The images I choose are destinations to go, dream houses, and dream lifestyles for UM girls. You can have it all when you are finance free! And we hope this product can help you to achieve that goal faster.
Style guide
After organizing the thoughts from the brand platform, I made the brand style guide to ensures that these standards are consistent and uniform across platforms, including websites, mobile apps, and marketing collateral.
After discussing with the stakeholders for the new demographics we redefined. I adjusted the color scheme to soft and pastel tones.
Logo
I redesign the logo to the liner streams to reinforce the brand name " untangle." And the style is simple and clean to represent the easy to use of the product.
Prototyping
UI Design
I was thinking about how to make users motivated to come back to use our product when I was designing the dashboard. So I came up with the idea to change the dashboard like your cosmetics and outfits. You can change it every day depends on your mood.
And I simplified the timeline to just a few milestone marks. Users can just glance at the most essential numbers. To reduce the confusion and complicity to read all the infographics. They can also click on the card to dig into more details.
It is also interactive along with other sliders. There will be the projected numbers so users can know the exact estimated amount they will get or need to put into the different categories based on their customized goals. And the goal is to make the cold finance number to something more interactive and fun for younger demographics to overcome their fear of messy numbers and simplified the complicated tools.
Takeaways
It was challenging to process so many data and past reports and visualize them into the dashboard system and infographics.
In this process, I learned how important to keep the data organized and use the affinity map more efficiently to regroup them. And it also brings up new fun ideas when I was working on the affinity maps.
It was a short project and I only got into involved with certain parts till the UI designs. And hand them back to the team for final testing and interactions. If I had more time, I would add more " surprise gifts" to make users feel rewarding when they are achieving the goals and add different types of customized alerts when certain categories are not close to their goals and number looks off trend.
30
Iterations
20
Screens
12
cups of coffee