01 . Nespresso Redesign

iPad UI

01 . About this Project

This is the second Case Study exercise I do for the Aela’s Master Interface Design course. The challenge this time was to redesign the Nespresso website taking into consideration some specific demands.

Firstly, I was asked to take a mobile-first approach and create a responsive website (mobile and desktop) with focus on the home page and on one product page. Secondly, I should go through all the research and necessary steps for the completion of such project. Finally, I was required to build the elements of my project using the Atomic Design modular approach and create a style guide based on that.


Toolkit: Adobe XD, Axure, Adobe InDesign, Whiteboard, Markers, Notepad, Post-its

02 . Primary Research

I started my research focusing on finding out what could be the business needs, and for this I did an extensive research on all of their communication channels such as social media accounts and websites. Following, I moved to figure out the users needs by interviewing some of the users and asking them to complete tasks on the current Nespresso website like buying a specific product, proceed to the shopping cart, etc.

02 . 01 . Business Needs



quote

“Nespresso is not just a coffee. It is a sensorial experience. It is a lifestyle that is simple yet refined, offering timeless elegance. Nespresso is also a global community of coffee lovers sharing their desire for the perfect cup of coffee. Our brand has made a lasting mark in the minds of coffee enthusiasts worldwide. Every interaction we have with our consumers is focused on allowing them to immerse themselves in the brand experience.”



nestle-nespresso.com

The quotation above is from a statement of the brand values at the nestle-nespresso.com website. Nespresso’s innovative business model has a great focus on immersive and sensorial characteristics of the coffee experience. Researching this website more in depth, I was also able to find out that the brand deeply values its relationship with their customes on a very personal and long-lasting way, having a range of channels for communication such as The Nespresso Club (a membership club with benefits for its members), events, and physical boutiques spread all accross the world.



Following my immersion on the nestle-nespresso.com, I embarked on a journey on other communication channels the brand has available to validate the information I’ve gathered so far. I started by having a content analysis on their social media accounts, and, in fact, all their communication throughout their social media is very consistent and demonstrates the values stated on the website, with big emphasis on special moments, personal relationships, and respect for nature and local cultures. Below, some examples taken from their Instagram, Youtube, Facebook, and Twitter:


iPad UI

02 . 02 . Users Needs

Paralel to my business needs research, I was also engaging on finding out the biggest needs and pain points of the users while using the Nespresso website. For this task, I decided to conduct interviews with users and asked some of them to perform specific interactions on the website and report back to me. I also did a research on the Nespresso subreddit (r/nespresso) to see if I was able to get some insights through some users comments.

On the Nespresso subreddit, the great majority of the posts are of people sharing photos of special moments they are having with their favourite Nespresso flavours, unique recipes they’ve created themselves, and asking for recommendations of capsules and machines. Looking at the patterns presented by the posts, it was clear to me that the brand emphasis on special moments and personal relationships is something present in the real world and not only part of a marketing campaign.

The interviews and usability tests I conducted with some of the users were mainly focused on getting more individual and particular insights about the use of the Nespresso website. Here are some of the findings:



insights

The biggest part of the interviewees said they used the website to buy Nespresso capsules.



A minority mentioned that they’ve used the website to buy a Nespresso machine (most of them prefer to buy it at a boutique or a department store).



None of them mentioned ever buying accessories or other kinds of products from the website.



Some of the users mentioned a lack of objectivity to get to the specific products they were looking for.



Some of the users found the home page confusing with its great amount of different products and information fighting for attention.



quote

“All the promotional campaigns for new products make the home page very confusing and distractive. It would be nice to have a more direct way to get to the products I’m looking for. Maybe some feature where I could just type the product’s name.”



Quote by one of the interviewed users

quote

“The home page syndrome is a condition whereby the home screen of an application or website becomes a catchall for everything, creating a garage sale of links, buttons, and banner ads that unravels the fabric of usability, causing designers to cry themselves to sleep.”



Tom Greever (Articulating Design Decisions Book)

03 . Problem Statement

Both through my research on the Nespresso communication channels and access to its brand core values, together with the conducted interviews and user tests, I managed to identify two particular problems to orient my redesign process, here they are:



goals

