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

Insight

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


Designs





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

UX

Card Sorting · Design Studio · Wireframes

Design

Design Comps