Discovering potential.

Designing a benefits hub for Citi's evolving business and brand direction.

Project | Benefits Hub Design

Client | Citi

Role | UX Lead

Explore & Aspire


People want to see the breadth of all the benefits Citi has to offer.

The Opportunity

Allow consumers to see the entire portfolio of benefits, while also connecting them with the lifestyles they impact.

The Execution

A bold, beautiful imagery-driven grid showcases the whole portfolio of benefits and articles. Playful, yet subtle sliders allow consumers to interact and see the connection between benefits and lifestyle.

Benefit Mapping

Understanding the Customer Journey

Design Studio

Concept 1 Wireframes

Leveraging the trend in large screen sizes, this concept aims to romanticize moments of a customer's life enriched with Citi benefits with large imagery, unique microinteractions and intuitive page interaction models.

Each benefit category invites customers to explore with hotspots placed directly on the hero image.

Layout is based on layered panels, allowing customers to dive deeper or surface up intuitively.

Concept 2 Wireframes

Combining traditional page layouts with interesting page break microinteractions to allow customers to search and discover individual benefits.

Benefit details are right there. Customers have quick access to morcels of Citi benefits before they continue to the dedicated benefit pages.

Searching for benefits is done through natural language patterns. Customers can customize their results with their bank products to find the benefits most relevant to them.

Inspiration & Mood Board


Fire it Up

We designed a game to invite customers to discover their benefits based on our benefit mapping exercise. Each option maps to a benefit category pillar and by applying all the options, we are able to create a curated list of benefits the customer can quickly enroll or engage with.

The Perfect Responsive Grid

By leveraging a grid system, responsive is a piece of cake. We mix together moments of discovery, education and recommendation within our grid.

Key Deliverables


Card Sorting · Design Studio · Wireframes


Design Comps