Priyanka Nawale
UX Designer
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.
Introduction
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.
Empathize
Stakeholder Interviews
User Interviews
Data Analytics
Requirement Extraction
Define
Competitors Analysis
Product Audit
Persona Building
Task Analysis
Customer Journey Map
Design
Brainstorming session
Information Architecture
Business - User Goals
User flow
Sitemap
Feature Matrix
Low Fidelity Prototypes
High Fidelity Prototypes
Style guide
Test
A/B Testing
Usability Testing
QA
Feedback & Updates
Empathize
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
Define
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.
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.
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.
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.
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.
Sitemap
We created Sitemap to understand the hierarchy of application, that shows how pages are prioritised, linked, and labeled.
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.
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.
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
Back To homepage
Next - MeChef Casestudy