Nespresso Homepage

Redesigning Nespresso's primary landing page to balance brand storytelling, sustainability, and product discovery — earning a W3 Gold Award for Best Homepage.

Role
Sr. UX Designer
Team
Sr. Visual Designer, Sr. UX Designer, UX Designer
Client
Nespresso / Astound Commerce
Date
Jul – Aug 2020
🏆 W3 Gold Award: Best Homepage 2021

The Brief

Create a captivating new Nespresso homepage experience that mixes brand voice, sustainability content, product highlights, and seasonal promotional marketing for both new and returning customers.

Research

Before diving into design, the team identified three core problems through research:

  • Returning customers struggled to discover new coffee flavors with confidence.
  • Customers perceived Nespresso negatively when it came to sustainability.
  • New visitors found the existing homepage outdated and uninspiring.

Original Nespresso homepage

The original Nespresso homepage before the redesign.

Sketching & Zone Diagrams

Initial sessions created zone diagrams mapping module flow across the page. Content was organized into three categories: promotional modules, product modules, and brand content modules.

The team developed two distinct experiences — one for logged-out new customers emphasizing brand and product discovery, and another for returning logged-in customers highlighting promotions and coffee discovery.

Zone diagrams

Zone diagrams mapping the module flow across the page.

Wireframing

Higher-fidelity wireframes were developed within the constraints of Nespresso's 'page designer' system, using simple imagery, text, and calls-to-action.

For logged-out users: a new customer signup banner, large product pathways for machines and capsules, coffee discovery modules covering bestsellers and regional origins, and evergreen sustainability modules with bite-sized content.

For logged-in users: capsule discovery modules were repositioned higher in the page hierarchy, with category pathways moved lower.

Logged-out wireframe

Wireframe for logged-out (new) customers.

Logged-in wireframe

Wireframe for logged-in (returning) customers.

Guided Selling Module

An interactive product finder using three dropdown menus helped customers identify their preferred coffee type. Building on successful previous work, this module provided an alternative discovery pathway for users who weren't sure where to start.

Guided selling wireframe

Guided selling module wireframe.

Guided selling states

Interaction states for the guided selling module.

Final Designs

The senior visual designer applied Nespresso's style guide while maintaining the integrity of the wireframes. Technical documentation was prepared for the development handoff. The redesign went on to win the W3 Gold Award for Best Homepage in 2021.

Final logged-out design

Final design for new / logged-out visitors.

Final logged-in design

Final design for returning / logged-in customers.

Guided selling — final

Guided selling module — final visual design.

Guided selling — final detail

Guided selling module — results state.

More projects

Breville: Coffee Solution
← Previous
Breville: Coffee Solution
Bowlero
Next →
Bowlero