UX Designer
Briefing

UX/UI | Nespresso

Role UX/UI | Category Coursework

UX/UI | Nespresso

UX/UI | Nespresso

Redesign Nespresso’s home page and Envivo Lungo’s page following these requirements:

• Mobile First Process
• Responsive Design with 3 brake points
• Atomic Design Principles
• Create a basic Style Guide

First things First

First things First

I am a strong believer that every redesign needs a concrete goal. So before tackling this project, I decided that my goal would be to improve the user experience of buying Envivo Lungo through the redesign of the home page and the Envivo Lungo’s page.

Defining my process

Defining my process

With my goal and requirements in mind, I traced my plan.

First I needed to understand Nespresso, how the brand behaved and what was like to use Nespresso’s website.

Than it was time to understand the user, their needs and pain points.

To sketch a good wireframe, I needed to be sure to find the right balance between the user’s needs and the Nespresso’s goals.

Finally I could tackle the new layout using the atomic design principles and creating a basic style guide.

First Step: Understanding Nespresso

First Step: Understanding Nespresso

Nespresso is a bold brand with class and a touch of humor.

Talking to the Creative Director of Nespresso’s account here in Brazil, I found out that Nespresso wants to have a more approachable perception. Yes, it is a premium product, but anyone can use a Nespresso machine to make a perfect coffee. So anyone should feel able to enter a Nespresso’s store to understand it’s product better.

I wanted to incorporate that feeling in the redesign as well.

 Now that Nespresso’s brand was clear to me, I changed my attention to the current website.  The first feeling I’ve got is that it is more concerned to show everything that it has to offer than to help the user. The good side is that it feels like the brand has always something new and exciting going on.  Then I made two experiences maps of buying Envivo Lungo: buying for the first time and buying for the second time. It was a very positive experience. Easy navigation, keep on buying feeling, you don’t need to leave the coffee page to update or check on your basket. These are things I wanted to keep on the redesign.

Now that Nespresso’s brand was clear to me, I changed my attention to the current website.

The first feeling I’ve got is that it is more concerned to show everything that it has to offer than to help the user. The good side is that it feels like the brand has always something new and exciting going on.

Then I made two experiences maps of buying Envivo Lungo: buying for the first time and buying for the second time. It was a very positive experience. Easy navigation, keep on buying feeling, you don’t need to leave the coffee page to update or check on your basket. These are things I wanted to keep on the redesign.

Second Step: Understanding the User

Second Step: Understanding the User

Talking to the users I found out that no one had any great pain points with the current website. Their major complains were about having to go to the store to recicle their capsules and not being able to buy small amounts of coffee as a business. These problems can’t be solved through this project in particular. So If this was a true project, I would bring these pain points to the clients and pitch new projects to handle them.

That is when I realized this project wasn’t about fixing a major problem. It was about improving an already good experience.

 I draw some personas based on my interviews to help me create ideas on how to improve the user experience. If the current website is not focused on the user, I would change that. I would improve the on boarding and make the users  feel as premium as the product by giving them a custom experience.

I draw some personas based on my interviews to help me create ideas on how to improve the user experience. If the current website is not focused on the user, I would change that. I would improve the on boarding and make the users feel as premium as the product by giving them a custom experience.

Third Step: New Wireframe

Third Step: New Wireframe

Before sketching the new wireframe, I did two things:

• Benchmarking to see how other services are handling customization

• Analysis of user’s needs x Nespresso’s website goal

 Through benchmarking I understood the importance of the text. It has to have a warm feeling, just like a good conversation. So you know they are taking good care of your needs. It is also very important to make clear when a suggestion is based on your taste. You want to feel important and remembered.

Through benchmarking I understood the importance of the text. It has to have a warm feeling, just like a good conversation. So you know they are taking good care of your needs. It is also very important to make clear when a suggestion is based on your taste. You want to feel important and remembered.

 Looking to the current Nespresso’s home page, you get the feeling that impulsive buying is it’s main goal. On reality, it’s main goal is to sell coffee and machines, which matches the user’s main needs.  So I decided to focus on helping the user achieve their goals and at the same time suggesting new items for them to buy.

Looking to the current Nespresso’s home page, you get the feeling that impulsive buying is it’s main goal. On reality, it’s main goal is to sell coffee and machines, which matches the user’s main needs.

So I decided to focus on helping the user achieve their goals and at the same time suggesting new items for them to buy.

 Finally it was time to sketch away. While sketching, I kept three things in mind:  • Simplify on boarding • Impulsive buying as a secondary goal •Give a custom experience to the users

Finally it was time to sketch away. While sketching, I kept three things in mind:

• Simplify on boarding
• Impulsive buying as a secondary goal
•Give a custom experience to the users

Fourth Step: New Layout

Fourth Step: New Layout

The first thing I did was to define the typography and colours of the new layout. Then I designed some basic elements like cards and buttons to see how well they worked together. From there I drew the home page for mobile first. Once I was happy with it, I adapted it for tablet and desktop.

Nespresso_N03-Atomic_Design+Style_Guide_01.jpg
Nespresso_N03-Atomic_Design+Style_Guide_02.jpg
Nespresso_N03-Atomic_Design+Style_Guide_03.jpg
Nespresso_N03-Atomic_Design+Style_Guide_04.jpg
Nespresso_N03-Atomic_Design+Style_Guide_05.jpg
Nespresso_N03-UI_Explicacao_01.jpg
Nespresso_N03-UI_Explicacao_02.jpg
Nespresso_N03-UI_Explicacao_03.jpg
Nespresso_N03-UI_Explicacao_04.jpg
 Home Page Desktop

Home Page Desktop

Nespresso_N03-Home-Desktop_01.jpg
Nespresso_N03-Home-Desktop_02.jpg
Nespresso_N03-Home-Desktop_03.jpg
Nespresso_N03-Home-Desktop_04.jpg
Nespresso_N03-Home-Desktop_05.jpg
Nespresso_N03-Home-Desktop_06.jpg
 Envivo Lungo Page

Envivo Lungo Page

Envivo_Page-Desktop_01.jpg
Envivo_Page-Desktop_02.jpg
Envivo_Page-Desktop_03.jpg
Envivo_Page-Desktop_04.jpg
Envivo_Page-Desktop_05.jpg
Envivo_Page-Desktop_06.jpg
 For the user test, I asked the user to buy Envivo Lungo without using the menu.  When the task was completed, I asked some follow up questions such as “What else did you notice while looking for Envivo Lungo?”, “What was your first reaction seeing this new layout?”, “Had you any trouble reading anything”, between others. I wanted to make sure I understood the whole user experience.  Thanks to the test, I could confirm that new users were able to navigate without any problems and old users didn’t get confused with the new workflow and layout.

For the user test, I asked the user to buy Envivo Lungo without using the menu.

When the task was completed, I asked some follow up questions such as “What else did you notice while looking for Envivo Lungo?”, “What was your first reaction seeing this new layout?”, “Had you any trouble reading anything”, between others. I wanted to make sure I understood the whole user experience.

Thanks to the test, I could confirm that new users were able to navigate without any problems and old users didn’t get confused with the new workflow and layout.

Final Thoughts

Final Thoughts

I loved doing this project. Being able to understand the brand and it’s users and empathizing without sharing their love was a great experience.

My proudest moment was to show this case to the Creative Director of Nespresso’s account here in Brazil and being praised for it.

If you have any questions or feedback, please just contact me :)