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 of the country. Based on assets 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 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 Mobile app and flows smoothly with the rest of the app.
Design Stages
From the very beginning of our journey, we are going to identify the design stages which will serve us as a guide throughout the process. Along the way, we will simultaneously explain each stage and the involvement and importance of our role as UX designers.
Stage One: Empathize
Since we are designing for our users, the main goal is to understand our users and identify their needs, motivations, and frustrations. The best way of understanding our users is by conducting user research. For this purpose, we conducted several types of research methods, all equally important in getting the data for our project.
We started our research journey with detailed market research, where we used online available material from various resources, through reading, analyzing articles, and taking notes.
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
Another important part of our early research was to perform competitive analysis and compare Citi bank with other financial institutions. In this method, we created a list of the most popular and in-demand mobile bank features, and we conduct the analysis with four competitive banks. With this method, we gathered very useful data about the efficiency of the features that mobile banking apps offer for the users and this gives us a clear overview of users' preferences along with necessity and efficiency. This checklist will serve as a guide for further steps on our journey.
Primary research 1 on 1 interview
For our primary research, we conducted in-person interviews with 9 participants. Prior to the interview process, we created the interview script, an important tool that served us as a guide for professionally leading the interview sessions. These interviews were very helpful in getting a general sense of the participant's overall banking, we learned about their habits, needs, motivations, and frustrations.
During the primary research, we were able to get quantitative and qualitative data from our interviewees. Some of the key insights of our primary research are:
• All of the participants use mobile apps for banking and would likely recommend their bank app
• 88.9 of the participants have good experiences using their bank mobile app/s.
• Participants create their own budget plans, depending on their current income and expenses.
• Money management is mostly based on income and expenses, the balance between expenses and needs, and the process of tracking their own banking.
• 77.8% of the participants don't use advisors for their finances.
Here is the link to a detailed report of the interview findings.
Stage Two: Define
Here, we analyzed and synthesized the data gathered from our research process, and dive into the next step of defining our objectives, goals, and our UX strategy.
Interviews findings and previous research material helped us in creating our persona. 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. An additional part of the persona was creating the empathy map, which helped us to sum up the learnings from our research and to create an insight into our persona's typical day.
Project Goals
Another important segment for the project to become fully successful is to understand and identify the project goals. In our role as UX designers, this is a crucial point where we have to align the business benefits(goals) when the users reach their goals. We used our research data as a reference in determining and defining both business and users' goals, as well as mutual goals.
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 with our new my finance feature in the Citi Mobile app, and managing expenses, budgets, goals, as well as getting a bit of smart advice for their financial activities.
Stage Three: Ideation
Now that we defined our objectives, goals and structured our information, it is time to generalize and start to actually develop our ideas. Using the sitemap as a reference we started sketching and exploring some ideas on paper and we went through several iterations before choosing the final version. This is the first brief insight of our idea coming into life, our new my finance feature fitted perfectly in coordination with other app pages leading the user journey of neatly managing expenses, budget, and goals.
Wireframes
Once the basic wireframes were laid out through sketching, we converted them into mid-fidelity wireframes where the focus was given on the functionality and overall layout of the page. We've developed enough pages to allow 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, we wanted to identify the Citi Mobile app with the UI kit that contained the logo, color palette, typography, icons, input fields, section controls, and buttons. The UI kit was created to understand and identify the current brand and the design pattern used within the Citi Mobile app.
Stage Four: Prototype
After identifying the UI kit which helped us creating our visual style accordingly to the current brand 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 for our Citi Mobile app. The overall interface was clear, simple, useful, and friendly. Here is the link to our prototype
Stage Five: Testing
Upon completion of the prototype, we conducted usability testing with six participants, regular banking app users. We created a usability testing script with two tasks for the participants and with goals we tend to achieve.
The users were delighted by the new feature and didn't face any problems with navigating the app and the feature themselves rather faced some issues due to the limitation of the prototype.
The report below shows the results of our usability test findings.
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 learn a lot about banking and financing.
Citi Mobile bank is already an incredible online banking app. Adding my finance feature could be beneficial and can improve the experience of many users, and it is definitely something I intend to look further into this aspect and build on it. The next step will be updating the prototype, conduct more testing, and further improvement of the product.
Thank you!
