Herbalife: Site Builder

Herbalife: Site Builder

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

Role

Senior Product Designer

Senior Product Designer

Industry

Health & Fitness

Health & Fitness

Duration

9 months

9 months

Context

Context

Site Builder is a cutting-edge application designed for distributors to create, customize, and manage their own e-commerce websites effortlessly. Our platform offers a comprehensive suite of tools to help distributors showcase and market their products, promotions, and recommended carts to customers with ease.

Users

👩🏽‍💻 Prospects:

The users on the Herbalife network that are interest in becoming distributors and wants a digital platform business

👨🏻‍💼 Distributors:

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

Herbalife Commerce site Analysis

Herbalife Commerce site Analysis

We analyzed the e-commerce site to understand which features were needed to have a creation tool on the site builder app.

We analyzed the e-commerce site to understand which features were needed to have a creation tool on the site builder app.

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.

Customize Fluent Design System

Customize Fluent Design System

For this project, we employed the Fluent Design system. Before creating high-fidelity screens, our first step was to customize the design system according to Herbalife’s brand guidelines and develop additional components necessary for the project.

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.

Dashboard

On the dashboard, Distributors can access all the information they need and easily customize their e-commerce platform. They can manage and market their promotions, recommended carts, coupons, and bundles.

Bundles creation

In the bundles creation section, Distributors can create customized bundles and preview in real-time how they will appear on their site.

Featured Products

Featured products is one of the features that the Distributors can customized an important component on their site, choosing which products they want to highlight.

My Homepage/Onboarding

Using the site builder, Distributors can effortlessly edit all aspects of their e-commerce homepage, such as the name, social media links, special messages, and banners.

Big Achievments

Big Achievments

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