Herbalife: Brand & Commerce

Elevating the user experience of a renowned fitness tracker app through a strategic.

Role

Senior Product Designer

Industry

Health & Fitness

Duration

12 months

Context

The project involved developing an e-commerce and a brand site for Herbalife. The e-commerce was designed to provide a seamless shopping experience with features such as intuitive navigation, personalized recommendations, secure checkout, and integrated customer support. The brand site aimed to enhance the company’s online presence by offering comprehensive information about its mission, values, and product offerings.

Users

👩🏽‍💻 Customers:

The users that wants to buy Herbalife’s products through the internet or explore more about the brand and the products’s content.

👨🏻‍💼 Distributors:

The Herbalife’s distributors that wants an easy digital platform to sell their products and prospect other clients to become distributors.

Discovery phase

As an initial step, we employed a range of research frameworks to gain a comprehensive understanding of the application's context and its users. The research efforts included:

- Jobs to be Done/Interviews

- UX Audit

- Journey Mapping

- Persona Development

Comparative Tools Research

We employed a comprehensive research framework consisting of Best Practices Research, Benchmarking, Parallel Studies, Feature Analysis, and an in-depth exploration of Global Shopper Trends and User Preferences.

Prioritization

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Prioritization

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Custom Design System

To create our design system that could expresses the brand and could be scalable ate the same time we follow these following design system principals:

Everything’s a component or style
Auto layout everything, all the way down
Make components resizable
Make component variants for functionality, design, and breakpoints.
Library Organization

Detail Design

To deliver the final designs screen we followed 3 main steps:

  1. Create sitemaps and user flows to ensure logical navigation.

2. Develop low-fidelity wireframes to outline basic screen layouts.

3. Enhance wireframes with colors, typography, and imagery for high-fidelity, branded designs

Hand-Off

For the hand-off, we create a custom structure with detailed annotations of UX behavior, UI guidelines, and animation specs for each component and page.

High-fidelity Screens

In this section I will walk through the high-fidelity screens that I personally worked with and/or led the team on the design process.

Product Detail Page

On the PDP, users can access all the information they need about the product and easily customize it. The UI was made to help the user to see in one viewport the most important stats at the same time, such as: Title, images, flavors, sizes, price and the “add to bag” CTA.

Product Detail Page - Bundles

On the bundles detail page, the user can quickly see all the products within the bundle and navigate them through the grid view and focus view.

With a dynamic interactions the user will always know which product they are editing.

Product Listing Page

The user can interact with the herbalife’s catolog through the product cards. With them is possible to compare the flavors, prices and sizes.

Product Listing Page - Bundles

The user can interact with the herbalife’s catolog through the product cards. With them is possible to compare the flavors, prices and sizes.

DS Homepage

On the DS homepage the customers can easily see who their distributors is, how to contact them and all the special content that they selected through the market and content modules displayed on the homepage.

Big Achievments

Here's a quick video showcasing the team's achievements on this project.

Herbalife: Brand & Commerce

Herbalife: Brand & Commerce

Elevating the user experience of a renowned fitness tracker app through a strategic.

Context

Context

Users

👩🏽‍💻 Customers:

The users that wants to buy Herbalife’s products through the internet or explore more about the brand and the products’s content.

👨🏻‍💼 Distributors:

The Herbalife’s distributors that wants an easy digital platform to sell their products and prospect other clients to become distributors.

Discovery phase

Discovery phase

As an initial step, we employed a range of research frameworks to gain a comprehensive understanding of the application's context and its users. The research efforts included:

As an initial step, we employed a range of research frameworks to gain a comprehensive understanding of the application's context and its users. The research efforts included:

- Jobs to be Done/Interviews

- Jobs to be Done/Interviews

- UX Audit

- UX Audit

- Journey Mapping

- Journey Mapping

- Persona Development

- Persona Development

Comparative Tools Research

Comparative Tools Research

We employed a comprehensive research framework consisting of Best Practices Research, Benchmarking, Parallel Studies, Feature Analysis, and an in-depth exploration of Global Shopper Trends and User Preferences.

We employed a comprehensive research framework consisting of Best Practices Research, Benchmarking, Parallel Studies, Feature Analysis, and an in-depth exploration of Global Shopper Trends and User Preferences.

Prioritization

Prioritization

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Prioritization

Extensive research enabled us to uncover over 120 'Jobs to Be Done' (JTBD) across five distinct personas.

Through prioritization exercises and feature brainstorming sessions, our design team identified and prioritized a tailored set of features for each persona.

Custom Design System

Custom Design System

To create our design system that could expresses the brand and could be scalable ate the same time we follow these following design system principals:

Everything’s a component or style

Auto layout everything, all the way down

Make components resizable

Make component variants for functionality, design, and breakpoints.

Library Organization

Detail Design

Detail Design

To deliver the final designs screen we followed 3 main steps: 1. Create sitemaps and user flows to ensure logical navigation.2. Develop low-fidelity wireframes to outline basic screen layouts.3. Enhance wireframes with colors, typography, and imagery for high-fidelity, branded designs

To deliver the final designs screen we followed 3 main steps: 1. Create sitemaps and user flows to ensure logical navigation.2. Develop low-fidelity wireframes to outline basic screen layouts.3. Enhance wireframes with colors, typography, and imagery for high-fidelity, branded designs

Hand-Off

Hand-Off

For the hand-off, we create a custom structure with detailed annotations of UX behavior, UI guidelines, and animation specs for each component and page.

High-fidelity Screens

In this section I will walk through the high-fidelity screens that I personally worked with and/or led the team on the design process.

Product Detail Page

On the PDP, users can access all the information they need about the product and easily customize it. The UI was made to help the user to see in one viewport the most important stats at the same time, such as: Title, images, flavors, sizes, price and the “add to bag” CTA.

Product Detail Page - Bundles

On the bundles detail page, the user can quickly see all the products within the bundle and navigate them through the grid view and focus view. With a dynamic interactions the user will always know which product they are editing.

Product Listing Page

The user can interact with the herbalife’s catolog through the product cards. With them is possible to compare the flavors, prices and sizes.

Product Listing Page - Bundles

The user can interact with the herbalife’s catolog through the product cards. With them is possible to compare the flavors, prices and sizes.

DS Homepage

On the DS homepage the customers can easily see who their distributors is, how to contact them and all the special content that they selected through the market and content modules displayed on the homepage.

Big Achievments

Big Achievments

Here's a quick video showcasing the team's achievements on this project.

To deliver the final designs screen we followed 3 main steps:

  1. Create sitemaps and user flows to ensure logical navigation.

2. Develop low-fidelity wireframes to outline basic screen layouts.

3. Enhance wireframes with colors, typography, and imagery for high-fidelity, branded designs

To deliver the final designs screen we followed 3 main steps:

  1. Create sitemaps and user flows to ensure logical navigation.

2. Develop low-fidelity wireframes to outline basic screen layouts.

3. Enhance wireframes with colors, typography, and imagery for high-fidelity, branded designs

On the bundles detail page, the user can quickly see all the products within the bundle and navigate them through the grid view and focus view.

With a dynamic interactions the user will always know which product they are editing.