CITI Mobile enhancements
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.
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.
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
I began design exploration with rough sketches, imagining components, behaviors, interactions, visuals and content priority.
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.
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.
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.
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.
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.
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.