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, Software Developer

Role

UI/UX Designer

Tools

Figma, FigJam, Claude Sonnet 4

Context

User Challenge

Users struggle to navigate overwhelming health information and supplement options.

Users struggle to navigate overwhelming health information and supplement options.

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.

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

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

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.
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.
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
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

For this new feature, I brainstormed wireframes with Claude Sonnet 4, revised, and skinned them with the VitaOn's brand style.

For this new feature, I brainstormed wireframes with Claude Sonnet 4, revised, and skinned them with the VitaOn's brand style.
For this new feature, I brainstormed wireframes with Claude Sonnet 4, revised, and skinned them with the VitaOn's brand style.

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.
Launched the official web app in August 2025 with design updates, enhanced user experience, and complete brand system integration.

Outcomes

  • 5-month MVP delivery from concept to launch

  • Scaled product features and accessibility across multiple devices

  • Created design foundation supporting rapid development and future growth