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 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.
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
“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.”
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:
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:
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.
“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
“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:
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.
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.
08 . Wireframes
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.
10 . Style Guide
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.
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.