Case Study: New my finance feature in the Citi Mobile app- UX way

Project Background

Citigroup is a global financial corporation, its retail division Citibank has approximately 700 branches in the US and more than 1800 branches outside the country. Based on assets size Citibank is in the top 5 largest US banks.

Citibank has customers' banking needs covered so they can access their accounts from their favorite device on the go. Citi mobile banking has given their customers to manage their money when they want, where they want, and the way they want. Their current app has been very highly rated, offering more than regular customers' needs. The app offers so many different options and features, but they look a little cluttered, not clear, or hidden for some users. Citibank would like to provide its users with personalized features that allow them to manage their personal finances neatly, well planned, organized, and guided.

How might we: Design a new personal finance management feature that embeds within the current Citi app and flows smoothly with the rest of the app.

Design Stages

Stage One: Empathize

An essential part of this stage is research where we gathered information from any possible sources, understand our users, and learn about the competitor's strengths and weaknesses. Hence, I created detailed market research using online available materials, creating a competitive analysis, conducting 1 on 1 interview, surveys, and more.

Secondary Research

Here are some research insights gathered from my secondary/market research.

• Mobile banking is already a pervasive trend; according to Insider Intelligence's Mobile Banking Competitive Study, 89% of respondents use mobile banking.
• Massive 98% of Millennials use mobile banking, and 91% of Gen Xers and 79% of baby boomers also reported seeing benefits of this service.
• Mobile banking allows users to be on top of their finances with proper on-time notifications of any kind( bill paying, balance, etc.)
• Security is ranked the most in-demand mobile banking feature.
• Account management tools allow customers to conduct basic banking tasks, hence banking mobile apps become the primary way of accessing bank accounts, frustration-free and convenient.
• The biggest benefits of using mobile banking for 2021: accessing banks 24/7; optimizing your money; paying IOUs; strengthening security; giving you tailored options and more.
• Mobile banking is designed to help in all kinds of ways- some of which are fundamentally redefining what a bank is and what it offers.

Competitive Analysis

An important part of our early research was to perform competitive analysis and compare Citi bank with other financial institutions.

Primary research 1 on 1 interview

For my primary research, I conducted in-person interviews with 9 participants ( friends & coworkers) about their banking habits. These interviews were very helpful in getting a general sense of their overall banking, which are essential for our further journey.

Stage Two: Define

Based on the interview findings and previous research material we easily flew into the next stage where we created our persona. This an important tool because the persona is an archetypical user whose goals and characteristics represent the needs of a larger group of users, including behavior patterns, skills, goals, attitudes, and more.

Persona

Empathy Map

An additional part of the persona was creating the empathy map. By synthesizing our current research data we created a map of how a typical day for our persona looks.

Project Goals

For the project to become successful, it's important to consider and identify both business and user’s goals, as well as mutual goals. This is an important step that leads us ahead in the right direction.

Information Architecture

Information Architecture(IA) is a way of organizing information and giving them some structure, which structure will determine the steps in the user’s story. The IA Sitemap below shows the user's journey of how to manage their finances in the Citi mobile app by managing expenses, budgets, goals, as well as getting a bit of smart advice for their financial activities.

Stage Three: Ideation

Creating the sitemap allows us to start putting ideas on paper. In this stage, I started the process of sketching and went through several iterations before choosing the final version.

Wireframes

Using my paper sketches and following the IA sitemap I created mir-fidelity wireframes. I’ve developed enough pages to allow the users to manage my finance feature from organizing budgets, setting a new goal,s or getting some financial advice.

Design System

Right before creating high-fidelity wireframes and prototypes, I wanted to identify Citi mobile app with the UI kit that contained the logo, color palette, typography, icons, input fields, section controls, and buttons.

Stage Four: Prototype

After identifying the UI kit we naturally flew into the process of filling out the wireframes with the elements of the design system and coming up with the complete visual design.

Stage Five: Testing

Usability testing was conducted in person with 6 participants regular banking app users.

Goals

• Participants to navigate the app easily and effortlessly.
• Participants to complete the tasks without errors and confusion.
• Identifying potential errors and thinking of a solution.

Tasks

• Scenario 1: Participants are asked to explore the My Finance feature and see what to do when managing their finances.
• Scenario 2: Participants are asked to manage goals and explore budgeting options.

Next step

This was an incredible learning experience. Seemingly impossible in the beginning but turned out as a great personal success. Creating a new feature for the existing product is a challenging and innovative process. I did learn a lot, I got to practice my user interface skills and learned a lot about banking and financing.

The next step will be updating the prototype, conduct more testing, and further improvement of the product.

Thank you!