POS Header 1.jpg

Program Redesign

COMPANY

Bank of America

ROLE

Project Lead

Lead Designer

SUMMARY

I lead the design and expansion of a current Bank of America program into a new experience that unifies the space and introduces new functionality. I guided the team through research, strategy, user testing, design and delivery.

Some information and details have been changed or omitted for confidentiality.

Project Overview

PROBLEM STATEMENT

The existing program design was unable to accommodate the increasing complexity and volume of offerings and failed to build relationships with key customer segments.  Bank of America wanted the experience to be redesigned into a scalable platform that not only held robust functionality and usability but served users across the market and drove engagement and brand loyalty.

GOALS

1

Unify several of the portfolio programs into one platform

3

Accommodate a large increase in offer volume and complexity

2

Expand targeting to key clients across broad customer segments

4

Drive engagement and build customer relationships

Macbook.jpg
Mobile Old.png
Stakeholder Interviews.png

Stakeholder Interviews

FOCUS

We talked to 20 stakeholders to better understand the goals, vision, metrics of success, technical constraints or program limitations, and created a definitive model for the design and strategy.  This also gave us an opportunity to build relationships with our business partners, clearly listen to and understand how the project could be a win to each stakeholder, and encourage active participation with the design process.

METHOD

Structured 1:1 interviews

Moderation guide

Observation & templatized note taking

Clustering & synthesis

Stakeholder Grouping.png

Interview synthesis

Defining + Understanding Users

CUSTOMER SEGMENTATION

The target users were a broad spectrum supported by the content and offer types that would be available.  To understand behaviors across users we conducted market research and collected existing internal research across the target segments.

USER FEEDBACK

Leveraging the existing customer base, we utilized prototypes and surveys to gather usability data and pull out pain points and program opportunities.

Customer Research.png
Customer Feedback.png

Internal research, customer segmentation, KPIs and customer feedback synthesis

Experience Evaluations

CURRENT PLATFORM

We wanted to see how customers were using the existing platform in order to understand their behaviors, expectations and experiences today.  We mapped the current mobile and web flows, created prototypes, tested usability through core tasks, and collected qualitative data through unmoderated interviews.  We also looked at insights from the website, AI chatbot and call centers to look for trends in what customers were looking for or failing to find.

COMPETITOR + COMPARATIVE EXPERIENCES

We looked at similar offerings from other financial institutions as well as best-in-class loyalty and rewards programs and eCommerce experiences that were setting and shaping users' expectations.  Across these experiences, we gathered existing public customer feedback and design inspiration – from big picture overall strategy to creative treatments and specific functionality.

Existing mobile + web experiences

Current Experience.png
web.png

Research Synthesis

KEY FEATURES + REQUIREMENTS

Combining the goals of the business, user feedback, pain points discovered in the existing experience, expected functionality in industry standards, and opportunities uncovered in competing products, we formulated the programs' key features and functionality with which to begin ideation and sketching.

Synthesis.png
Prioritization Matrix.png

Rose bud thorn, clustering and prioritization matrix

Design Sprints

TEAM

I was the project lead and lead designer over a team of three other designers, an analyst, content strategist and collaborated with research consultants and members of the line of business whom participated in ideation, design and user testing in two week sprints.

COLLABORATION

We held open working sessions to sketch, present, discuss, share inspiration and ideate on concepts.  After presenting, the group would highlight features to move forward for user feedback and consideration, collect those treatments, and combine them into contrasting concepts for testing.

