Nutridiario - UI & UX

MY ROLE

Creative Direction
UX Research
UI/UX Design
Prototyping

CREDIT

Felicia Yip
UX Design & Research

THE BRIEF

Understanding the challenges in measuring and maintaining ones’ nutritional health in space during interplanetary travel.

OUR APPROACH

Nutrition plays a major role in maintaining one’s health in a space flight environment especially being in zero-gravity for long period of time can led to effects on a human’s body and their health. We approached this problem from two perspective:
1. Measuring nutrition in space
2. Maintaining nutritional health through space food.

Initial research methods

Due to the current pandemic of COVID – 19 research methods that could be done remotely and were effective in collecting rich data were picked. Competitors analysis was picked as a research method due to its flexible approach to determine gaps in the current market by comparing certain competitors through various variables. Similarly, online ethnography was picked due to strength of collecting rich data about your target audience which delivers insights that wouldn’t be possible to gain through just other methods, as well as there being a vast community of people interested in nutrition and discussion happening in all platform this method felt to be appropriate. Online questionnaire was picked due to its fast and effective ability to gather huge amount of rich data in a short period of time as well as being an online research method. Furthermore, affinity diagramming was picked as it provides a simple and cost-effective approach at processing huge amount of rich data collected from questionnaire and online ethnography. Extreme character allowed us to look beyond the needs of conventional characters/personas, to access the larger spectrum of human needs and practices.

Affinity diagram
Affinity diagram PDF

This method allowed us to identify specific problems and make observations regarding people’s knowledge of nutrition and different methods used for measuring nutrition levels. Through the affinity diagramming process, we were able to come up with two themes.

Issues with measuring nutrition

It was made up of sub themes unreliable data, inconvenience in measuring nutrition and inaccurate data. The subtheme unreliable experience speak to users experience of receiving different nutritional information for the same food and recipes, as well as the apps providing a ball park figure for the nutritional level even when logging in the food by measuring every ingredient exemplified by the quote “I’ve encountered so many errors (the herb thyme was listed as having something like 60 calories a tablespoon;…. multiple entries for the same vegetable with vastly different calorie counts, etc.) that I now check almost every entry against a more reliable source. It’s frustrating and time consuming and a huge drawback” the inconvenience in measuring nutrition speaks to the users experience of having to manually log their food into the database as it already doesn’t exist as well as not being able to log homemade meals without having to measure every ingredient.

Opportunities for innovation

It was made up of sub themes potential features, relation with mental health, desire for measuring nutrition. The subtheme potential features expresses the participants demands and wants that would improve nutrition measurement methods, whereas relation with mental health describes the users view of how measuring nutrition can have a positive impact on an individuals mental health this is demonstrated by the quote “Exercising and eating healthy is a challenge for many, so positive reinforcement can help those people keep good habits. We found 59% of users agree that fitness and nutrition sites help them feel good about themselves”. Furthermore, the subtopic desire to measure nutrition illustrates the desire and steps taken by participants to measure their nutrition with more people being nutrition conscious every day. And lastly the topic ease of measuring nutrition shows the current bar code scanning process of measurement which make the process more efficient but there are issues surrounding this theme like the barcode not being registered on the database.

Gaps and opportunities

After the site map was created which was organized and prioritized based on key user behaviors. Then the site was designed on figma.

Insight 1

Measuring and tracking nutrition became time consuming and repetitive

Insight 2

Data discrepancy of the nutritional value of food among digital food diary applications

Insight 3

Flavorful food decreases the likelihood of taste fatigue occurring

Insight 4

Sense of smell and taste are dampened due to zero-gravity.

Initial concepts

We started brainstorming ideas to address one of our main two insights identified. Displayed below are some concepts that fulfil these insights.

Nutriwatch

A watch with a blood analysis sensor that measures the nutritional content of the users blood in real time, providing real time data and recommendations based on the different nutritional levels.

Food catcher app

AR visualization of different foods, which are captured by throwing the ADD ball, which displays the nutrition information for the food.

Smart fridge

Smart fridge placed on the spaceship on each travelers pod, the fridge uses facial recognition to create logs for each member of the family and displays recommended food and tracks eating habits.

Self - ordering food kiosk

User’s use the biometric scanner, fingerprint/hand id to scan their hand, that provides their current health levels from the database which is displayed on the screen, as well as recommended food from the menu.

Food diary app

This app gamifies the process of scanning and tracking food intake where more the user scans their meal items the more xp/points they earn in order to level up to more menu items to chose from.

Food scanner glasses

Glasses with a built in food scanner (tellspecs) that is used to scan the food before you eat them.

decision matrix

After a feedback session with the tutor some of the initial ideas were eliminated and some concept were refined like the food scanner was changed from glasses to a wearable device. Then a decision matrix was conducted to narrow down our remaining four concepts into two concepts. The Harris Profile was used due to it, being visually oriented and the easy identification of the strengths and weaknesses of each concept. Our own set of criteria was created to addresses all four concepts in order to draw out the strengths and weaknesses of each concept.

final concepts

From the results of the decision matrix, we further developed both of these concepts to positively meet the criteria (Encourages new behavioral changes) they both lacked in.

