CITI Mobile enhancements


 

DESIGN CHALLENGE

In an effort to increase customer satisfaction, expand and deepen customer relationships and decrease expensive customer service interactions, Citi decided to enhance its mobile app experience across its mobile platforms.

These enhancements build on a fixed IA foundation to proactively surface contextually relevant information and actions to customers.

Results

  • Added meaningful functionality for every Citi customer who engages with the app (approx. 10 million users) for all three client segments (Blue, Priority, Gold), all relationship types (Card Only, Bank Only and MRC) and power/light users.

  • Easier access to features, leading to a faster experience for customers.

  • Dynamic in-line messages within accounts.

  • Relevant and actionable content based on context.

  • Scalable dynamic content framework for future experiences.

My Roles

UX Architecture
UI Exploration
User Testing
Wireframing
Prototyping
Design QA

 

1 Research.png
 

Project KickOff

First steps included multiple workshops with stakeholders, where requirements were defined based on business needs and customer experience strategy. At this point the team decided on specific features that could be translated into a dynamic experience, while at the same time starting to define content priority across the app

 
 
 

SKETCHing

I began design exploration with rough sketches, imagining components, behaviors, interactions, visuals and content priority.

 
 
4 2Concepts.png
 

TWO DESIGN Directions

As a starting point, the team decided to explore two different ways of providing dynamic content. A tree concept with contextual bottom navigation and a tile concept, where information would be presented within dynamic tiles.

For testing we created prototypes for specific use case scenarios to understand advantages/disadvantages between the two concepts. These case scenarios were determined after thorough research and understanding of customers needs.

User testing determined that the tile concept was better received, as customers felt that a changing bottom navigation was disconcerting. However, some customers believed that there was something interesting about the idea of menus that appear based on relevance.

 
 
5 Workflows.png
 

use case scenarios

With these findings, I proceeded to develop detailed use case scenarios for the wining tile concept, based on Product’s requirements for a second round of usability testing.

In the image above you can see some of the wireframes used to create prototypes for testing. During testing we asked the participants to accomplish common tasks like: making a transfer due to a low balance, requesting a credit line increase, making a payment for a past due payment and updating their personal address.

 
 
6 Visual Exploration.png
 

User Interface Design exploration & EVOLUTION

Applying findings from user testing and knowing that the preferred direction was the tile concept, I started exploring different visual treatments. We then validated the UI through a third round of testing in different US markets until we landed on a final direction.

 
 
TileExamples001.jpeg
 

Dynamic Tile Examples

We then worked closely with multiple Product owners across the organization to design relevant tiles for existing journeys, always making sure business needs were met, while still being useful and relevant to customers.

 
 
 

final designs

After several iterations the final designs were shared with a team of developers with whom I worked closely during implementation. We created and implemented a QA design process to make sure that designs were developed as delivered.

 
 
 
The new interface is awesome and very user friendly. I can get all information on the same screen. Thank you.
— Michael
 
 
Great Update! The new app is really cool. There’s some easy to find buttons at the bottom that let me lock my card or deposit a check. The new look is also very cool.
— Mary
 
 
I like Citi Bank App, it’s full of features and provides peace of mind since it is customizable for alerts as well and due dates.
— Bob
 
 

RESULTS

A few days after a throttled release, customers started commenting on the ease of use and new features.

 
 
 

DESIGN PLAYBOOK For dynamic content framework

An important part of these enhancements was to also create documentation that could be followed by other design, product and tech teams who would be interested in implementing new dynamic content in their journeys. For this I created a Design Playbook which I presented to different teams across the organization to talk about the new experience, enhanced features, guidelines and design process going forward.