VITAON - Supplement Recommendation

As one of first design hires, I built VitaOn's brand and web platform end-to-end, delivering personalized supplement recommendations that simplify health data for users

getvitaon.com

Team

Me, Lead UI/UX Designer, Founder (Full-Stack Developer)

Role

UI/UX Designer

Tools

Figma, FigJam, Claude Sonnet 4

Context

User Challenge

Health-conscious adults want personalized supplement guidance, but generic recommendations and overwhelming product options make it hard to know what actually fits their body and lifestyle.

Software developers who are considering to use Elavon's APIs in their products and/or services

Goal

Build an app for personalized supplement recommendations and data visualization for nutrient management, tailored to users' health conditions and lifestyle habits.

What I did

  • Developed visual identity and design library for a new brand

  • Designed high-fidelity web UI ready for development

  • Iterated UI screens and UX flows based on user feedback

Outcomes

Shipped MVP in

5 Months

covering landing, personalization quiz, tracking, and results

Iterated on

8 User Feedbacks

and internal audit, leading to clearer information hierarchy on user flows

Built a

Scalable

brand system, component library, and UI components

Process

  1. Planning & Brand Development

  1. MVP Launch & Feedbacks

  1. Feature Addition & Logo Change

  1. Planning & Brand Development

Defined user requirements, created brand identity and style guides, then rapidly iterated high-fidelity UI designs for development handoff.

Defined user requirements, created brand identity and style guides, then rapidly iterated high-fidelity UI designs for development handoff.

  1. MVP Launch & Feedbacks

Shipped MVP with essential user flow screens—landing page, personalization quiz, and results.

Shipped MVP with essential user flow screens—landing page, personalization quiz, and results.

After the launch, we gathered feedbacks from 8 users and also performed an internal audit

After the launch, we gathered feedbacks from 8 users and also performed an internal audit

  1. Feature Addition & Logo Change

Iterated based on user feedbacks after MVP launch and added AI chat functionality for user support

Used Claude Sonnet 4 to rapidly explore wireframe variations for the AI chat feature. Made design decisions on conversation flow, message hierarchy, and user input patterns, then applied VitaOn's brand system for the final UI.

Used Claude Sonnet 4 to rapidly explore wireframe variations for the AI chat feature. Made design decisions on conversation flow, message hierarchy, and user input patterns, then applied VitaOn's brand system for the final UI.

Refined brand identity with the logo update and finalized style guidelines.

Refined brand identity with the logo update and finalized style guidelines.

Refined brand identity with the logo update and finalized style guidelines.

Final Design

Launched the official web app in August 2025 with design updates, enhanced user experience, and complete brand system integration.

Launched the official web app in August 2025 with design updates, enhanced user experience, and complete brand system integration.