Freehand sketching session (Cycle #2)

Design Sessions.png

Features for testing

Gradient.png

Resulting dashboard concepts for testing

Wireframe 1.png
DA 1.png
DB 1.png

Wireframing

PROCESS

Early stages of low fidelity design were explored in wireframing along with rapid prototyping for testing.  Eventually full flows were tested and documented as wires.

FEATURES

We iterated on and tested different information architecture, flows, functionality and content for value and usability.  Some features included a landing page, save or favoriting functions, robust search and filter, categorization, offer details, education, activation flows, logic for offer presentment, browsing preferences and overall user behavior and response to the proposed platform.

Wireframe 9.png
Wireframe 2.png
Wireframe 7.png
Wireframe 10.png
Wireframe 3.png
Wireframe 5.png
Wireframe 8.png

User Testing

PROCESS

The team ran qualitative and quantitative testing and synthesis after each round of design in collaboration with research consultants from the XD Lab team.  We tested and validated our designs and flows over a total of seven cycles through unmoderated usability tests via UserZoom with screeners for different customer segments.  After running the tests, we reviewed the recordings as a group to take notes, synthesize and then determined key takeaways from each round to shape design moving forward.

METHOD

Success rates

Time on task

Click paths & tests

SEQ rating

SUS score

KANO

Testimony

Card sort

DETAILS

Wireframe prototypes

High fidelity prototypes

Test cycle approx. every 2 weeks

7 rounds of testing

2 card sorts

120+ participants

User Testing Full.png

User testing overview + synthesis

One dashboard concept from user testing (Cycle #2)

DA 1.png
DA 2.png
DA 3.png
DA 4.png

T1: First impressions

Imagine you just opened your Bank of America app to view BankAmeriDeals.  Explore this screen and explain what you see.

 

Remember to speak aloud and be detailed.  Describe the screen as if you are explaining it to someone.

T2: Info at top (expected)

Note the highlighted space at the top of the screen in yellow.  What information would you expect to see here? Be sure to think aloud.

T3: Info at top (choice)

What information would you prefer to be displayed here?

Post-Task Question: In a few sentences or less, please tell us why you chose your option order.

T4: Info at top (rank)

Rank in order of importance:

1: Total Yearly Savings

2: Savings to Date

3: Cash Back Summary

4: Total Monthly Savings

5: Featured Offers

6: Tips & Tutorials

7. Not sure.

8. Other: __________

T5: Browsing for deals

You’re going shopping this weekend and want to check for available offers.  Imagine you opened the app to this screen.  Where would you select first?

 

Post-Task Question: In a few sentences or less, please tell us why you clicked where you did.

DA 5.png
DA 6.png
DA 7.png
DA 8.png
DA 9.png

T6: Favorites section

Note the section highlighted in yellow.  What is it and what is it for?  How would you interact with it if it was in your app?  Be sure to think aloud.

T7: Recommended section

Note the section highlighted in yellow.  What is it and what is it for?  How would you interact with it, if it was in your app?  Be sure to think aloud.

T8: Tap empty heart

Note the item(s) highlighted in yellow.  What would you expect to happen if you tapped on this?  Be sure to think aloud.

T9: Tap plus icon

Note the item(s) highlighted in yellow.  What would you expect to happen if you tapped on this?  Be sure to think aloud.

T10: Tap filter (rank)

Note the item(s) highlighted in yellow.  What would you expect to happen if you tapped on this?  Be sure to think aloud.

Post-Task Question: Imagine you have the ability to filter out deals according to category.  What options would be helpful for you to browse by and why?

Design

PROCESS

Following the same design sprint + user testing cadence and structure as wireframing, the team continued to collaborate with partners on business and tech teams, and guest participants from other XD portfolios in regular working sessions.  We brought in inspiration, continued to present, ideate, user test and move through requirements and screens as designs became more polished and final.

DESIGN SYSTEM + BRANDING

We worked with the Bank of America's DSM to design within the established patterns and identify new needs and scalable components in the project that could contribute.  The team also collaborated with marketing and the branding agency working on the new program's look & feel across non-digital channels.

Old dashboard

Old 3.png
Old Web.png

CHALLENGES

We worked to find a visual balance between the business metrics that favored showing as many offers to a user as possible and users' ability to process and ultimately meaningfully engage with offers.

Old offer details

Old 5.png
Old Offer Details.png

REDESIGN

1

Elevated look and feel with more inspirational imagery

5

Offer hierarchy to prioritize targeted categories and marketing campaigns

2

Improved readability and comprehension to offer lists and layout 

6

Scalable template for 9 offer types, reducing complexity and learning curve for different offers

3

Robust search and customizable category filtering

7

Logic behind offer presentment or ordering based off user insights

4

Saved offers section for faster recall on POS offers

8

Ability to hide specific merchants and set alerts for favorites

New scalable offer template

Template.png

New dashboard

Offer 4.png
Starbucks Web.png

New offer details

New Dashboard.png
Web New.png

New saved offers page

New 2.png
Web New 2.png

New transactions page

New 1.png
Web New 1.png
BofA Image.jpg

Takeaways

RESULTS

The project received $20M in funding and is in pilot release.

NEXT STEPS

Continue exploration into North Star designs, testing, enhancements, collect data from original user feedback sources for benchmarking, additional enhancements...

LEARNINGS

Relationship building and early engagement with partners is not only key for design alignment and strategy but for business buy-in and empathy for the user, especially when working with subject matter experts.

NEXT TIME

At the core of this project the bank wanted to build better relationships and product engagement.  It would be great to take a step back even broader than this project to examine all of the offerings and avenues to truly achieve that.  We were also limited and unable to explore other concepts such as plugins which could have removed some of the friction with offer redemption and one of the biggest hurdles of so many offer types.

LIFE PLAN

Bank of America