For the watch concept, we developed it further by adding a feature that allows the blood analysis sensor scan automatically at certain intervals set by the user.
The food scanner wearable, we added a share function which enables the user to share their food log for the day or just the nutritional value of the scanned food.
With both concepts further developed, we started rough sketching the screens for user testing

Nutrinow watch screens
Nutridiario screens
Some Nutrinow watch paper prototype screens
Some Nutrdiario paper prototype screens
user testing 1

User testing was conducted in person with users testing out our concepts through the use of low-fidelity paper prototypes as this allowed us to focus on the interaction design and information architecture. The think-aloud method was utilized to capture our users’ thought process and actions when testing our concepts as generates direct data on the ongoing thought processes during task performance.
After the feedback from user testing the prototypes were refined and turned into wireframes on figma.

learnings

Users preferred icons rather than text for some of the call to actions like share and next.
The call to action wasn’t clear on the home screen for both concepts – confusing the users.

wireframes - Nutridiario
wireframes -nutrinow
Wireframes PDF
user journey map - Nutridiario
wireframes -nutrinow
Journey maps (PDF)
user testing 2 - usability testing

The initial usability testing was conducted to determine the best fit design solution for our problem space. This was done in the form of Heuristics evaluation with 3 participants.

learnings

Based on the feedback received from the heuristics and comparing the severity ratio for both our concept we determined “Nutridiario” to be the best design solution for our problem.

“ The done button should be more faded to prevent people from pressing it.”

“There aren’t many error messages on the system, which can be a problem because users might assume there is no problems happening.”

View heuristics results
nutridiario design concept

Our design concept focuses on individuals maintaining their nutritional health in a space environment through tracking and recording the food that they will eat or have eaten. Using wearable technology, this concept features a flexible display and a near-infrared sensor which functions as a food scanner. The NIR sensor draws inspiration from Tell spec’s Enterprise Sensor and the technology behind it. The sensor is located at the back of the wrist where a gesture-based interaction has to be conducted when scanning food, providing users with a more meaningful and novel action. For, these two main components working together provides an interactive and engaging experience for individuals when tracking and maintaining their nutritional health. Therefore, motivating users to continuously utilize the device in order to minimize the detrimental effects of poor nutritional health.

clickable prototype

After adjustments were made to paper prototypes, wireframes mid and high-fidelity prototypes were created and click ability features were added to it using figma. The prototypes showed some vulnerabilities in the UI structure with some interactions as well as with users asking smart questions which resulted in changes to the prototype.

visual design

After few iterations to the mood board the visual elements were finalized to create the style guide. Which was used to build the 1st iteration of High - fidelity prototype.

View style guide
user testing 3 - usability testing

The second round of usability testing was done through the use of think aloud, semi structured interviews and SUS test. Where users were given certain task to complete and asked to think aloud their steps. After the think aloud was conducted, a semi structured interview was performed with the same users where they were asked to elaborate on certain step’s they found confusing. This was followed by a SUS test.

learnings

Based on the feedback received from the user testing methods some new features were added and some current features were simplified. Some feedback was left for future design changes as incorporating them on current iteration would require a drastic change to the design interface.

“I was confused by the screen where I already clicked breakfast and done, and it showed a similar thing on the next screen. “

“I think the sharing feature is very useful as well as the auto share feature but having some way to only auto share to a certain close friend might be helpful as i wouldn’t want to share everything i eat with everyone.”

View SUS test results
second itteration screens

The gesture screen was turned into an overlay when the start scan button was pressed.

By keeping the focus on aesthetic and minimal design the screen was limited just to the title and progress bar as well as the scanning process taking less than a secon also played a factor on this decision.

Based on the feedback different colors were introduced to highlight important information.

Icons introduced within the classification button.

Home and back button moved to the top. Turned into a fixed navigation.

Select all button was added to meet the final heuristics.

user testing 4 - usability testing

The final round usability testing was done using heuristics evaluation with 3 participants using the 2nd iteration.

learnings

The final heuristics pointed out some of the features and UI elements that had been ignored. like providing additional flexibility to the users with options like skipping certain steps and selecting multiple items at once. These elements were addressed in the final iteration. Whiles some of the features were not addressed due to time and resource constraints.

“back buttons were present not sure how to remove certain foods from the log.”

“The gesture animation might not be needed after the user has done it multiple times. Selecting everyone you want to share with might get tedious every time they want to share. So a need to have share to all button.”

“Sometimes I felt like I wanted to more than just look at food nutrition and sharing it. Is there anything else I could do like share exercise activities with nutrition details from other people.”

View final heuristics results
final itteration screens

“Don’t show this again.” button was added to provide users with the option to skip this step next time they scan their food. This change was made to meet the heuristic's - flexibility and efficiency of use.

Swiping to the left allows user to delete items from food log. This feature was added to meet final heuristics of user freedom.

Pressing and holding allows user to select multiple items at once.

When deleting one or multiple item users are asked to confirm their decision. To prevent unintentional removal of items from the log.

live prototype

Visit the link below to interact with the live figma prototype.

Interact now
Fueled by 🤍 & passion.