Date: January 2019
Client: Chase
Role: UX/UI Designer
Deliverables: iOS app prototype
The Challenge
Improve a full capacity
of finance management
for Millennials
Chase bank is the six largest bank in the world with a mission to help people improve the financial health. Their current mobile app is very well rated, but limited to spending and making payments. To improve a full capacity of finance management and to focus on Millennial users, Chase wants to round out their offerings by providing users with personalized features that allow them to manage their personal finances.
The Objectives
- To design a new personal finance management features for Millennials that embeds within the current Chase app.
- To follow Chase’s existing design patterns and integrate the new features into the current app for a smooth user experience.
Secondary Research
I started off with the secondary research to gain a general understanding of the bank/finance industry and Chase’s demographic. Although Chase is serving over half of America’s households, the latest study show a continual increase of mobile usage for banking and Millennials take a majority for Chase mobile app. I also thoroughly analyzed Chase’s features and less customized functionality when designing the new personal management features. After learning more about Chase, I wanted to study more about how Chase users would differ from users of major finance services. The interesting facts found out about millennial users that 65% of millennials users are actively using non-traditional bank (such as google and apple) for their finance activities, 25% millennial users are willing to switch to non-traditional for their major finance management and 43% of millennial users do their finance management using mobile as top finance services are also used prioritizing on mobile devices.
Feel free to view a full competitive analysis report.
User Research
To learn more about the users, I conducted contextual inquiry interviews with potential Chase app users at places where our target audience would visit (List New School library and Blue Bottle Coffee shop next to WeWork office in Bryant Park, NYC). The people I spoke to were young students, professionals, and entrepreneurs, the target audience for new features. There are a few insights I learned from the discussions:
All millennials believe that finance app is too hard or complicated to manage their daily finance activities.
Biggest Pain Points
Define User
Based on the research findings and reflecting Chase’s target demographic, I created two personas Josh and Emma to represent the findings from the research. Josh is a young student of the Millennial generation who needs a help on saving and Emma is a young entrepreneur who wants to have an ownership of all of her finance activities. By giving context and personality to the research data, we can synchronize their behaviors and better emphasize with the target user throughout the design process. To accomplish Chase’s scope of new features on mobile devices, I primarily focused on millennial users. Feel free to view a second persona, Emma.
“I need to save some money to buy a new camera, but it’s not that easy”
“I need to have a finance ownership and recently am interested in investing”
From research findings, the interviews seemed satisfied with current features, but they definitely needed more personalized features to accomplish their finance goals. It was important to uncover their pains and gains clearly to enhancing bank experiences for Chase users. Feel free to view Josh’s empathy map and Emma’s persona
Storyboard for their journey
To further understand the user and problem space, I drafted a short storyboard illustrating Josh’s usage of Chase app. This quickly communicates Josh’s problem and how Chase app could offer a solution to this problem.
Project Goals
After defining and emphasizing with Josh and Emma, I started to define business goals and user goals to make sure I could build a solution to both sides. It’s so important to clearly understand what Chase’s original goals and what Chase could expect to achieve from starting to design a solution. Then these goals are across matched with users’ goals to ideate what are the common goals I want to design to solve.
How Might We
After common goals, I deeply researched about features from major competitors based on Josh’s and Emma’s needs. These analysis led me to correlate best features from the top finance management companies for Chase users. These analysis opened a design question to explore:
How might we create Josh with saving features which allow him to easily save from the checking account?
How might we help Josh to keep track his spending?
Sitemap
Then, I created a sitemap to visualize the information architecture of the app. This helped me determine where to best locate the new features the current app design such that it’s still intuitive for existing Chase users.
User Flows
To analyze the flow of the new features, I mapped out various ways of user flows based on scenarios I found from the primary research. This helped me learn which screens and UI elements were needed to implement the new features, while considering how to optimize use flows.
Task Flows
Autosave/ Budget
Next, I explored flows for two major features, autosave and budget, in more details by constructing two task flows: Josh wants to set up autosave rule for the first time and wants to set up the budget for next month. This practice helped me thoroughly understand about personas behaviors and their decision making thoughts throughout the whole process to find a right design solution.
Autosave
Budget
Design Audit
Before start working on wireframes, I analyzed Chase’s mobile app to familiarize myself with the current design, documenting notes of all the main features and other top players’ new features for Millennials. Thanks to Finn’s intensive years of researching and testing users, Finn has already operated appropriate features for Millennials. I wanted to make sure I could take advantages from their features to be resourceful. This process allowed me to gain better understanding of Chase’s design patterns and advanced features from Finn, discover new opportunities which could enhance new features and how new features could be integrated.
Low-Fidelity
Wireframe
I initially sketched low-fidelity wireframe by sketching in post-its and whiteboard. I found it’s very beneficial to quickly and clearly map out all necessary features and layouts to see overall flows before digging into high-fidelity details and prepare me to use my time more efficiently.
Sketches
I started designing UI of new features by sketching out various ideas. I was able to smoothly integrated the new features while adhering to Chase’s design patterns and utilizing UI elements that Chase users are already familiar with. With the annotated sketches, I was able to present my ideas to other teams and gain constructive feedback at an early stage of the design.
Style Board
Before creating high-fidelity wireframe, I created a style board to enhance Chase’s branding to ensure cohesiveness.
High-Fidelity Wireframe
Based on the interviews I conducted and a survey specifically about saving, I was able to gather deep insights of users’ pains and needs. Most important data I learned that spending and savings are deeply related to each other and most of time, users save money to buy or spend for specific needs. Almost all of them need easier and better way to save more for their needs. The autosave features are directly made to solve their pains about saving.
Autosave Intro
Autosave Features
Smart Budget
Your Report
High-Fidelity Prototype
I then created high-fidelity wireframes in Sketch for a mobile app. The design were all based off of Chase’s existing mobile UI, often requiring me to match pixel to pixel. For autosave rules, I inspired from Finn’s current features. The wireframe demonstrated the look and feel of the new features and encourage useful feedback from stakeholders. With the high-fidelity wireframes, I created a mobile prototype in Marvel app to gather usability data from Chase users. Feel free to interact with the prototype using button below.
Affinity Map
I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. Then I draw insights from the synthesized information, which informed recommendations for the next iteration in the design. For example, the highest priority insights indicated a need to improve the learnability of the new features. Therefore, I recommended to add announcements that introduce the features and show where to find them.
Spending and saving
are deeply correlated
A new personalized autosave rule offers to set up a customized rule towards buying a specific product.
Ui Kit
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Although many of the UI elements were based on Chase’s existing design, I had to make everything from scratch using Sketch and Illustrator.
Reflection
Since Chase is already enjoyed by many of its users, it was difficult to identify opportunities for growth. However, I was able to overcome this challenge by defining and emphasizing with the target user. Earlier in the research phase, we identify that it’s critical for new features to have flexible enough to manage financial flows without visiting several pages. Therefore, a key goal moving forward would be to determine how simple it could be to track their spendings and how much people could save money on using autosave features.
Next Step
- Revise according to the affinity map’s recommendations
- Work with developers to identify any technical limitations
- Conduct research that would track how much money would be saved using autosave rules
- Continue organizing design deliverable for handoff