Task: Feature addition
Role: UX/UI Designer
Duration: 2 weeks of 40 hours each
Tools: Figma, Procreate, pen & paper
Project Overview
Citibank, the consumer division of Citigroup (200 million customers in more than 100 countries across six continents), wants to expand its personal finance management capabilities for the mobile app. The current mobile app is very well rated, but very basic in functionality. The features that they are offering focus primarily on spending, making payments and tracking finances. Citibank would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. Objective
Design a new feature for the Citibank app that will bring value to customers and help create a better and more engaing experience with the app.Problem
In a crowded financial landscape where most financial institutions offer similar services, Citibank needs to offer financial tools that are easy and simple to use in order to be relevant to millennial customers and attract new ones. The current app is useful but basic and does not offer the opportunity to customize features that would help customers stay on track of their finances and be proactive about how they choose to spend their money.Design Thinking
1: Discover
UX Research
My first task was finding participants that fit the target audience and develop the artifacts needed to conduct UX research. I wanted to do both qualitative and quantitative research and decided to prepare a User Interview and a Survey to send out. Besides general research on banking and other financial institutions, when going into user interviews I wanted to explore how people make decisions about their money and where to keep it. Some of the questions I wanted to answer were:-What is the most basic need that a banking app needs to fulfill?
-What are the main factors people consider in choosing a financial institution?
-Who makes these kind of decisions in a family?
After interviewing 3 participants (2 girls, 1 guy) that fit the target audience, the following are the takeaways:-2 out of 3 participants cannot achieve all banking need on app. -2 out of 3 participants wished they could do more with the app, including: • Set up Budget Goals to help you stay on track • Access to documents related to accounts linked to the main bank account.Checking balances, paying bills and having ‘on the go’ access to their finances are the 3 main uses of their banking app. However an app cannot substitute talking to an actual person when solving an account related issue
- Frequency of use is 3- 7 times per week -All participants would use the service to take cash out with the phone if available and were excited about the idea. The 3 Top reasons to contact the bank on the phone were: •Taking a loan •Fraudulent activity suspected •Replacing card. - Contacting the bank via the app OK only if there was a real person replying. - Banking apps rated from 5 to 8 out of 10. I also found out that people still prefer to talk to a person when confronted with a financial issue and texting and messaging would not work in such a case.Pain Points - Using an app for financial purposes sometimes feels Impersonal - Difficult to figure out charges on the screen sometimes - Prefer to pay bills on desktop instead - Security concerns if phone gets stolen or lost
As for the Online Survey, I was able to obtain 17 responses and data obtained was similar to the user interviews:
Competitive Research and Analysis
My research focused on 3 direct competitors retail banking institutions and 2 financial businesses that only function digitally. These are the main takeaways:
-Most traditional retail banks in the US offer very similar product. -Customers want to access their finances anywhere at any time. -67% of Millennials want digital budgeting from their banks. -Digital apps companies such as Venmo aim to provide services that traditional banks have but they can do it cheaper (no physical locations).Millenials want easy-access and control their finances on their phone. They want to be able to view their spending habits, be offered guidance, and have real-time access to their finances.
Phase 2: Define
Persona Development
The data collected from user interviews was then analyzed to create a user persona. Personas bring research to life and help illustrate who we are disigning for. Personas illustrate who we are designing for and why.POV statements and HMW questions also informed the creation of her character…Meet Johanna…
For Johanna, a busy New Yorker, the banking app is a tool that should helps her stay on top of her finances and hopefully encourage her to save money by seeing clearly how she spends and allocates resources.Based on the user needs I narrowed in on what features to add in order to simplify Johanna’s life. I decided on the following features:
1. ‘Your Budget’ feature to be able to allocate money to the different categories needed and easily edit them.
2. Bring clarity and visibility to the transactions on the most used account on the app, Checking.
Information Architecture
After this stage, I moved on to information architecture and interaction design. I created an Application Map to define the hierarchy of the added features and where they will sit on the existing app. This helped mentally visualize how users would interact with the prototype before building out mid-fidelity wireframes.After determining the interactivity with existing components of the site, I moved into designing and building the experience.As I started hand sketching the initial thoughts and screens, I developed a Task Flow based on 2 tasks:-Editing Your Budget by increasing the amount allocated to Education & Learning category.-Find a specific transaction and see all the details including location and merchant website.
Phase 3: Design
Wireframes
As I had to work with the existing Citibank design system, I focused first on developing the Homepage trying to match exactly the existing app. I decided to show these initial wireframes to a potential user and conduct a mini usability test to see if I was on the right track. The user felt that the new feature was useful but needed to be more visible and interactive by adding a CTA button instead of just hovering and click on the container.As ‘Your Budget’ feature will be accessible through the homepage, it should blend in but also look new and attractive for the user to engage with it.
Mid Fidelity
At this point I wanted to bring more of the Citibank brand identity into the design and decided to create a mini style guide with a nod to recent marketing campaigns. As the colors and typography will match the existing app, this visual was a way to keep inspired as filling in color and images is something I truly enjoy.
High Fidelity
At this stage, I carefully reviewed the Citibank online channels multiple times to see how they choose to highlight information, the limited color families they use and how each account package differs a little from each other. First I recreated the Citi Priority splash screen artwork using Procreate as I thought the teals and greens would look good together with the different shades of green used on the Budget Chart wheel later. After creating and playing with the icons in multiple colors I decided to make them all in grey to match existing themes. The CTA button color also matches the current Citibank app buttons.The column graphic charts used to show income and expenses on the Alerts screen display everything that is expense-related in green and income-related in blue. In addition, the alerts number icon located above unread notification cards was first Blue (as in CTA button) but during early testing it was not noticed at all and decided to use the bright green instead.The challenge here was to make the Checking Transactions screen more visual while keeping it ‘Citibank’ enough. As in the current app, the transaction screen is very basic and only shows text, I decided to ad the original vendors logos as they are and have a small CTA button to open transaction details in a new screen. I feel this was a subtle way to bring a bit of newness and still be on brand. 
Wireflow
-The first 9 Screens depict ‘Your Budget’ flow and Journey.-The last 3 screens show the checking account details.Phase 4: Prototyping and User Testing
I created a high fidelity prototype in Figma and conducted remote testing using video platform with 3 participants who went through a series of tasks. The total number of participant that completed the test was 2 guys and 1 girl and they matched the target audience. Task 1: the main task was to edit ‘Your Budget’ by increasing the amount allocated to the category ‘Education & Learning’. Task 2: The next task was to disable alerts and notifications that happen after the new feature is updated. Task 3: Find and explore transaction on checking account..Testing Takaways:
• All participants completed the tasks. • The preferred method of navigation was by clicking on CTA buttons. • The visual design of Citibank app could be improved by reviewing the visual hierarchy of text fields within containers and by adding more visual elements. • All participants liked the added clarity and visibility to the transactions details and wished their bank had it.All participants considered the new feature useful and will use it if it becomes available
Next Steps
The plan moving forward would be to design the ‘Add a Category’ to the budget feature in order to make it truly useful and interactive. The user will find many extra categories to choose from and also be able to come up with one of their own. Final thoughts
As a conclusion, I feel that this project was challenging and rewarding at the same time. The constraints of having to work with an existing design system- and particularly one that belongs to one of the largest financial institutions in the world-, made me question every design decision along the journey . The many questions that came up, such as ‘how they would solve this’ or ‘why do they use this navigation’ enhanced the learning experience and made the process feel collaborative.