DESIGN CHALLENGE

To increase customer satisfaction, expand and deepen customer relationships, and decrease expensive customer service interactions, Citi decided to enhance its mobile app experience across 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

PROJECT KICKOFF

To begin, the team held multiple workshops with stakeholders to define requirements based on business needs and customer experience strategy. We then decided on specific features that could be translated into a dynamic experience, while also beginning to define content priority across the app.

IDEATION

I began design exploration with rough sketches of components, behaviors, interactions, visuals, and content priorities.

DESIGN DIRECTIONS

To begin, the team explored two ways to provide dynamic content: a tree concept with contextual bottom navigation and a tile concept with dynamic tiles.

I created prototypes for specific use cases to test the advantages and disadvantages of each concept. These use cases were determined based on thorough research and understanding of customer needs.

User testing showed that the tile concept was better received because customers found a changing bottom navigation to be disconcerting. However, some customers liked the idea of menus that appear based on relevance.

USE CASE SCENARIOS

Based on these findings and Product's requirements for a second round of usability testing, I developed detailed use case scenarios for the winning tile concept. The image above shows some of the wireframes used to create prototypes for testing. During testing, we asked participants to complete common tasks, such as:

• Making a transfer due to a low balance

• Requesting a credit line increase

• Making a payment for a past due payment

• Updating their personal address

USER INTERFACE DESIGN EXPLORATION AND EVOLUTION

After applying findings from user testing and confirming that the tile concept was the preferred direction, I explored different visual treatments. We then validated the UI through a third round of testing in different US markets to land on a final direction.

DYNAMIC TILE EXAMPLES

We then worked closely with multiple product owners across the organization to design relevant tiles for existing journeys, always ensuring that business needs were met while keeping the tiles useful and relevant to customers.

FINAL DESIGNS

After several iterations, I shared the final designs with a team of developers, and we worked closely together during implementation. To ensure that the designs were developed as delivered, we created and implemented a QA design process.

RESULTS

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

One year later, Citibank ranked the highest among 17 major U.S banks for customer satisfaction with retail banking advice through digital channels, according to a new study from J.D. Power.

DESIGN PLAYBOOK FOR DYNAMIC CONTENT FRAMEWORK

An important part of these enhancements was also to create documentation that other design, product, and tech teams could follow when implementing new dynamic content in their journeys. To do this, I created a Design Playbook, which I presented to different teams across the organization to discuss the new experience, enhanced features, guidelines, and design process moving forward.