Health App
Health App
Health App
Health App
Vitalize
Vitalize
Vitalize
Vitalize
Case Study I created in a Bootcamp for The National Wellness Institute. I needed to re-imagine how people can adopt and maintain a routine that enhances their well-being. During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint.
Case Study I created in a Bootcamp for The National Wellness Institute. I needed to re-imagine how people can adopt and maintain a routine that enhances their well-being. During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint.
Case Study I created in a Bootcamp for The National Wellness Institute. I needed to re-imagine how people can adopt and maintain a routine that enhances their well-being. During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint.
Case Study I created in a Bootcamp for The National Wellness Institute. I needed to re-imagine how people can adopt and maintain a routine that enhances their well-being. During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint.
Reading time:
3 minutes
Reading time:
3 minutes
Reading time:
3 minutes
Reading time:
3 minutes
Role
UX/UI Designer
Contributions
UX/ UI Design, Branding, Research
Timeline
Feb 2022
Deliverable
Prototype & Presentation
Role
UX/UI Designer
Contributions
UX/ UI Design, Branding, Research
Timeline
Feb 2022
Deliverable
Prototype & Presentation
Role
UX/UI Designer
Contributions
UX/ UI Design, Branding, Research
Timeline
Feb 2022
Deliverable
Prototype & Presentation
Role
UX/UI Designer
Contributions
UX/ UI Design, Branding, Research
Timeline
Feb 2022
Deliverable
Prototype & Presentation
Overview
During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint. The National Wellness Institute is an organization founded in 1977. Its mission is to provide “unparalleled resources and services to wellness and wellness promotion professionals to fuel professional and personal growth.”
Overview
During my time at Ironhack Bookcamp, I was giving this project to work on in a 2-week sprint. The National Wellness Institute is an organization founded in 1977. Its mission is to provide “unparalleled resources and services to wellness and wellness promotion professionals to fuel professional and personal growth.”
Challenge
Help users better understand their vitamin and mineral intake. How can we guide them in choosing the right foods to achieve the necessary vitamins and minerals that their bodies need?
Help users better understand their vitamin and mineral intake. How can we guide them in choosing the right foods to achieve the necessary vitamins and minerals that their bodies need?
Goals
For this project I set two goals that would help me keep track of the main user flows and what designs should look and feel.
The app must track the user’s progress and push them to commit to a healthier lifestyle.
Find a way for users to stay informed throughout the process and understand why they are doing these things and how it will affect their well-being.
For this project I set two goals that would help me keep track of the main user flows and what designs should look and feel.
The app must track the user’s progress and push them to commit to a healthier lifestyle.
Find a way for users to stay informed throughout the process and understand why they are doing these things and how it will affect their well-being.
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Figure 1: User Research Slides (to better see them, click on the links provided in 'Design Process'
Design Process
Since there was no existing app or design to start from, I began from scratch. The subject was broad, allowing me to choose any direction. I decided to focus on wellness, specifically vitamin and mineral intake.
Empathize: To better understand the subject, I started by interviewing experts and conducting secondary research online. With these insights, I conducted surveys and user interviews to learn about my audience and their needs.
Next, I researched my competitors by downloading their apps, checking their websites, and reading reviews. I created a comparative chart to understand each competitor's position and a Venn diagram highlighting three main features crucial for a product like this. This helped me visualize the overlapping characteristics between Vitalize and its competitors.
Define: Based on my research, I created affinity maps, empathy maps, and user journeys to identify user pain points and needs. This led to the creation of a user persona. With the persona in mind, I formulated my problem and hypothesis statements:
Problem Statement: Young adults struggle to understand how to consume the vitamins and minerals their bodies need. They need an easy way to find out which foods contain the right vitamins and how to incorporate these into their diet.
Hypothesis Statement: I believe that providing an app that coaches and informs users on how to consume enough vitamins and minerals through food and supplements will help them understand what their bodies need to feel healthy and happier overall.
Ideate & Test: The second week of the design process was divided into ideation and testing. During the ideation stage, I created sketches and wireframes in Figma. These wireframes helped test the user flow and establish a better hierarchy of elements.
Creating the wireframes led to a new round of testing. While testing, I focused on the app's look and feel, creating a mood board to organize ideas better. After testing the wireframes and establishing the color system and elements for the app, I began creating the high-fidelity prototype.
Since there was no existing app or design to start from, I began from scratch. The subject was broad, allowing me to choose any direction. I decided to focus on wellness, specifically vitamin and mineral intake.
Empathize: To better understand the subject, I started by interviewing experts and conducting secondary research online. With these insights, I conducted surveys and user interviews to learn about my audience and their needs.
Next, I researched my competitors by downloading their apps, checking their websites, and reading reviews. I created a comparative chart to understand each competitor's position and a Venn diagram highlighting three main features crucial for a product like this. This helped me visualize the overlapping characteristics between Vitalize and its competitors.
Define: Based on my research, I created affinity maps, empathy maps, and user journeys to identify user pain points and needs. This led to the creation of a user persona. With the persona in mind, I formulated my problem and hypothesis statements:
Problem Statement: Young adults struggle to understand how to consume the vitamins and minerals their bodies need. They need an easy way to find out which foods contain the right vitamins and how to incorporate these into their diet.
Hypothesis Statement: I believe that providing an app that coaches and informs users on how to consume enough vitamins and minerals through food and supplements will help them understand what their bodies need to feel healthy and happier overall.
Ideate & Test: The second week of the design process was divided into ideation and testing. During the ideation stage, I created sketches and wireframes in Figma. These wireframes helped test the user flow and establish a better hierarchy of elements.
Creating the wireframes led to a new round of testing. While testing, I focused on the app's look and feel, creating a mood board to organize ideas better. After testing the wireframes and establishing the color system and elements for the app, I began creating the high-fidelity prototype.
Figure 4: Desirability Test Results
Figure 4: Desirability Test Results
Figure 4: Desirability Test Results
Figure 4: Desirability Test Results
Design Goals
When it came time to set design goals, I aimed to create the best possible user flow based on the feedback received during the testing period. The goals were as follows:
Efficiency: Reduce the time needed for users to complete simple tasks.
Simplicity & Learnability: Ensure the user interface is easy to learn, making the app feel instantly intuitive without requiring a learning period.
Look & Feel: During the research, I discovered that some users had tried similar apps but stopped using them because they were either difficult to use or visually unappealing. My goal was to design an app with a consistent and attractive design, ensuring users don't have to guess the functionality of different elements.
When it came time to set design goals, I aimed to create the best possible user flow based on the feedback received during the testing period. The goals were as follows:
Efficiency: Reduce the time needed for users to complete simple tasks.
Simplicity & Learnability: Ensure the user interface is easy to learn, making the app feel instantly intuitive without requiring a learning period.
Look & Feel: During the research, I discovered that some users had tried similar apps but stopped using them because they were either difficult to use or visually unappealing. My goal was to design an app with a consistent and attractive design, ensuring users don't have to guess the functionality of different elements.
Design Tools
Figma: where all our designs lived, prototypes, mockups and presentation
FigJam: helped us built sitemaps, brainstorm, create user journey maps, etc.
Notion: is where we could add all the information collected while doing user research and keep the research done by the company previously.
Google Forms: we could create different forms here, to understand user preference to a bigger scale.
Figma: where all our designs lived, prototypes, mockups and presentation
FigJam: helped us built sitemaps, brainstorm, create user journey maps, etc.
Notion: is where we could add all the information collected while doing user research and keep the research done by the company previously.
Google Forms: we could create different forms here, to understand user preference to a bigger scale.
Figure 5: Main Screen, Search Screen, Add Screen, Micronutrients Detail View
Figure 5: Main Screen, Search Screen, Add Screen, Micronutrients Detail View
Figure 5: Main Screen, Search Screen, Add Screen, Micronutrients Detail View
Figure 5: Main Screen, Search Screen, Add Screen, Micronutrients Detail View
Learnings
This project taught me several valuable lessons during the research process:
Challenge Assumptions: It's easy to believe we understand what users want, but testing often reveals that our initial assumptions may not be accurate for every user group.
Attention to Detail: Focusing on details, such as incorporating animations and using a specific type of language to connect more personally with users, made the project stand out and garnered positive feedback from various individuals.
Design Solutions
Micronutrients: 85% of the users don’t know enough about what vitamins and minerals they need to take. For this, I created a section where the user can directly see the micronutrients they’re lacking in their diet and why.
Meal suggestions: Over 60% of the users said they were very interested in their diet. I created two sections to tackle: Meal suggestions based on the micronutrients they need and a Diary entry.
Micronutrients: 85% of the users don’t know enough about what vitamins and minerals they need to take. For this, I created a section where the user can directly see the micronutrients they’re lacking in their diet and why.
Meal suggestions: Over 60% of the users said they were very interested in their diet. I created two sections to tackle: Meal suggestions based on the micronutrients they need and a Diary entry.
Conclusion
It’s essential for a product this young to have many rounds of testing to discover any problems pre-development and to establish product-market fit.
I would generate more user flows, work with other designers, Product Managers and developers to have a steady flow of new ideas, and prepare the product to develop.
It’s essential for a product this young to have many rounds of testing to discover any problems pre-development and to establish product-market fit.
I would generate more user flows, work with other designers, Product Managers and developers to have a steady flow of new ideas, and prepare the product to develop.
Figure 8: Vitalize main screens
Figure 8: Vitalize main screens
See Other Projects
Barbara is now available for hire
Have a cool idea?
Let's make something cool together
Barbara is now available for hire
Have a cool idea?
Let's make something cool together
Barbara is now available for hire