This redesign project is working directly with one of the top 5 banks in the U.S. The goal of this project is to reimagine the future banking experience in 2020, to deliver a design system that can be built on by client's in-house design team. Unfortunately, client information is under non-disclosure agreements, all elements (e.g., logos, color palette) that can be used to identify the client's identity are removed from the designs shown.
Our team receives this project in early 2018. We were asked to create a "future-proof" design system for 2020 that can be built upon later by the client's in-house design team. Our client has a "future vision" team that generates directional ideas and features as well as user journey and personas. Our role is to take the roadmap from the future vision team, visualize into a design system and deliver to the in-house design team.
We received a lot of documents around ideas, feature sets, vision documents, personas, user stories, use cases, brand strategy and research findings during our on-boarding process. Intending to be helpful, our client unloaded a lot of information on us, and it's difficult for us to have a clear direction on what to do.
We started off on the persona documents that the client provided. In the roadmap documents, our client defines our primary user group as tech-savvy early adopters, primarily targeting the younger generation like millennial and gen-z users.
Meet Jeremy & Nancy. They are both interested in using new tech to solve their challenges in life. Jeremy is more of a financial expert: creates budgets, set saving goals, goes over his bill in details, and he likes to take control of his finance. Nancy, on the other hand, is less confident with her financial well-being. She wants to control her finance, but she doesn't know how. She hopes her bank can help her with a lot of the challenge she is facing.
We know that a successful experience is a combination of user needs and business goals. With that in mind, we created our focus on the overlapping area between the two.
After creating focus, we identified five high-level needs that are aligned with the client's business goals. Then, using the persona and users stories documents provided, we identified user needs that fit under these five high-level needs: Survive, Monitor & Track, Move money, Optimize & Glow, Solve a Problem.
There are still a lot of user needs under these five high-level needs. We then decided to prioritize these user needs to a set of core user needs and start conceptualizing these core user needs into initial design system concepts.
While we were brainstorming for the concepts, we found ourself relating a lot of users needs to certain emotions and scenarios that we had personal experience with. To me, "I want to know how much money I have" and "I want to easily pay my bills" are my most primary user needs. Most of the time I just want to see my balance and pay my bills. But where to initiate these simple tasks are always hidden away with features I would never use.
The use case "I want my bank to do that math for me" also resonates with me. I hope that every time I check on my account, my bank should let me know how am I doing financially and help me when I'm making purchase decisions. Based on all the scenarios and emotions behind these use cases, we eventually came up with four directions that have distinct user experience from each other:
For each concept, we built out UI screens for core user needs (e.g., checking transaction history) and as well as some futuristic features our client have envisioned. (e.g., share finance with families and friends). Then we put all four concepts into user testing for feedbacks and reactions from the users. We partnered with Answerlab, a user experience research firm hired by our client for in-person research.
This project went through 3 rounds of user testing and iteration process. In general, users loved and reacted positively. A lot of them also resonate with the emotions behind these concepts. We also received tons of feedback and reactions to the futuristic features that helped us later when iterating the designs. For example, we introduced a social feature called "financial circle," which received a lot of concerns around data privacy.
After the 2nd round of user research, we found our concepts started to merge. Zen and Insight both show the users their financial insights at a glance; while In the moment and Auto Pilot both shows personalized financial activities. With the intent to create focus and getting into more detail user stories, our product team decided to merge four concepts into two concepts. With only two directions left, we can start to work on the visual designs that everyone is excited about.
Due to the volume of these two design systems, I am showing the general frameworks for each concept and 3 specific features that I worked on.
In "Zen+Insight", we decided to keep the simple sense of focus. Each page has a different focus: Balance, financial goals, financial circles, and financial planning. We use the far-left page as user profiles and far-right as financial activities feed. Users can switch their focus with just a swipe, creating calm emotion and avoiding anxiety.
"In The Moment + Auto Pilot" shows users their financial goals, activities, and plans in a feed-like fashion, making it easier for users to digest their financial information. Using the three tabs on the account page, users can view their transaction history, move money from their financial feed and manage their account settings.
This feature, came from the user feedbacks after 1st round of user testing, is to allow users to track their monthly spending. After the 3rd round of user testing, I took a step further and allow users to not only track their spending in the past but also allow users to see their estimated balance, cash flows and where they stand at their budget in the future. In the final design, I only included the future balance estimation due to client's feedback.
When you read the news today, most of the time there is a summary section before the main article. I envision there could be a summary of your transaction list every time you check on your transactions. So you won't need to hunt for major transactions, like deposit, bills or cashed checks, from a laundry list of all your transaction history.
When fin-tech app Venmo introduced a social element to the financial world, it immediately gained a lot of tractions among millennials and gen-z. With our target audience being the younger generations who primarily rely on mobile for banking, we decide to include a social feature called "Financial Circle" in the future mobile banking app. Users can create circles and invite other users to join. Users can see financial activities related to that financial circle. It makes group money management like raising money for a group event extremely easy. I primarily worked on the feed part of the financial circle feature.