top of page

Simplify existing website and build a mobile application providing a simple, user-friendly payment experience for consumers.

In compliance with my non-disclosure agreement, I have omitted and obfuscated confidential information for all the case studies listed below to the best of my knowledge. The information shared in these case studies are my own and do not necessarily reflect the views of any company.



Bank of America - Electronic Payment is ongoing project collaborating with two other UX designers. Bank of America has a strong reputation in market with its online banking website for over 10years. With this increase in popularity, the app has similarly grown in features over the years — from payments to spending history. However, certain aspects of the website and app remain stagnant, and as a result, create friction for its users.

From Quarterly data analytics team got strong evidence of user shift from website to application. Although the brief was conceptual, it addressed a real problem that currently exists in the banking world: the growing market of app-based banks that are offering more personal and efficient online services compared to traditional local banks. By looking at Bank of America - Electronic Payment Website and app, there was an opportunity to build upon their strong reputation and design a mobile app specifically targeted for the smartphone user.

This Case Study will focus on Mobile app created on the basis of Bank of America's existing website.

Sector : Retail Banking 
Project Time : 2+Years
Team Size : 20 People  in 2 countries 
My Role : UX Designer 

Product Audit, Competitor's Analysis,  User Research, User  Journey Map, Service Archietecture, Lo-Fi flow Maps,Wireframe, Design

The Challenge

Bank of America - Electronic Payment couldn’t support new business flows with age old website and basic mobile application. It was lacking new banking features as per progression in the industry. Electronic Payment had an outdated UI and was a stand-alone system, which was not included into the banking system, which led to inconsistencies in the UI and data architecture.

The Process

While each project demands its own unique tweaks, I rely on this framework to guide me towards the best solution for the problem at hand.


Stakeholder Interviews

User Interviews

Data Analytics

Requirement Extraction 


Competitors Analysis

Product Audit

Persona Building

Task Analysis

Customer Journey Map


 Brainstorming session

 Information Architecture

 Business - User Goals

 User flow


 Feature Matrix

 Low Fidelity Prototypes

 High Fidelity Prototypes

 Style guide


A/B Testing

Usability Testing


Feedback & Updates


The Empathise phase connected Digital platform to its users

Qualitative Interviews

My team and I interviewed a number of users already making at least one bill payment through Website

Users consisted across a range of ages and demographics(in United state) to find out how they felt about banking services and their current banking experience.

We asked questions about their attitude and patterns related to banking and Bill payment habits. After refining the interview findings, we uncovered a number of user pain points and opportunities.

Trust: Many users are habitual to  website and have now learned how it work even though the experience is poor. They believe in bank reputation. However, user would like to see new banking app with similar features.

Security: Although it was an extra step, users preferred fingerprint identification compared to PIN entry as it provided more trust and security with a personal touch.

Payment :Transferring money and paying people back can sometimes be socially uncomfortable as well as time consuming. Users preferred app-based banking for providing a more fluid and flexible way of transferring money via account, email or phone number.

We got to know the problems faced by the users and their mental model. It defined features we had to include in the new core banking solution to that users wherein the needs and expectations would be fulfilled.

Data Analytics Report

Based on the data from Quarterly Data Analytics on website and old mobile application-- We could see a shift wherin users tried to login through mobile app but the drop out ratio while login or during payment was higher

Team had developed a strong belief that the current product was outdated and provided a bad experience. We agreed in order to succeed, the product required serious thorough functionality and UI Changes.

The Opportunity

Based on the competitor analysis and user interviews, we found that there was an opportunity to take advantage of their trusted reputation and expand their user base by offering more online support and features


Competitive Analysis

During this phase, we profiled the competitor companies, their banking solutions and how they position themselves in the market. We observed the Digital competitor successes and failures and analyzed their advantages and weak points in the customer experience. This provided a clear view of the industry background to the team.

Screenshot 2021-09-15 at 8.46.33 AM.png
User Persona

To empathize with our user group, we gathered enough information from interviews to create personas. 

All design decisions going forward were based around persona. 

The persona created is “Jennifer”: a 30-year-old single female, eager to go digital for bill Payments.

Screenshot 2021-09-15 at 8.59.10 AM.png
Empathy Map

By understanding what users think, feel, say and do we can identify genuine issues, problems or concerns that users may have right now.

Screenshot 2021-09-15 at 8.59.43 AM.png
Customer Journey Map

Customer journey mapping starts by compiling a series of user actions into a timeline. 


The process of creating a map forced conversation and an aligned mental model for the whole team. Shared vision is a critical goal of journey mapping, because, without it, agreement on how to improve customer experience would never take place.

Screenshot 2021-09-15 at 7.41_edited.jpg
Business Goals - User Goals

Business Goals 

  • Improvise the age old User Interface of money transfer, improvise security of the app.


  • Update Login mechanism.


  • Create an easy flow of transfering money/making payment


  • Enable user to transfer through all payment modes


  • Add Features to existing product that can help users to :Setup Reminder, Schedule Autopays and Automatic Payment, Set temporary hold on Cards.


  • Stand out among legacy banking institutions, and adopt some of the new ways these digital banks operate


  • Build flows and avoid Fragmentation


  • Increase service satisfaction

User Goals

  • Seamless Money Transfer Anytime-Anywhere.


  • Would like to set up Reminder for payments.


  • Would like to set up Automatic Payments.


  • Would like to be environment friendly and receive all bills via email.


  • Would like to see less jargons used. 


  • Put a Temporary hold on card.


  • Would like to set up spending limit on my account/card.


We created Sitemap to understand the hierarchy of application, that shows how pages are prioritised, linked, and labeled.

Screenshot 2021-09-15 at 9.03.19 PM.png
High Level Flow

We created  high level flow to understand the most important states, without going deep into specific interactions or edge cases. 


A high level flow helps define the specifications and constraints for the next stage of the process.

Screenshot 2021-09-15 at 9.07.46 PM.png
Low Fidelity Wireframe

We created high level flow to understand the most important states, without going deep into specific interactions or edge cases. 


A high level flow helps define the specifications and constraints for the next stage of the process.

Screenshot 2021-09-20 at 7.02.28 PM.png
A/B Test

We created two set of Design and did some A/B Test. Based on A/B test we collated the finding and made changes to the design, changes were mainly related to Headlines and subheadings and call to action button and text.

Participants like it because it enhances the experience of users already familiar with Electronic Payment instead of having them learn how to adjust to the new flow.

High Fidelity Wireframe
Next Step

Design is Iterative and interactive process. We  tested this experience on a cohort of our users and learned some important things I found many other challenges to focus on for later, such as:

  • How might we help by creating budgeting

  • How we might help with Insurance deals

Testimonial : LinkedIn 
Screenshot 2021-09-24 at 11.10.23 AM.png

Back To homepage

Next - MeChef Casestudy

bottom of page