Nespresso

Project

The Nespresso Native E-comm project sought to redefine the brand's native app experience by initiating a comprehensive design transformation tailored to the evolving needs of its users. This initiative focused on enhancing usability, streamlining visual coherence across iOS and Android platforms, and aligning the apps with the latest technological advancements. The objective was to create an intuitive and engaging user experience while strengthening Nespresso’s brand identity. By addressing modern customer expectations and market trends, the project established a scalable design framework to future-proof the app ecosystem and elevate the digital presence of the brand.

Role

As the Lead Digital Product Designer at Nespresso, I spearheaded a transformative design initiative aimed at redefining the user experience for their native iOS and Android applications. My role encompassed crafting innovative and functional user interface solutions, collaborating closely with cross-functional teams, and directing the overall design strategy. Leveraging over 15 years of expertise in digital product design, I ensured that the project adhered to the highest standards of usability, scalability, and aesthetic appeal, positioning Nespresso’s digital estate for its next evolutionary phase.

Assess the situation of the project

Initially brought on board to redesign a new e-commerce app from scratch, I quickly discovered that an MVP version was already in development. An invitation-only beta release was scheduled just a few months after my start date. The app was not in optimal shape, and I faced numerous challenges that required immediate attention—all without halting the project's progress.

Navigation Issues

The app's complex custom navigation bar hindered user interaction, and inconsistent use of view patterns like push pages and modal views led to user confusion.

User Experience (UX) Problems

Over-engineered patterns confused users, and difficult recovery flows made it hard for them to recover from errors or unintended actions.

User Interface (UI) Flaws

Interactive elements lacked clear affordances, making them hard to identify. Inconsistencies and visual clutter affected content hierarchy and scalability.

Design System Deficiencies

Disorganised design files and an undocumented component library without a management process made modifications cumbersome and created delivery dependencies.

Operational Gaps

There was no dedicated design team or established processes. UX/UI direction was led by non-designers, with no market feedback, undefined goals, and a lack of guiding design principles or a digital UI brand language.

Initial Constraints

Before the beta release, several constraints limited our ability to make significant changes:

Non-Negotiable Timeline

The beta had to be released in three months.

Development Capacity

Dev squads didn’t have the capacity to rework  or create new components without impacting beta release.

Backend Limitations

Backend systems were not owned by our team and were poorly documented.

Design Restrictions

We couldn't alter Nespresso's existing UI foundations, including the colour palette and iconography

Feature Scope

The beta phase scope was defined, but some user journeys needed refinement and others required design

Team Limitations

I was the sole designer working hands-on with three engineering squads.

The Strategy

Given the constraints, I devised a two-phase strategy:

Phase 1 -  Support the Beta Release

In the first phase, I focused on supporting the beta release by simplifying the navigation to enhance the user experience, addressing the most critical UX problems, and designing the mandatory features essential for the beta launch.

Phase 2 - Drive Transformation

In the second phase, I aimed to establish a foundation for transformation by setting new design standards and processes to tackle underlying issues. I began building a design team by recruiting additional designers and a UX researcher, and planned for post-beta improvements, using the beta release as a stepping stone for more significant changes.

Key Focus Areas

Outline the primary objectives and strategic priorities of the project, highlighting the critical areas that require attention to ensure a successful outcome. These focus areas serve as the foundation for aligning efforts and driving impactful results.

Learn More

Deepen the understanding of both the user and the project context to uncover key insights that will guide future decisions.

Fix Basics

Focus on improving navigation and foundational UX elements to create a more intuitive and seamless user experience.

Explore

Experiment with visual styles, interactions, and components to establish a unified and user-friendly UI language.

Design System

Develop a robust design system to ensure visual and functional consistency while streamlining collaboration between design and development teams.

User testing

Engage with users to test prototypes, gather feedback, and validate design decisions to align the product with user needs.

Transform

Implement large-scale improvements that fundamentally enhance the product’s value, usability, and long-term impact.

RESEARCH

We conducted extensive research activities to deeply understand user behaviours and needs. One of these activities was a card sorting session, where users were asked to categorise app items into groups and prioritise them based on interest. This exercise provided valuable insights into how users perceive and organise content, helping us refine the app’s structure and navigation. For example, we discovered that users tend to group coffee, machines, and accessories together, often naming the category "Shop" or "Products." These findings directly informed key design decisions, such as reorganising certain items like recycling points, recipes, and stores into distinct sections to enhance usability.

Defining Core Navigation Patterns

Both Apple’s Human Interface Guidelines and Android’s Material Design offer numerous options for tab systems, toolbars, navigation bars, and viewports, which can easily lead to overwhelming navigation complexities if not managed carefully. To ensure consistency and ease of navigation in our app, I’ve selected core navigation patterns and defined specific view containers. This approach clarifies when and how each container should be used, creating a streamlined and coherent user experience.

exploring

To establish a cohesive design language, we let user needs and our newly defined design principles guide the direction. Through extensive exploration, iteration, and collaboration, we sought to deeply understand user behaviours and preferences. By continuously asking critical questions, engaging in iterative prototyping, and conducting frequent user testing, we honed our approach. This rigorous process allowed us to uncover and define the app's unique interactive "voice"—a voice that resonates with users, fosters engagement, and embodies the essence of the Nespresso brand.
Early interactve exploration

Design system

The Nespresso design system was built to streamline the creation of consistent, high-quality digital experiences across platforms. By consolidating over 30 foundational components and 50 experience components, the system provides a robust framework for scalable design and development. This includes detailed documentation, ensuring every element maintains its functional and aesthetic integrity.This system empowers teams to collaborate efficiently while delivering a cohesive brand identity, ensuring that every touchpoint feels intuitive and aligned with Nespresso's standards of excellence.

Delivery

To ensure efficient and seamless delivery, we adopted "Linear flows" to streamline processes while maintaining full context for all stakeholders. This approach allowed us to assign only the relevant boards to Jira tasks, reducing complexity and improving focus. By incorporating these flows, we ensured clarity in task ownership and provided a comprehensive understanding of the overall system without overloading individual team members.

User testing

To ensure our designs were user-centred and met real-world needs, we conducted extensive user testing sessions with 215 participants across 12 countries. These included Nespresso customers, frequent online shoppers, and prospective buyers. Our testing provided invaluable insights into user preferences, behaviours, and pain points

The Outcome

The project delivered a seamless user experience with a visually consistent design across the app. By simplifying navigation and enhancing usability, the new design prioritised clarity and addressed user needs effectively. A scalable design framework was implemented to support future app enhancements, ensuring the solution remains adaptable and forward-looking. Additionally, the unified visual language reinforced Nespresso's brand identity, creating a cohesive and engaging experience that aligns with modern user expectations and fosters stronger engagement.

Welcome

Home

Shop

Product detail page

Basket

Subscriptions

Account

Key Results

New E-comm app 5th Month - KPI Summary vs. Last Month

+18% Downloads

Positive Growth Trend continues steady.+85K downloads YTD.

+22% CVR

Increase in the last trimester.Conversion rates are steady and on a positive trend.

+25% Transactions

Increase in transactions in the last trimester.3% of the volume of transactions now come from the New App.

-7% Uninstall

Reduced uninstall rate vs. Old App, both platforms combined.