NutriReality
UI/UX, Design Research, Product Design
Duration
2 Months | Fall 2022
Overview
At NutriReality we use Virtual Reality, Interactive Surfaces and Genetic Testing to provide a personalized exercise and nutrition plan all based on your genetic heritage.
Approach
Our team used Human-centered Design Thinking and Digital Experiential Design to explore a hybrid environment of a physical and digital space.
Team Members
Grace Rai, Diana Garza, Jonah Goode,
Jenna Singeltary
Roles
Grace Rai:
Design Research, Wireframing, Prototyping, UI/UX Design for both the Table and Virtual Reality Screens, VR Video Mockup
Diana Garza:
Design Research, Wireframing, Prototyping, UI/UX Design for the Table
Jonah Goode:
Design Research, Brand Identity, Design for the Nutritionist (Elle), UI/UX Design for "Caffeine Information" screen
Jenna Singletary:
Design Research, Wireframing, UI/UX Design for the Table, Table Video Mockup
Problem Overview
For some people, genes play a significant role in their physical health including appetite, metabolism, food cravings, body fat distribution, and stress tendencies. Some do not know their genes might be at fault, which causes them to lose all motivation to remain physically active and maintain proper nutrition.
Nutrigenomic Testing
Nutrigenomics testing identifies a patient’s genetic protein variations to identify sites of metabolic weakness. It focuses on the relationship between our genes and nutrition.
Nutrigenomics provides ideal ways of achieving weight loss, disease prevention, and athletic performance.
Empathize
Mission
Our mission is to connect with users through interactive technology, help them gain a better understanding of their health through Nutrigenomic testing, and guide them through their personalized physical wellness plan.
Interview
We interviewed three potential users to gather more information about their health and if Nutrigenomic testing would be something they were interested in.
User Personas
Rina George, Educator, 35
Rina has always enjoyed exercising and planning her weekly meals but is frustrated from not seeing physical changes. She also finds herself with an unfulfilled appetite and constant low energy from following an extreme calorie deficit diet. After various workout and diet plans, Rina is still determined to achieve her wellness goals but is not quite sure what to try next.
Luckily, after researching new methods, she stumbled upon NutriReality, a personalized nutrition and exercise plan. Rina is eager to learn how her genes have been affecting her lifestyle and is excited to see new changes.
Empathy Maps
Rina George, Educator, 35
Rina thinks exercising isn’t affecting her since she doesn’t see any changes. She thinks maybe she isn’t looking in the right place.
Rina feels that maybe exercising or dieting isn’t for her. However, she also feels like there might still be some hope.
Rina says “I just feel like maybe I’m not doing the right exercises or diets.” and “I still want to give this a try but don’t know where to look.”
Rina has to look online for more resources as another chance to give fitness and dieting another try.
Define
Research Takeaways
Based on our interviews, wealthy fitness and wellness enthusiasts between the ages of 25-40 are most likely to use our products.
Interviewees told us it was hard to accommodate for multiple allergies and wade through recipe sites for actual healthy recipes that tasted good or fit within their diet.
We decided to focus on the cooking and fitness aspect of these issues and incorporate a way for the user to be able to understand their nutrigenomic testing results in a simpler way.
How Might We...?
How might we display results to users in a digestible way?
How might we create a relationship with the user?
How might we
create an inviting space to help users reach their health goals?
How might we provide a cooking space for users?
How might we guide the user through the cooking process?
We Can...
Create a system that relies more on imagery and iconography so users can visually learn their results.
Create an artificially intelligent health nutritionist that can speak and interact with the user.
We can have our artificially intelligent health nutritionist help recommend activites or meals for the users throughout their health journey.
Implement a digital table that can be interacted with while cooking or to view saved recipes.
Create a follow along video with our health nutritionist that details a step-by-step process on how to prepare and cook the meals.
Ideate
Touchpoints
Artificially intelligent health nutritionist: Elle
A virtual reality program that lets you interact with Elle and ask any questions you have from your results to what you should have for dinner tonight.
An interactive cooking table that allows users to view their saved recipes from the virtual reality program along with cooking alongside it.
Flow Charts
Prototype
Startup Screen
The startup screen that you see when you load up the table.
Saved Recipes
Here, users can access the recipes they saved from the VR application.
Cooking Section
This is where users can begin cooking with the table's assitance.
Key Cooking Table: Low Fidelity Wireframes
Key Virtual Reality: Low Fidelity Paper Prototypes & Wireframes
Home Screen
This is the startup screen when you open the VR application.
Meal Selection
Users can access different meal options specifically catered to them.
Workout Information
Users can see step-by-step instructions for their workout along with a follow along video with Elle.
Final Outcome
How It Works
(Animation by: Jonah Goode)
Virtual Reality
Below are videos to guide you through the user journey process of each section. There will also be our Figma file embedded at the end.
(You can pause each video by clicking on it)
Viewing Your Results
This process includes your nutrigeonomic testing results. You can view more by selecting them and Elle will help explain what your results mean along with suggested alternatives if asked.
Meal Selection
This is where you can view your meals that are catered to you based on your testing results. You can also watch a how-to video performed by Elle or preview the recipe’s instructions. Once you’re ready to get cooking or saving it for later, you can send this recipe to your table.
Workout Selection
Here you can view your workouts that are catered to you based on your testing results. You can also watch a follow along video featuring Elle or you can check out the step-by-step process accompanied with pictures.
Virtual Reality Mockup Video
I created this mockup video using Adobe After Effects and recording myself using my VR Headset.
(Audio by: Jonah Goode)
Cooking Table
Mockup of Digital Cooking Table
Startup and Recipe Selection
This shows the process of selecting the recipes you saved from the VR program and being able to see the meal’s nutrition facts and ingredients.
Begin Cooking and Scale
Once you’ve selected a recipe, you can begin cooking. Step-by-step instructions will appear and a helpful built-in scale can weigh food items instantly.
Concept Video of Cooking Table
We had created this concept video using our figma file and our university’s interactive table in the library.
Reflection
This whole project was definitely new territory for myself and the group. It was our first time creating something that would be used in virtual reality and a digital table. Nutrigenomic testing was also something we discovered recently at the time and therefore we had to do a lot more research to teach ourselves what it could offer. I personally had a lot of enjoyment trying out something that was new and not the usual app or website.
Some problems we faced as a group were definitely figuring out the new touchpoints as virtual reality and digital tables were something new to us. Even figuring out how to mockup these ideas definitely sparked up interesting discussion. I had thought of the idea to create the VR mockup in After Effects as I’ve seen videos of screens being attached to walls in vlogs before. I figured I would be able to alter the z-axis if After Effects could detect what a wall was, and to my surprise it worked! This was a risk I took as we were reaching the project’s deadline but I really wanted our concept to look comprehensive. Plan B was to create a photo mockup with the screens but that wouldn't contextualize our concept enough, so I’m very glad I was able to get Plan A to work. As this was my first time using After Effects, I spent a tremendous amount of time learning just how to traverse the interface along with using the "track camera" feature. Fun fact, this actually sparked my interest in motion graphics which I ended up taking the next semester.
If we had more time, I think I would've wanted to mockup more VR screens in after effects such as the other features, like the follow along videos with Elle or even virtual cooking.