I arrived at Citibank to find our website which was our largest touchpoint seriously underperforming on both client expectations and business outcomes. The site had ballooned to over 60,000 pages that were in 7 different design languages with little to no ADA compliance. Few people in the company thought about our web site the right way as it was the biggest front door for our customers with over double the monthly visit as all of our U.S. branches combined.
I set out to design a new site that would focus on simplicity, sales, service, and quality while improving the user experience AND reducing the cost of acquisition and servicing. The new user experience would be mobile-centric with a consistent look and feel, a frictionless user experience, dynamic and relevant content, and a unique brand voice all done in a way that would improve site speed and performance.
RESEARCH AND TESTING
Everything starts with research and testing
We tapped into a variety of internal and external resources and research to inform our direction for the new design language. We did primary customer research, heuristic app analysis, customer reviews, customer analytics, and much more to inform our design principles and roadmap. Once we started to build the language we then tested all the elements, and organisms to assemble pages so we could test the individual parts as well as test them as a system.
SITE CONCEPT
A website that knows, values, and protects every customer.
The vision for the redesign of Citi.com was to start by modernizing the design system and visual language to make it more modern, global, adaptable, accessible, and consistent. We then wanted to combine that design with a far more dynamic approach to rendering the site that would allow it to be more flexible and adaptable for the many types of customers and lines of business the site needed to serve.
Created with my kind of math.
The re-design completely rethought how we engaged with customers by combining multiple customer states, 6 different buckets of content, and a modular design system. This approach made the site much more nimble in its messaging with faster testing, refinement, and optimization. It also allowed us to focus on the quality of the content on the pages, which came from dozens of different divisions and sources.
CUSTOMER LENSES
4 customer states define the consumer lifecycle.
We evolved the site which previously just would categorize a customer as logged in or logged out to recognize 4 different customer states. These new states allow us to identify and convert at a much higher frequency across first-time visitors, returning shoppers who have not converted, newly acquired customers who need to be onboarded, and established customers who we need to deepen our relationship with.
FIRST TIMER
Make the right first impression.
RETURNING SHOPPER
Make the sale.
NEW ACQUIRED
Drive product engagement.
ESTABLISHED CUSTOMER
Deepen the relationship.
DYNAMIC CONTENT
6 content categories to tell a unique story.
Content for Citi.com was created from dozens of different sources with dozen of different goals and measurement techniques. This made the site into a mess of content, design, and more that was impossible to measure and optimize. We did a complete content inventory of the entire site to group and categorize the content into 6 categories. That way, each division of the firm could optimize its content for each bucket, which resulted in no more overlapping content, higher conversion rates, and a better customer experience.
PRODUCTS & SERVICES
Make the right first impression.
ADVICE AND LIFESTYLE
Make the sale.
SHOPPING
Drive product engagement.
CAMPAIGN
Make the right first impression.
BRAND
Make the sale.
CUSTOMER FUNCTIONALITY
Drive product engagement.
DIGITAL DESIGN LANGUAGE AND MODULAR CONTENT
A dynamic design system that fits any content
Finally, we needed a modular design system for the site that would allow for a high degree of flexibility without a huge amount of tech debt or a need for constant rework. We started with the content inventory, grouped the content into its different types, and then created 30 modules that could house them. We then refined those down to 10 modules by refining the design and the content so one module could present multiple types of content in different categories. This way, a single module could show 3 options for credit cards, or 3 different videos, or 3 different ways you could redeem your Citipoints.
SHARE THIS PAGE