01. The Nespresso website is not fully aligned with fundamental brand and business values. Instead of providing an immersive experience with focus on special moments, personal relationships, local cultures, and sustainability; the home page is all about showing as many products and offers as possible, creating a stimulus overload and promoting an overall idea of mindless and impulsive consumption. My approach for a redesign should go back to the brand core values and implement them on the overall communication of the website while maintaining an elegant design and a great shopping experience.


iPad UI

Screenshots of current Nespresso website

02. The home page lacks objectivity by mixing too many options for the user with product offers and images of promotional caimpaigns. As a result, users feel confused and have difficulties on finding their desired sections and products. Since most users (according to my research) use the website to buy capsules or machines, that should be the priority on the main section followed by the other sections such as recipes, recycling, etc. A clear, objective, and simple approach should be the priority.

04 . Site Analisys

To be able to have an overview of all of the sections of the website, I created the map below and with its help I was able to recognize some duplicate and unnecessary sections and to start thinking of some modifications related to the information architecture.

Site Analisys

05 . Personas

With the information and data gathered during my interviews stage, I managed to create the following personas:

Site Analisys Site Analisys Site Analisys

06 . Customer Journey


Customer Journey Site Analisys

07 . Initial Studies

My ideation process can be seen by clicking on the button below:


Site Analisys Site Analisys

08 . Wireframes

Site Analisys

09 . Atomic Design

As suggested by the exercise orientation, the website should be built having in mind the modular approach Atomic Design coined by Brad Frost.

Site Analisys

10 . Style Guide

Site Analisys

11 . Prototype


Below, it is possible to access both mobile and desktop interactive prototypes:


Site Analisys

Site Analisys

12 . UI Components

Through this categorization, I want to emphasize some logical decisions that were oriented by my research findings and how they translate into an overall UX and UI project.

Site Analisys

01 . Home Link
Practical and conventional way for users to return to the home page.

02 . Language Menu
Some of the users I’ve interviewed were foreigners living in Prague. When these users opened the webstie, it by default tracked the access location and swithched the website for its Czech version, in Czech language. The current Nespresso website has the language menu on the bottom of the page, making it almost invisible. For this particular reason, I decided to move this menu to the upper part of the website.

03 . Search Bar
When I asked users to perform some tasks on the current Nespresso website, the majority of them started looking for a search feature that could make it possible for them to just type the name of the product they were looking for. Adding a search was my idea to make the website more practical for users looking to perform specific tasks on the website.

04 / 05 . Login and Shopping Cart
Both kept on the header for users quick access.

07 . Promotional Header
Since I opted to clear the home page from all the many different promotional campaigns, I left a promotional header in a highlighted position on the home page in order to promote new products or special offers.

08 / 09 . Buy Capsules and Buy Machines
The findings of my research made me realize that almost all of the users end up using the website to buy either coffee capsules or machines. For this particular reason, it was important to have both of these actions on the main section of the website, and above the fold.

11 . Main Section’s Image
With the objective of aligning the website general communication with core brand values and purposes, and to be able to create a more emotional connection and immersive experience for the user, I decided to place an image bringing the idea of special and personal moments associated with the consumption of Nespresso products.

12 . Secondary Section’s Image
Same reason explained on the above item, the idea was to bring important brand values to the majority of the sections of the home page to potentialize the communications of such values. The secondary sections can be updated by necessity and bring also special offers or new products campaigns.

16 . What's New Section
Since most of the promotional campaigns were removed from the home page, besides leaving the promotional header, I also created a new section where the promotions and new products can be found.

13 . Conclusion

The current Nespresso website home page is almost entirely focused on showing a great variety of products, sales, and promotional offers. Despite being an e-commerce website, according to my research, this approach showed itself to be confusing and exaggerated for the brand consumers. Instead, I decided to approach my redesign from a perspective that should be able to guide the user to the products they were looking for while at the same time offering a product-browsing style of navigation. The biggest challenge, as I see in this particular project, was to find the right balance between an e-commerce website and a pleasant and immersive experience.

To achieve this goal, it was immensely valuable to get in touch with the brand core values and use it as an important point of reference on the overall website tone of voice, visual design, and design decisions.




Site Analisys

Contact

contato@aand.me

Social