Changing the way you buy your food products
Ironhack project-5: Designing a wellness app for ios mobile
The briefing
The Wellness Institute is very excited to explore how they can leverage technology to help people live healthier lives. While brainstorming what the new tools should do, the board realized that when it comes to translating the concept of wellness into a digital product.
This is why they have set up a competition for the upcoming conference. Designers will do user research to find out what type of tools people need, develop a prototype, pitch their ideas, and the winning concepts will be presented at the conference and developed into the first set of digital tools that NWI will offer.
The challenge
Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.
We will be required to conduct user research to understand people’s relationship with mental, physical, and emotional well-being in order to develop a tool that will drive them to action.
The National Wellness Institute wants designers to reimagine how people can adopt and maintain a routine that enhances their well-being.
Project requirements
- Device: Android or ios app
- Scope: As this is an MVP for a competition, the app should not try to solve all of the wellness issues people have at the same time. Each design should focus on one aspect of wellness that the designer considers important (backed up by user research).
- Must-haves:
- Users need to be able to set up their profiles to include important information relevant to their goals
- Users need to be able to track their progress
- Users need to be able to share their stats with their wellness coaches - Nice to have: Onboarding
Deliverables
User research: User interview transcripts, Survey results, Affinity diagram insights, User journey, Concept sketches, Concept testing/Validation results
Information architecture: User flow
Interaction design: Wireframes, Usability testing
Visual design: Moodboards, Style tiles, High-Fidelity mockups
Prototype: Interactive prototype, Micro interaction examples
Objective
After going through the project brief and client’s requirements, we decided to help the ‘Not-So-Healthy’ strata of people, who do not necessarily consider themselves as ‘Super healthy’ people but generally would like to have a healthy lifestyle.
Our main goal was to help people have healthier food habits based on legible & reliable sources. we wanted to create an app that was accessible and relatable for a large scale of users.
Empathize
User research
We begin our research and tried to understand the habits and behavior people have when they go grocery shopping. We did the quantitative survey with 34 participants and found what they check before buying any food product, what’s the reason behind that, and so on.
User interviews
We also did 5 user interviews as part of the qualitative research and found out that most people like to check the ingredients to see if it doesn’t have any additives/chemicals or if they are high in sugar. We could understand that not all users count the calories, but they generally want to avoid unhealthy food products.
A few of the interview quotes we found interesting are:
Market Research
We started our research by reading about ‘Healthy Food habits’ and how users understand the ongoing trends of clean labels or health ratings and how they choose their food products.
We could figure out our competitors and made a feature analysis, where we tried to understand the market, our direct & indirect competitors and worked on the Brand analysis to better understand the ideologies and attributes of the brands.
Define
User persona
Based on the data we had gathered through quantitive and qualitative research, we built our User persona- Michael, who is a Tech-savvy ex-pat living with his wife in Milan. He loves to eat good food. He finds it frustrating to understand a different kind of label on the food products and if he should trust it or not. Also, being an ex-pat, he struggles to translate the label every time he goes grocery shopping.
User journey
In this user journey, Michael wants to cook something for his pregnant wife and goes to the grocery shop with a list of things to buy. Upon arrival, he found a variety of products but gets confused with the label/healthiness mentioned differently.
Also, he couldn’t remember the things his friends had recommended him. So, eventually, his experience turns out to be unclear and unsatisfactory with regards to the healthiness of the products.
Going through the journey map with Michael, we understood his pain points and focused on the problems to turn them into opportunities for our proposed design.
Here are some opportunities we found:
- There is an opportunity on helping him have distinct information about pregnancy-related food choices
- There is an opportunity on helping him summarise the information, for a better understanding
- There is an opportunity here to help him directly have suggestions from his friends/relatives
- An opportunity here to establish a global set of rules to measure the healthiness of a food product
Jobs-to-be-done
Furthermore, JTBD methodology helped us to define the problem Michael is having in various situations. The context/situation where the need arises is very important in the Job-to-be-Done framework.
It was a good experience to do the ‘JTBD’ exercises, to find what Micheal really wants the product to get done!
Value Proposition Canvas
Working on the Value proposition map gave us a clear idea about what we wanted our goal to be to make users’ life easy. We understood both consumer and the brand‘s perspectives, which helped us to define the features for the proposed app.
Problem statement
We arrived at this problem statement to define and conclude the main issue:
Michael the “tech savy expat” needs to find a way to efficiently identfy healthy products from the whole range in the supermarket because he does want to keep eating food products which have unhealthy elements in it.
Ideate
HMW statements
Considering Michael’s pain points and motivations, we defined the 3 How might we statements:
MoSCoW map
Once we identified the problem, we started brainstorming ideas and features to help Michael choose a healthy product. We discussed various possibilities and prioritized with the MoSCoW map, where we could finalize the must-have features for our proposed app.
MVP
With the help of HMW statements and the feature prioritization, we could derive our MVP (Minimum viable product) as:
The goal of the NutriScan app, at the bare minimum, is to make users aware of what are healthy food products available in the market. By knowing this, the app further aims to encourage consumer action. Therefore, we must do the following:
Create an app that enables the user to scan the barcode of any food product and can see the nutrition values with a comprehensive rating. Also, the option of setting the ingredients preference is available when they log in. The tracking of their previous purchases, suggestions from friends/relatives assure the user that they can keep their health on track.
By ensuring that these things are available, the user will be able to review & compare and buy different healthy products with full knowledge of what is inside them and how they can improve their health.
User flow
We designed the happy path for Michael, where he first goes through the onboarding screens of the NutriScan app. Then he scans a product, chooses an alternative healthier product suggested by the app, saves it in his list, and consults the Nutritionist from the app to get feedback.
Lo-fi sketches
Each of us took some time to sketch out the conceptual drawings to put the ideas onto the paper. Even though we had the same MVP and Happy path in our minds when we drew them, we understood the similarities and the differences amongst our sketches. Based on what was the best way to showcase our ideas, we finalized the sketches.
Concept testing
We did the Concept testing with 5 users, where we gave them the scenario in which they will be using the proposed concept and then tried to understand their actions based on what they answered while making notes of their behavior and gestures to get the nuances.
We got some good insights into how the users find our product and how they would interact with it in order to achieve the set goal.
It might be good to categorize, in case there are more things to scroll through for setting up the food preferences.
-Shreya, 33For the product info screen, I would like to see the ingredients along with the score.
-Rajat, 36I udnerstood that it was a rating. I prefer to see rating in more friendly way.
-Sara, 26
Mid-fi wireframes
We built our mid-fi screens based on the Lo-fi sketches and the feedback we got in the concept testing.
Usability testing
We put together the mid-fi screens and the interactions and tested the prototype through the usability testing with 3 users in-depth with the interview and did the remote testing with 9 users through the Useberry app.
It was interesting to find how small details and icons influence the way the user understands the design and its purpose. Some of the feedback we got:
The sharing button looks like a donation sign. It’s a bit unclear. Where can I share?
Mitul, 32On product page I would like to find that alternative product are more highlighted.
Gianmarco, 32Why is there an arrow in the scan screen? Do we need to swipe up for scanning?
Mitul, 32Scanned history screen is pretty good. It’s simple to undertand.
Rajat, 36
Based on the feedback we gathered through the usability testing, we modified our screens and worked towards the Hi-fi prototype.
UI design
Visual competitive analysis
We did a visual competitive analysis with 3 brands, to understand the current market trends in the food industry. We could identify what we can offer to our users and how we can give them a different and fresh product from rest of the market.
Brand attributes and Moodboard
From the beginning, we had decided that we wanted to create a product that is useful for a larger audience who want to make healthy lifestyle choices. We further reinforced that by choosing our brand attributes, through which we wanted to represent that sentiment. We chose 5 attributes:
- Informative: Providing information which helps you to take a decision
- Smart: Helping you stay updated with your health track
- Conscious: Making you aware of the facts and truths
- Community: Giving you a community vibe to share/get recommendations
- Fresh: Giving you a unique take on choosing a food product
We tested the mood board with 10 users and mostly got feedback that was aligned with our brand attributes. We were happy with the outcome and proceed further with setting up the style tile to build our Hi-fi prototype.
For the name of the app, we wanted to choose something which gives you an idea of what it does from the beginning. Hence, we chose our app name as NutriScan.
Style tile
Creating the style tile was essential for us to think about the details and articulate every aspect to build the brand we had envisioned.
Dashboard
We built the dashboard for our app to sort information in an accessible way that helps users analyze large sets of data and make more informed decisions. We decided to look at Michael’s pain points and address them by creating the dashboard.
Hi-fi prototype
It was time to put together everything we had built and design the Hi-fi interactive prototype. We created the prototype for iPhone 11 Pro screen.
Here’s the short video of the prototype, which shows Michael’s happy path where he goes through the user flow as below:
- Upon logging in, Michael lands on the ‘food preference’ screen, where he chooses the preferences based on his choices.
- Once choosing the preferences, Michael can start scanning the food product by clicking on the ‘scan’ on the navbar.
- He scans the Oreo cookies and finds the product screen in front of him, where he can find all the necessary information regarding the product, along with the comprehensive rating given by the NutriScan app.
- He finds the rating to be ‘Bad’ and also sees the healthier cookies as alternatives suggested by the NutriScan app.
- Michael selects one of the alternatives, and lands on the product screen, where he again checks everything related to the product.
- As he finds this alternative to be satisfactory, he saves it to his list.
- After checking his ‘saved list’, he checks his health overview from his profile, where he can have a better synopsis of his food purchase history.
- He shares his health overview with the Nutritionist from the NutriScan app and gets feedback.
- In the Community, he has recommendations for healthier food products from his friends, based on the preferences he has already set.
Next steps
- Do the usability test with the Hi-fi prototype and validate the findings
- Work in more depth for setting up the food preferences
- Develop all the user flows which enable the user to have a complete app experience
Learnings
This was the first time I worked for an iPhone and ios product, which helped me understand the small differences and similarities between the ios and the android screens. I would like to further my knowledge in this direction and learn in more depth.
It was interesting to learn about the Jobs-to-be-done method and use it to think from a different perspective. It helped us to focus on the context & situation where the need of the job is raised and how we can help to fulfill it.
Creating the dashboard gave us the opportunity to summarise the understanding and data we have gathered from the user and present it in a more structured way to help the user to have a healthier lifestyle.
Thanks a lot for being the most amazing teammate Chiacchio Rosa and for all the great work we did!! It was a pleasure working with you! :)
