top of page

Pocket UX case study: Supplement recommendations app

Hello and welcome to another Pocket UX post. These mini UX/UI app designs are just for fun and to keep my skills sharp! TruVitamin is a concept app which would offer supplement recommendations for easy purchase.

Project info

Duration: 1-2 days +/-

Concept client: TruVitamin

Role: Visual / UI Designer

Mediums: Figma, Procreate

Problem Statement
“When I shop for vitamins online, I want to input information about myself and get a list of recommendations, so I don’t have to spend hours researching what to buy.”


TruVitamin is a concept app which would offer supplement recommendations for easy purchase. Vitamins are essential nutrients for the human body. Each one is part of a team of minerals working together for our health. The most definitive way to find optimal vitamin intake needs, is to have a lab test done for deficiencies. If this is not available, a thorough questionnaire about health goals and lifestyle would be a good place to start for vitamin recommendations.


I started by researching best practices in existing solutions and took note of common design patterns. My research helped me generate an MVP list of requirements. By breaking down the hierarchy, I was able to plan how many screens it might take to help the user arrive at a list of recommendations. Having focused on a single task flow, this became more of a UI exercise.

Task Flow

High-level MVP task flow for providing a recommended list of vitamins generated via questionnaire.

Sketches & Wireframes

Three screens to convey the flow of generating a vitamin plan via questionnaire. The sketches covered designed screens for: 1. Example step from the questionnaire 2. Loading screen 3. Vitamin plan results

Mini UI Kit / Moodboard

I drew my inspiration from oranges and the sea – “vitamin sea”. I wanted to embrace a play between a vivid and pastel blue and orange, where our environment can often have an effect on our mineral intake, or depletion. The logo and icons also have a duo tone standard which lent itself well to the components throughout the UI.


Hi-fi screens

The following screens were built in Figma for iOS language for the initial submission… and awaited feedback for iterations.

Feedback & Iterate

I posted this project online for feedback surrounding the UI and usability. In specific, changing the checkboxes to a button design, and the design of the progress bar.

Results & Lessons Learned

I learned a lot from this pocket-sized exercise and would love to revisit this project in the future sometime. I’d like to explore the set of questions needed to give accurate vitamin recommendations, to review the overall flow of the entire app, and of course to gather feedback, and research how everything is received on the user end. Forever learning.


Disclaimer: The thoughts shared in this blog are solely my own and do not represent the perspectives of my professional relationships or clientele.



bottom of page