Introduction

The HNconnect® Mobile App, developed by Herbalife® and the GTS Design Team, serves as a crucial digital tool for B2B business practices. We recently launched Version 2.0, featuring a modern aesthetic designed to enhance usability and engagement. As the Lead UX Designer, I collaborated with another designer to revamp the app, implementing significant UI enhancements such as a new navigation architecture, updated iconography, and refreshed color schemes. We also improved the onboarding process for easier navigation and added extensive content libraries to support our sales teams and distributors.

This app is essential for distributors and business partners, streamlining operations through features like contact management, sales tracking, and volume metric reviews. The latest version introduces Insights and Recommended Actions, powered by Salesforce Artificial Intelligence, delivering real-time business opportunities and actionable recommendations tailored to user needs.

Company: Herbalife® International Inc.

Problem Statement

Within two years of launching the original HNconnect application, our analytics team noted a decline in traffic and engagement rates. This trend prompted a thorough review of usability and discoverability issues. Analysis revealed that both new and existing users faced significant challenges in navigating the app’s core features. Acknowledging the need to enhance user experience and drive engagement, we set out to develop a strategic design solution.

To tackle these usability issues, we began by exploring potential design enhancements. This included conducting comparative analyses with leading business mobile applications to gather insights and identify best practices. By benchmarking against industry standards, we aimed to pinpoint areas for improvement in the app’s information architecture and top-level navigation. Through this iterative research and analysis process, we sought to create a strategic design approach that would optimize user experience and revitalize engagement with the HNconnect application.

Role

Lead UX/UI Designer

In this role, I focused on developing interactive prototypes, micro animations, and new design components while enhancing our design system libraries. Collaborating closely with a team member on UX Lean features, we undertook the redesign of the HNconnect® mobile app, implementing UI enhancements and backend data integration to align with business requirements and integrate new AI features.

Business Objectives

• User-Friendly Onboarding Feature: Develop and implement an intuitive onboarding feature that guides users through new updates, enhancing their initial experience with the app.

• Revamped Information Architecture and Navigation: Design a new information architecture and navigation system grounded in an updated content hierarchy, ensuring users can easily access essential features and information.

• Modernized Design Elements: Refresh the app’s design to reflect new brand guidelines, incorporating updated color schemes, typography, and iconography for a cohesive and contemporary look.

• AI-Driven Feature Integration: Introduce two new AI-driven features powered by Salesforce:

  • Insights and Recommendations: Provide users with personalized insights and actionable recommendations to optimize their business strategies.

  • Volume Metrics Dashboard: Implement a comprehensive dashboard that allows users to track their sales volume metrics, giving them valuable visibility into their performance.

  By achieving these objectives, we aim to enhance user experience, improve navigation efficiency, and empower distributors with actionable insights that drive their business success.
  

Challenges

• Legacy System Management: The presence of multiple legacy systems with limited functionalities made integration efforts challenging and hindered the overall user experience.

• Collaboration with External Teams: Working with an external architecture team specializing in machine learning posed difficulties due to their restricted access to legacy systems, complicating alignment and communication.

• AI Integration: Developing advanced algorithms for context-specific recommendations required processing large volumes of data seamlessly, adding complexity to the integration of AI features.

• User Interface Considerations: Balancing advanced insights with a user-friendly interface was crucial to enhance functionality without overwhelming users, ensuring an intuitive experience.
  

Results

The redesign of the HNconnect® Mobile App has significantly transformed the user experience, addressing the challenges faced during development and achieving key objectives:

Streamlined Navigation: The introduction of a new navigation architecture has simplified user interactions, enabling distributors to quickly and efficiently find the information and features they need.

Improved Information Hierarchy: We established a clearer content hierarchy, ensuring that critical information is easily accessible. This enhancement improves user comprehension and supports faster decision-making.

Empowered by AI-Driven Features: The integration of advanced AI capabilities has provided users with personalized insights and recommendations tailored to their business performance and historical data. This functionality empowers distributors to identify opportunities and make informed decisions that foster growth.

Comprehensive Sales Dashboard: The newly designed sales dashboard offers a complete overview of performance metrics, allowing users to track their sales activities and volume metrics in one place. This consolidation improves operational efficiency and visibility.

Increased User Engagement: These enhancements have resulted in higher user satisfaction and engagement, as distributors can navigate the app seamlessly and access valuable insights that help optimize their business strategies. Overall, the redesign effectively addresses user needs while overcoming initial challenges, paving the way for greater business success.

Duration

The project spanned over six full springs.

Team

UX/UI Designers - Fernando Tellez, Raf Gonzalez
UX Research - Sergi Bosch
Sr. Manager - Jonathan Zargarian
Product Owner - Philip Porter
Director - Ken Oelerich
Functional & Dev Manager - Shiva Kamalakkannan
AI + ML Managers - Claudia Maria, Michael Barnes