01. project description
I worked alongside 4 other design thinking classmates to design a Food Sustainability value label product with QR code and mobile web interface. This project was carried out as part of the requirement of the Design Thinking course.
I was responsible for designing the app UI and initial QR Label variations
02. project info
Role
App UI Design, User Testing, User Interviews
Timeline
App UI Design, User Testing, User Interviews
Team
Fatima Nazir, Anthony Salahor, Richard Miles, Shuo Zheng
03. design challenge
How Might We help environmentally conscious students make sustainable food choices and be able to identify the different sustainable food choices available to them?
Foodprint is an individual contribution and many students are aware that they should be making sustainable choices when it comes to food but more often than not, they do not know HOW TO as discovered from our background research and user interviews. Hence, we wanted to explore ways to help students choose more sustainable food options on campus
04. the solution
The resulting solution is a Sustainability Value Label with QR code that serves as a secondary information medium through which users can get more related sustainability information about the particular food item they purchased.
The sustainability information is designed using personable and relatable information that help users make sense of how much their purchase would impact the environment in an easy to digest and understandable way.
05. problem discovery
At the start, we knew we wanted to work on Food Sustainability but we didn’t know what aspect to focus on.Food sustainability is made of many different areas and directions we could pursue, all of which work together to achieve a very similar and common goal. Although considering each of these different parts and factors contributes to the strength of the project, it also leads us down the road of complexity. Hence, the need to narrow down to a particular scope.
06. user research
We spoke to a total of 12 stakeholders including students and experts to get a deeper understanding of what sustainability means to people, how much they care about it and their experiences with making the conscious effort to eat sustainably.
Transcripts from a few of the interviews:
07. secondary research
Analyzing the current UX on XCEL
After conversing with these students, we discovered that several of the participants had a limited understanding of the practical application of food sustainability and sustainable diets. Our secondary research further substantiated this observation. Although over half of the university's students, staff, and faculty considered food sustainability, only a small proportion of them believed it was difficult to adopt a sustainable diet, with the vast majority claiming to only consider it occasionally
Results showed that:
80%
had minimal understanding of the practical application and understanding of food sustainability
Over 85%
did not consider sustainability when selecting or making food choices
Over 70%
had assumptions about food sustainability and its correlation to pricing
08. hear phase
Defining our target audience
Having spoken to a variety of students, we decided to target students who are already environmentally conscious or have minimal knowledge but care about their impact. Primarily because, we discovered that it’s easier to talk about sustainability and be devoted if it’s something you already care about.
To get into more specifics and further identify the need space based off our interviews, we defined a persona that defined the key characteristics and motivations of who our ideal user is.
-Making wise choices to preserve the earth is something I highly value
Age: 20; Education: Bachelors; Location:Canada
Nadina is a third-year student who eats on-campus at McMaster on a nearly daily basis. She has some knowledge of environmental issues from reading articles on the internet and from some sessions from when she was in high school, however she hasn’t had any exposure to food sustainability. Nadina has also picked up some knowledge of nutrition from school and her parents, and is open to learning more about the food he eats. She enjoys using social media and frequently uses technology to learn more about the world around her.
09. journey map
Current user experience
To identify the motivations behind users’ food choices and buying process, we used a journey map to highlight the various touch points and interactions involved in the current decision making process of buying food on campus.
10. insights & opportunities
Based off the interviews conducted, we identified common themes in user stories and used that to identify areas of opportunities which informed our project’s direction.
Education and Awareness
Conscious Consumer Choices
McMaster Values & Social Trends
11. create phase
In this phase, we started brainstorming various concepts we could explore as possible solutions to the identified opportunities from the hear phase.
11.1. brainstorming
11.2. concepts to be explored
11.3. value proposition
12 deliver phase
After brainstorming and selecting 3-5 concepts to explore, we went into prototyping and highlighted the goals for the first round of prototypes. This was to helped us measure success for this round and select a concept to pursue fully for the next round of prototyping. The goals include:
If we can include more information at the point of sale, then we can improve the transparency aspect of the project
The more users can connect with the visual aspects the more likely they are to continue paying attention to it as time goes on, and get more involved
We must limit which information is shown initially to improve UI, so using the most relevant aspects is key. More information is shown if the user wants it
Concept exploration
12.1. concept testing + feedback gathering
Sustainable Value Label(SVL) placed on Food Products with QR Code. Designed to provide information on Sustainability Facts via Phone. The QR code has Infographics with detailed statistics and references related to sustainability.
I think it is really valuable to have a clear and simple label directly on the package. It would definitely influence my purchase decision and make me aware of product sustainability.
The companion app would be great to find out more information
It would be good to see clear understandable metrics to provide legitimacy to the label
Map showing which restaurants on campus have the most sustainable options (Gold, Silver, Bronze). In the restaurant menu, can see which foods are the most sustainable.
Would be nice to have this integrated with MacEats and have little symbols for ranking of the food options available in the restaurants in terms of how sustainable they are.
Similar to caloric information, good for people who want to know
Students can take Food Sustainability home. What you will get in the package: Digging Fork, Seeds, Pruners, Seedless starter trays. Seedless Starter trays: Made of recycled pulp, eco-friendly, biodegradable.
Would require too much time and will
Young people (students) lack responsibility and commitment
Do not think it would drive home sustainable eating, although you are getting and insight into the food growing process it is not similar enough to the real world system for the connection to be made.
Students would be able to view and interact with a art exhibit showcasing the environmental impacts of food and eating located in the University center. The art pieces would be made by students in the McMaster art program and they would be shown during the first and last week of each semester.
I think art is quite impactful and powerful
Maybe certain pieces can be installed over a long period of time
How could you make this part of a long term awareness initiative?
feedback summary
Based on the feedback received from concept lo-fi prototype testing and analysis, we decided to further develop the label but create more variations to consider some further feedback.
Concept 1 has the most potential but need to refine Label so it’s easier for students to visualize
Students liked interactive component from all the concepts, so good idea to keep this theme for future prototypes.
Mid-fidelity prototype testing and validation
12.2. mid testing of selected concept variations
Similar to the nutrition label. Can be easily found on the package. Rank the factors with gold, silver or bronze. Final grade is shown on top
Interesting label: easy to compare between different ranks (gold to bronze)
Are there any specific number or data to compare
If food item meets threshold for McMaster sustainability goals and metrics for selected ingredients, packaging, and sourcing, a pass symbol will be placed on the food packaging indicating a pass based on general sustainability threshold value.
The check mark gives an instant re-assurance that the selected item is verified
Will need to set what the threshold for pass or not is, in order to determine if a food item passes the sustainability test
The symbol is used as a symbolizing image of Green Food Initiative and a sustainable food item. It is designed to capture a user’s attention at first glance with an icon representing Food(carbon)print and a short message around the icon showing what impact the user’s purchase could have on the environment.
Having a symbol is a good way to make the initiative sear into people’s memory for recognition purpose. But it would need to convey a little message that makes them curious and aware that this is sustainability related.
The arc’ed message format is rather stressful because I’d have to tilt my head to read that.
After scanning the qr code on the food item, the user will be redirected to a webpage which gives more detailed information about the specific purchase item, and a reference to real-life impact of what that means in terms of their carbon foodprint (C02 emission amount). User can add the food to their log, which will aggregate data from food they’ve added for review
I like that the information is specific.
Maybe help users see how their choice/purchase compares to other available options. This way, they make better sustainable choices next time since they can already tell which purchase is more sustainable.
A webpage information page a user is redirected to after scanning the QR code on the food item. The page shows the user’s sustainability purchase number collated over a period of time.The numbers reveal the total calculated amount of C02 emission the user’s purchase is equivalent to and uses a comparison message to help the user make sense of what that CO2 equivalent means in relation to everyday things in the user’s life.
The comparison message has to be related to general knowledge. Some people might not be familiar with barrels of oils except they work in the oil industry
feedback summary
Based on this feedback and analysis, we decided to take our testing a step further to run a mini-pilot with other students.
Imagery/Symbols are powerful in grabbing initial attention, but can be refined - simplify and remove unnecessary information
QR code (Secondary Information): Combination of concepts with more relatability
Physical and digital prototype testing
12.3. resulting label, iterations and design decisions
We felt it was imperative that we make all three of our final prototypes into real tangible physical and digital models that McMaster students could interact with. We printed each label and attached them to standard McMaster sandwich boxes. The QR codes on each label were scannable and linked to our various app designs. Lastly, we create a miniature poster that gave a explanation of our re-imagined solution. These prototypes allowed us to create a mini-pilot where we were able to test our various solutions with multiple students. From this we were able to gain valuable feedback for our final solution.
All product with a label are still considered sustainable but a higher rating means less CO2 emission produce for the same amount of protein in one sample.
Gold - a food item with this rank means it is the most sustainable choice.
Silver - a food item with this rank means it is the more sustainable choice.
Bronze - a food item with this rank means it is the less sustainable choice. QR code details more sustainability information.
This label incorporates a rank system and checkmark to help users identify if a particular food item is sustainable or not.
Furthermore, the label uses the sustainability facts sheet to break down the sustainability value of nutrients contained in the food item.
The initial label symbol used familiar footprint symbology along with radiating words. The goal was to use a style that was very familiar to the user, appearing in a variety of existing symbols.
We changed to the latter symbol as a result of feedback interviews. The words arranged in the semicircle were difficult to read, so we simplified the text and used more eye-catching symbology that more closely aligned with McMaster’s established themes.
13. user testing
We tested the visual impressions and information relevance with some students.
Some of the feedback received include:
more sustainable feel.
People are more visuals-oriented than text-oriented.
14. final prototype solution
After several iterations and user testing and feedback gathering, we were able to come up with a simple but impactful label that helps students make sustainable food choices at the point of purchase. Further to that, students can also learn more about the quantitative impact of the food item purchased in a way that makes sense to them.
Further to the feedback received from the Pilot, refinements were made to the label to make it more evident that it is sustainability-related. We have chosen the Ribbon style as a visual element based on common feedback that users thought it felt like a reward for making a good choice. This gives them some positive reinforcement every time a sustainable purchase is made. A one-line simple message is used to depict the food item and label as sustainably made and user can then scan the QR to get more information about why the food item received this label.
When the QR code is scanned the user will be presented with information relating to the specific food item they purchased.
Information on this page details the environmental impact of the food item and related metrics in terms of CO2 emissions.
The user can then compare the purchased food item to other available food items in the restaurant that are sustainable.
The idea behind this is to help users make better sustainable choices with future purchases based on the information detailed in the QR code.
Once a user selects a food item to compare their current purchase to, the user is redirected to this page.
This page helps the user understand the impact of what they ate as compared to other available food item for purchase.
Correlations are made using relatable metaphors to help users make sense of the meaning of each food items’ CO2 emission amount - showing how consumption of the food item compares to emissions of driving, heating the average Canadian home, taking flights and consuming water.
As users add purchased food items to a log, users can view their sustainable food purchase history on this page.
This is similar to how the McMaster water fountain keeps count of water bottles saved every time a student fills their bottle from the tap.
It’s a lifestyle tool that helps users see how much their food choices has impacted the environment and to acknowledge the everyday efforts they make towards being more environmentally conscious in school.
15. result
Here’s the re-imagined experience of environmentally-conscious users after using this solution.
16. did i win something?
Working on this project was one of the highlights of my Winter term at McMaster. It gave me an opportunity to work on a project with direct impact in the choices people make in their everyday lives. After presenting our solution during the final project presentation, we were encouraged to look into making the solution a product people can actually use. This further confirmed that we were on to something.
By testing early on even with sketches we had made at the early stage and mood boards, we were able to quickly get a project direction and know how each concepts we had in mind might play out eventually if put out there. This helped reduce a lot of back and forth and allowed us focus on multiple iterations and refinements to our concept.
I got to experience and learn that powerful design emerges from the mess. Going through this experience and seeing how not avoiding complex design challenges helped uncover depths and factors at play we didn’t early on realize, has shifted my mindset from avoiding complex challenges to embracing them with an open mind. This has instilled in me more confidence to be creative and push through moments of creativity blocks knowing that it will eventually open up more creative and possibly wild ideas all of which contribute to the design experience.
MORE PROJECTS
Enhanced the signup and login security experience for over 100 corporate customers through improved 2FA process.
Empowered Canadian patients as experts in their healthcare journey through access to personalized information, resulting in improved communication and co-ordination between patients and providers..
