Alvaro Carmona
UX | UI | Research
Made with

HERBALIFE
NUTRITION

Website for the top seller of
Herbalife member in Europe

About the project

My customer, Herbalife´s top seller in Europe, contracted me to redesign the complete website. It is an informational and lead generation website to get customers and promote Herbalife products. Also, this website forms part of the APB system and each user has a domain and can personalize the website.

The challenge

Creation a new website that allows the conversion through an improvement of the free nutrition study for the user and allows it to get new customers. The process requires a simplified visual design, and an improvement to the usability and user experience.

The solution

Simplify the process to complete the nutrition study and also, create new functionality for calculating the IMC as an additional tool for lead generation. The UI redesign and the improvement of the user experience also would help the conversion.

My role

  • My rol
  • Product strategy
  • User research & Persona creation
  • Wireframes & Prototyping
  • UX / UI Design
  • Front End Development
  • Testing and optimization

User journey


The main entrances for the leads are Google Adwords and Instagram. I redesigned the user journey with the conversion funnel.

Herbalife Nutrition

Research & Personas

Herbalife Nutrition

Research

I had a customer base with more than 2000 people to ask about the pain points in the current website so it can be improved in the redesign.

I did a survey with the 50 most recently active users in the system through Hotjar. To improve the response rate I proposed to create a promotion with a 20% discount in the next bill if the user completed the survey correctly. I obtained 32 answers.

The questions were focused on knowing which device the user used to enter on the website, if they did the conversión in that device, and what did their experience when they did the nutrition study

64% of the people answered

73%
Did the nutrition study through mobile
11%
Changed the device from mobile to desktop to do the nutrition study
92%
Thought the main problem is that nutrition studies in the current system takes a long time
78%
Opined that they would not divide in steps the nutrition study

Conclusion

The user answers confirmed my hypothesis about the user experience. It was mandatory that I must simplify the process to get users data in one only step and focus the process in a mobile device.

Herbalife Nutrition

Personas

For this Project I used the same user personas that I had used to design the APP, so I didn't need to redefine it.

Design Process

Start of project

I did the first sketches for mobile and desktop platforms. I defined the home page, the nutrition study process, and the product template. I defined the iterations of the user to be able to know which functionalities would work better and I did a user test with 4 people of the company.

Findings

  • The users wants to know how they will receive the nutrition study results
  • The users were confused about the differences between the nutrition study and the IMC calculator.

Solutions

  • I added an explanation when the user ends the process to inform which one will be the next step.
  • I transformed the IMC calculator module in a pop up which would be visible after 8 seconds of beginning the user session

Herbalife Nutrition

Prototyping

I transformed the sketches with the solutions to mid-fidelity prototypes, defining the elements in the user interface, information architecture, interaction, and user flow.

I did a user test with 10 volunteer customers and they tested the prototypes. The recommendations would be key to because they working with the system every day.

Findings

  • The users observed that it would be necessary to add a "waist" field in the form.
  • The users wanted the ability to be able to send the nutrition study results through WhatsApp
  • The users wanted to add fields to ask for social network profiles. Facebook and Instagram.

The solutions

The solution for the first two questions was simple.

The possibility to send the nutrition study results through WhatsApp was a good contribution because a lot of people prefer to communicate through WhatsApp.

About asking for the social network profiles I didn't agree at 100%, because add two fields more on the form could be the conversion rate goes down. Usually, the people don’t remember their user name in the social network, so to fill the fields the user has to go out of the website to find it and in consequence would exist the possibility of distraction when the user would open the social network, and we would lose the lead. Despite my recommendation, it was a mandatory requirement and I had to add it in my designs.

Herbalife Nutrition
Herbalife Nutrition
Herbalife Nutrition

Countermeasures

I proposed to do the labeling of the form with events in Google Tag manager to measure the user's iteration with the form, and to be able to decide with data if the fields of social networks should continue or not.

UI Design

Herbalife Nutrition

It was necessary to do a clean design maintaining a fresh and positive brand image. After simplifying the user interface in the prototyping process and research, the website had to be equipped with a modern design which the user was more familiar with. I used the corporate colours together with a palette of neutral colours that would make the visual design more simple and intuitive for the user. All calls to action were put in the first person so that they would respond to the user's wishes.

Scroll to see the entire design

Scroll to see the entire design

Designing the home page

The "above the fold" on the home page screen should be focusing on the conversion. I simplified as much as the requirements allow me, and I designed this section for always could be seen regardless of the screen size mobile.

Scroll to see the entire design

Scroll to see the entire design

Designing the nutrition study process

I simplified as much as possible the iteration of the form minimizing the number of the questions and fields. I did a new user experience more agile and simple.

Desktop designs

Herbalife Nutrition
Herbalife Nutrition
Herbalife Nutrition
Herbalife Nutrition

Many thanks

For the great marketing team, IT team and all the collaborators who helped me in the research. This project could not have been possible without you.