Mercola Health Coach Chat
Project overview
Company
Mercola Health

Product Owner
Mercola Consulting

Date
2025
My Role

UX Design Lead
UX Strategist
Art Director

Design Tools
FigmaFigma
Axure RPMiro
Adobe PhotoshopChatGPT
UX Deliverables

Information Architecture
Low fidelity Interactive Prototype/Wireframe
High Fidelity Mockup Design

Context

Mercola Health is a private multi-million-dollar natural health product company. Founded over three decades ago by Dr. Mercola, a physician and multiple New York Times best-selling author. The health coach app is part of the company’s strategy to share the wealth of knowledge in his new book, “Your Guide to Cellular Health”.

About Mercola Health
10 Million +
Website hits monthly

2 Million
Facebook followers

3x NY Times
Best Selling Author
Mercola Health Coach Chat

Design Challenge

Create a fun and engaging nutritional health coach app that educates and encourages healthy dietary habits. Leverage NLP models and Agentic AI to allow voice and text interaction with the health coach.

  • Quick ramp up time, started delivering UX artifacts within 1 week
  • Collaborated with Product team, ML Engineers, Sales & Marketing and Project Managers as well as external vendors
  • Working in an AI-powered environment with tools and models such as OpenAI o3, Microsoft Copilot, Grok and n8n, created a fast moving cycle with quick turnaround
User Research

I scheduled several meetings with the Marketing and eCommerce platform teams, which led to a better understanding of customer needs and pain points. Combining this with my secondary research efforts led to the creation of these personas.

Mercola Health Persona
Mercola Health Persona
Mercola Health Persona

Ideation

Due to time constraints and the dynamic nature of this project, we had to make several pivots and implement quick design changes. This required rapid prototyping, quick deployment and frequent testing. Figma’s collaborative and AI-powered features, along with tools like auto-layout, components and color styles made my workflow more efficient.

User flows

After several meetings and discussions with the product team, I got a clear picture of the critical user flows. Figma’s Autoflow plugin made it easier to design and make quick changes to the user flows.

Log Food Item User Flow

Log Food Item User Flow

Information Architecture

One of the most critical and challenging aspects of this project was to prioritize the mobile app features. We had to decide which features were essential for the initial launch and which ones to delay until later versions. Working with the Product team and other SMEs on the business side, we defined the “Most Viable Product” (MVP) features.

  • Voice and Text Natural Language Understanding (NLU)
  • Seed Oil Analysis
  • Linoleic Acid Report

Below is a detailed map of the complete mobile app.

Conversational AI Design

What type of Conversational AI works best for a Health Coach Chatbot? Which voice is appropriate? What personality type will drive engagement and build trust? These are some of the questions we grappled with in this project. We decided to use a Retrieval Augmented Generation (RAG) based model. This allowed us to connect Dr. Mercola’s body of work (Books, Blogs, Social Media posts etc.) to an LLM. As a result, the Health Coach responded with advice and suggestions aligned with the Mercola holistic health philosophy.

Design Solution

I collaborated closely with the Product Team, ML Engineers, and Senior Management throughout the project. Through multiple iterations, I helped evolve the Health Coach App as we integrated new AI-enhanced features. I embraced creative exploration to develop innovative solutions that would enhance user engagement. I recognized Pax, our health coach character, as a crucial element of the user experience and took the lead in developing his friendly, supportive personality. This personality framework directly shaped how Pax communicates with users, establishing a consistent and empathetic conversation style that builds trust and motivates users toward their health goals.

Navigation Design Evolution

Throughout the project, I facilitated brainstorming sessions with the Product and AI/ML teams, resulting in several UX design iterations. One key feature of the health coach is the footer navigation. This menu helps users find what they need as quickly as possible.

  1. Big plus button with unlabeled menu icons
  2. Big plus button with labeled menu icons
  3. Big microphone button with labeled menu icons
  4. Plus and microphone buttons with text field prompt

Vibe Coding and UX Design

My coding background as a Front-End Developer enabled me to work closely with ML Engineers and Software Developers. Tools like Microsoft Copilot, n8n and AI models such as ChatGPT o3, accelerated the backend and front-end coding process. Vibe coding tends to excel at creating generic-looking solutions. However, this project involved specific and detailed information architecture, business logic and user flows. With this level of complexity, the vibe coding result needed refinement and redesign. The Linoleic Acid report is a good example of the UI design changes that I made.

Pax Dialog: UI Design Evolution

I approached the chat interface design by first analyzing three critical components: business objectives, NLU and AI model behaviors, and established conversation design principles. For the voice interaction design, I created strategies to manage user input ambiguity effectively. I also conducted extensive prompt testing to ensure optimal performance. Throughout the design process, I presented multiple UI/UX solutions to stakeholders, facilitating collaborative decision-making that led to our final chat interface design.

Health Coach Avatar Emotional Expressions

The chat feature includes an animated avatar with contextual facial expressions, making the user experience more natural and friendly. I worked closely with the AI/ML team to map dialog sentiments to appropriate facial expressions.

High Fidelity UI Design