Data-driven web platform.

Project information

My role
Team size
May 2021 - Jul 2021
Lead Designer - UX/UI Designer
3 Developers & 4 Designers

The Challenge

Vitamins and minerals are vital for our health, but it's hard to determine how much and which vitamins and minerals we need. Additionally, people may not be aware of which natural sources contain the nutrients they require in their diet, and too much reliance on supplements can not only be expensive but can also result in a vitamin overdose. From the article “Benefits and Risks of Dietary Supplements” of

“While most dietary supplements are safe as long as you follow the product instructions, large doses of certain nutrients can have adverse effects. You can even overdose on certain supplements, risking serious harm and death.”

People need to know what vitamins and minerals they can obtain from their diets

The Project - VITA

Vita is a data-driven, adaptive web platform, to educate users about vitamins and minerals that are naturally sourced. Through our website, users can browse information about vitamins and minerals that are essential to health. Additionally, the users can find out more about the nutritional values of natural resources, including fruits and vegetables. One of the most impressive features of Vita is the nutrition calculator. The nutritional calculator included in Vita allows users to get a personalized list of fruits and vegetables that they should eat for their diets.  Our project provides the user with the ability to calculate their daily intake and offer them suggestions of what vitamins and minerals they need based on their health status.

My Role in VITA

I was the lead designer for this project. On the UX side, I conducted research on recycling and waste management, collected user data and information which supported our idea and used them to support the development work. For the UI design, I prepared and provided Figma design files and key wireframe components. I designed the overall interface while integrating different aspects of it. It was my role to decide what the content and format of the design information should be. For my team member, I presented my team members with a list of design elements. Additionally, I have created illustrations and icon sets for our project.

UX Section

As a first step in the team's design process, we conduct user experience research to learn more about our users' behaviors, and how the possible solution can benefit them. We conducted surveys and interviews to gather information about what people were experiencing on these issues and what improvements could be made to improve the process. Together with the team, we brainstormed and created our user flow, persona, and wireframes for all the screens based on the information we have.

UX Blueprint



Taylor is a college student with a hectic schedule. To make sure she gets enough minerals, she occasionally takes a mineral supplement, but she's also concerned about its side effects. Her goal is to find a way to get her nutrients without taking supplements. Sometimes, she finds it hard to determine what to eat in order to get enough vitamins and minerals.



User Interface

As an experienced designer, I was primarily responsible for the UI aspects. My responsibility included choosing typography and a color scheme, designing icon sets, and creating UI components. I organized the components into a design library. I also created mockups for the app and promo website, illustrations, and motion graphics. Additionally, I worked on marketing materials, proposals, and presentation slides.

Vita's Logo

The logo of Vita utilizes an orange and green color scheme. The combination of these colors conveys a feeling of nature and freshness. In order to emphasize the freshness and nature of the logo, the letter V is designed to resemble a leaf bud.


I chose Quicksand for typography because it is a sans-serif typeface with rounded terminals that convey friendliness and cleanliness. Quicksand has a wide range of fonts ranging from light to bold that can be used in various elements on the site. Moreover, Quicksand has a high x-height, making it suitable for a wide variety of digital screen sizes.

Color Palette

UI Components


Data visualization

The rainbow color scheme (and the phrase "eat the rainbow") ensures that customers can easily understand the information on the diagram and provides visual appeal to our website. We use two different color schemes to make it easier for the user to differentiate between vitamins and minerals. To maintain consistency, vitamins and minerals will appear repeatedly on the website in their own color.

We use a pie chart to indicate how much vitamin or mineral users should take. When the user clicks on the pie, they will be able to learn more about the vitamins they have selected.


Vita has a custom illustration featuring fruits, vegetables, vitamins, and minerals that are unique to our website and make it stand out from other websites.


Defining the scope of a product is the most important and difficult part. Plan and define what you are going to build first. That is what a Minimum Viable Product (MVP) is all about. In the absence of a clear scope and blueprint, we may very easily go off course and end up building an application that is not what we had originally intended. This is a crucial issue as we might have to develop an app for the wrong users.

Check Out My Other Projects!

Let's create Something
amazing together!!!

If you are interested in my work, do not hesitate to contact me. I will contact you shortly.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.