Adding a new feature to an existing app

PROJECT OVERVIEW

Challenges : I had to do a lot of research for this project, in order to dig deeper into the needs and frustrations of users that could be solved through a personal financial management feature. The most challenging part was seamlessly integrating the new feature into already existing Citi bank mobile app.

The high-level goal was to design a new financial management feature that embeds smoothly within the current Citi bank app.

I started off with research to better understand Citi bank mobile app and the problem that I want to solve. I conducted secondary research followed by primary research to obtain actual insight into users & their needs.

Deliverables: Market Research | Competitive Analysis | User Interview I Empathy Map I Persona

I then created provisional personas to summarize the data gathered from market research based on key demographics, behavioral patterns and to highlight the pain points of Citi bank mobile app users.

After summarizing all the data gathered from market research, I conducted a competitive analysis to identify competitors of Citi bank’s app.

Once my secondary research was completed, I put together some open-ended questions to interview Citi bank users. This interview was focused on discovering the needs, wants and personal experiences of Citi bank app users. The participants were between 18-34 yrs old who uses Citi bank app. Qualitative data was obtained through this research and helped me to gain a deeper understanding of people’s behavior and their expectations when it comes to banking apps.

Insights

Keeping track of exactly where their money goes gives customers a better understanding.

Customers are frustrated with having to link bank accounts with external financial management apps.

Customers are frustrated with not being able to manage finances efficiently.

Needs

Customers need to be able to keep track of their expenses.

Customers need to be able to manage their finances within the banking app itself.

Customers need to feel confident about management.

I organized all the data from primary and secondary research to analyze them and synthesize goals and point of view statements, in order to define the core problem identified so far, while focusing on defining the problem statements in a human-centered manner.

Deliverables: POV Statements & HMW Questions | Brainstorming | Business & User Goals I Feature Roadmap I Sitemap I User Flow I Task Flow I Sketches

Defining a point of view statements is basically combining three elements User, need and insight. While “how might we” questions have the potential to spark ideation. I know for a fact that an actionable problem statement will definitely help drive the rest of my design work. Below is the point of view statements and how might we questions for Citi bank app.

In order to generate possible ideas to the “how might we” questions, I conducted individual as well as group brainstorming sessions using mind mapping technique. I started mind mapping as many possible solutions as I can within a time period and the image on the left side was taken after individual brainstorming. The image on the right was a result of group brainstorming that was conducted with five participants. I felt that group brainstorming opened up more ideas from different perspectives.

I then mapped out business goals, user goals and the mutual goals between the business and the user.

In order to communicate key product priorities, I created roadmap using Airtable, most importantly indicates the goal, effort and priority. After prioritizing the features based on the importance to business and user goals, I moved on to the information architecture of the Citi bank app. This map shows the page, sub-pages and features of existing Citi bank app followed by new features to be integrated within the app.

For the same two tasks mentioned in the task flow, I outlined a user flow to identify different paths that a user would take to complete each task on the Citi bank app. I included all the necessary screen along with any new screens and features.

With the features prioritized based on the goals along with sitemap, user and task flow, I began sketching out ideas making sure my ideas align with the existing Citi bank app. I also referred to other personal financial management apps to get an overall idea, in order to create a simple and intuitive design. Here, you can see that I sketched out screens for setting up budget and spending trend.

After sketching out some ideas, I started building my high-fidelity wireframes using Figma. The new screens was intended to integrate smoothly with the Citi bank app’s branding and user flow, in order to provide a seamless experience for the users.

Deliverables: High-Fidelity Wireframes & Prototype I Usability Testing I Affinity Mapping

Upon entering the ‘Accounts’ screen, the user is presented with the current balance, transactions and spend summary. The user can click on ‘Spend Summary’ to know the overall spending and spending trend. Trend graph shows spending for different months and clicking on a specific month gives the overall summary.

A progress bar was provided to help user visualize the progression of their budgeting. Once the user has finished setting up limits for different categories, their budgeting goals are saved and can be viewed or edited later if necessary.

Prior to testing, I outlined the goals and two different tasks with scenarios to serve as a guide for the testing. The users were able to complete the tasks quickly without any error. Later, I put together an affinity map and clustered similar patterns which led me to new insights.

One of the problem discovered during testing was that the user wanted to see some sort of indication on the month on the trend graph to know which month’s summary they are viewing. So, I decided to bold the text (month) on the trend graph to signify to the user that they are view summary of specific month.

The design recommendations identified through affinity mapping was implemented into the design. I worked on several revisions to make the design consistent with the existing Citi bank app and to provide a better experience for the users by using known design patterns.

Deliverables: Updated High-Fidelity Wireframes & Prototype I UI Kit

Before updating my prototype, I referred to Citi bank’s guidelines and created UI kit, this will help for future referencing and iterations. Citi bank already has a strong and well established branding and a logo that perfectly fits their branding attributes, making a memorable impression on the users. All I had to do was seamless integrate the new features within the app.

Several revisions were made to high-fidelity wireframes based on the findings and feedbacks from usability testing. Below is the preview of the Citi bank app along with the integrated budgeting and spending trend feature.

Next Steps

Choose a redlining tool and hand over the completed prototype to a team of developers. Continue to perform as many testing and iteration as possible to improvise the design. Further, continue to determine any new feature that can be implemented into the app.

This project was extremely challenging due to the fact that the Citi bank is quite popular with a strong, well established branding and my goal was to seamlessly integrate a new financial management feature to the existing app. I had to recreate the flow of Citi bank before implementing the new feature. The initial research and interaction with the users helped me to understand the functionalities of the app before making further design decisions.

This was a great opportunity to understand details of how an existing app is designed (i.e. the flows, placing of UI elements, sizing, etc.) I asked a lot a questions to myself before proceeding to different phases of design. My experience during this project was challenging at the same time very exiting, since I started to learn more about user experience design.