UFOODI — UXing to make a difference
“If you think you are too small to make a difference, try sleeping with a mosquito.”
The UFoodi project was a two week Agile project that we did alongside our UX Design Transform course with Academy Xi.
The Client
Founded in 2016 by Natalie Hong, UFoodi is a mobile booking and pre-ordering platform that focuses on giving the user choice in their meals, while reducing food waste at the same time. They have focused their concept towards people with dietary requirements, nutritious choices, environmentally conscious people who care about food waste, time poor and pre-planners, and social butterflies.
To put it in their words: “Our mission is to reduce food waste & enrich food choice at a restaurant level”.
The best of both worlds right ?
UFoodi came to us to develop and improve the user experience of their app, and create a new design scope for their version 2.0. Luckily for us, they already had some bits of research they provided us with to give us a little more insight on their customer base:
Personas
Past surveys
User Flow
Style guides
So here we are: Yolande, Emma, Scott and Nate. Four UX Designers about to embark on a journey into the world of food consumption, dietary requirements, and food waste.
Little did I know it was going to be the most eye-opening and inspiring project I have worked on.
Discovery
The discovery part feels like when as a kid, you move towns half-way through the year, and you have to find your way around your new school, discover and remember where all the classrooms are, where the bathrooms are,where your locker is, who is who, who does what, who is best at what…
Brrr flashback shivers.
We got assigned our groups and projects on the Friday and our week-end objective was to get to know our client. I was able to learn all I could about our new client, as well as gain vital insights into the problem we were asked to solve.
From food waste stats, competitor analysis, personas, to meeting our lovely stakeholder Natalie… we discovered it all.
Did you know ?
Australia is the leading country in food waste. Not the United States, Australia. Wait. Shut the front door.
Yep.
5.25 million tons per year. How scary is that. Imagine how many people we could feed if those tons of foods didn’t go to waste and were sent in a different direction. 40% of all food that enters a restaurant goes in the bin.
40% ! That’s over a third, nearly half.
Imagine all the meals venues could provide for people in need with all that money spent on over-ordering and over-stocking.
That was the first eye-opening moment for me. I found it absolutely ridiculous and saddening to realize that we have such a huge problem with world hunger, yet 1/5 plates of food that we order when we eat out end up as food waste. Today’s population (myself included) is so uneducated that as much as reducing food waste should be a priority in our everyday lives; let’s face it, unfortunately it isn’t always.
On a side note: Do you know who is one of the leading countries in terms of food waste management ?
LA FRANCE. Oui oui ! Vive La France !
The App
In order to understand the process, the ideal user flow, discover the app, and gain some insights as to where some potential friction points might be, we decided to download it on our phones and test it out.
Surprise !
It took us straight to a booking path without any discovery of the selected venue or other potential other choices, and the first button to the next step said “reserve a booking”.
Hmmmkay.
We simulated a “fake booking” in order to browse through the product we were asked to improve the UX of, but we could only go half way as we were stopped at a specific step that didn’t allow us to go any further.
Since we couldn’t entirely browse through the concrete mechanism of the app, we approached matters a little differently. We went straight to gathering all the possible online information we could about the company, watched videos, read interviews, articles, and researched potential competitors.
Personas
Luckily for us we were provided with several personas that identified the type of customer UFoodi was conceptualized for. That helped us gain more insight into the frustrations Ufoodis encounter, and empathize with them in order to deliver the best possible product.
Those with allergies/intolerances
Those who subscribe to specific dietary protocols by choice
Environment/sustainability ambassadors who care about food waste
Social Butterflies
Time poor professionals and pre-planners
Heuristic Competitor Analysis — Who does the same thing ?
We decided to do a bit of research and peek at what the “Others” are doing. The objective here was to get to know the “Others”, what they are doing right, what they are doing not-so-right, why they are good, and why they aren’t that good.
This is what we found out:
Actually, UFoodi doesn’t have any direct competitors — no one has done anything quite like this before.
The New Kid On The Block.
The closest we could find were booking and pre-ordering apps, but nothing aimed at reducing food waste or addressing specific dietary requirements and/or choices, as our personas needed. These findings were still valuable in terms of what non “direct” competition was doing, and they still helped us gain insight into what features might be missing, but those were only assumptions, and without a concrete view of our product we were still limited as to what features were potentially missing and which ones were not.
A bit further down the path, we were provided with a full working prototype, and after an initial Heuristic Evaluation of the app, we went back to Competitor Analysis and were able to compare our initial results with what UFoodi was doing right & well, and not-so-right & not-so-well.
Past Surveys
By analyzing past survey results that were conducted on the usability of the app, we were able to gain a good first insight into friction points that occurred along the booking and pre-ordering path. That gave us a baseline to start looking into.
Kick Off
Client Brief
I’ll be honest, this project was the one where we go the most stakeholder engagement, and boy did it feel good! Our client was so engaged, collaborative and arranging, it felt like we were reporting back to a friend.
After an intense week-end of digging deep into the UFoodi world, we finally got to meet our stakeholder Natalie Hong, CEO of UFoodi, during a 1.5 hour session. She briefed us on everything about the company including the information we were able to gather over the week-end, her motivations behind being here and the problem she wants us to work on.
In her words: “How can you see it working, and how can you see it working better?”
Natalie is a lovely, bubbly, cheerful, and passionate human being. She founded UFoodi after a personal experience, and it is clear that she holds the company close to her heart and that she is here for the right reasons. You can see the passion as her eyes light up when she talks about her business and the reasons that led her to create it.
This is the sort of attitude that really inspires me. In my opinion, passion is one of the strongest drives — it can take you anywhere.
User Flow walk-through
Using a full working high-fidelity prototype that she provided us with, Natalie took us through the current user flow of the app, talking us through every page and the reasons behind the information provided on every step of the journey.
Style Guides
During our client meeting, Natalie slipped in that she was open to any UI suggestions. As her main audience are actually millennial females, she mentioned that she would love for it to have more of a “feminine” feel to it, as versus the current bold-ish blunt-ish sorta’ feel.
Guess who was a happy bunny ? I was.
She provided us with a complete style guide and a set of branding assets & imagery. From specific fonts & logos, to branding colour and the reason behind that choice of colour, we had all the assets to work on a pleasable and desirable visual design, along with an improved user experience. The whole package.
Let the creativity begin.
Our Research Approach
Kanban Board & Trello Board
As the Agile approach wants, we made a Kanban board at the beginning of Sprint 1. A Kanban is a workflow-management system that uses a board and sticky notes to prioritize and manage workflow debt. At certain points during our research process, we divided and conquered tasks as it was not necessary to have every team member performing the same task all at once.
We divided the Kanban into 4categories:
Backlog: everything was in the backlog — all of the tasks & research we were aiming to do by the end of the project was in there
To Do: in here we moved whatever research tasks were to be prioritized for Sprint 1 & Sprint 2 (following up on week 2).
Doing: in here we moved whatever tasks were being completed — on any tasks assigned to specific team members figured a small avatar to indicate who was in the process of completing it.
Done: once “In Revision” was complete, we moved the completed and finished tasks into this category.
After day 1, we decided to move the physical Kanban board to a digital version of it on Trello.
Heuristic Evaluation
We FINALLY had access to the entire app. Yayyy ! Natalie provided us with a full working prototype that we were able to go through on our phones and experience the journey as would a user.
This task was conducted by Emma, Scott and myself. We each conducted a heuristic evaluation of the app that enabled us to identify friction points and add them to our first load of potential insights before the deeper user research began. Even though the results can be quite subjective, it is a “quick and easy” way to identify potential “quick wins” as well as giving us a bit of a preview of what might come out of user testings and interviews. After all we are all humans with needs and expectations !
Contextual Analysis
While we were doing the heuristic evaluation, Nate and Scott went through a background/contextual analysis in order to get some more public information about food waste, dietary requirements and the social anxiety that surrounds those restrictions. They found a good amount of personal stories via platforms such as Facebook and Reddit, and the discovery was quite saddening: the response to social anxiety surrounding dietary requirements whilst eating out is isolation. People don’t eat out anymore because they just don’t want to be “that person”.
Which brings us to the question: how can we get these people to put their trust & health safety into UFoodi and get them to book & pre-order through the app. How can we convey trust and reassurance so that we can have the opportunity of making their lives easier and rid them of their social anxiety around dining out?
The Problem Statement
Now that we had conducted all of our initial research and evaluations, it was time to come up with a concrete problem statement.
Oh the struggle. Somehow we just couldn’t get the wording right. Every single time we thought we had something… “Nah this doesn’t feel right”.
And then…
Miracles do happen. It was there.
“How might we help people booking at restaurants to be more environmentally conscious in their choice of meals, whilst catering to their individual needs in group bookings.”
User Interviews & User Testings
Before we officially kicked off the project, Natalie had already arranged 5 people for us to conduct our user interviews and user testings on. Amazing. We looked up those five individuals, and … drum roll … they were all biased at some level. Developer, GM of the venue that hosted the last event…
Crap.
We decided to still interview and go through user-testing with them as their perspective would be valuable to us, but also found our own participants for another set of more guerrilla-like interviews. Those individuals were not users per-se, but we decided that they would give us some great insights as to the overall feel, usability, and desirability of the product, along with identifying friction points and points of opportunity. Bring on the Guerrilla Testings.
We identified 3 key points that we wanted to uncover during the interviews:
Would people pre-order: we interviewed them about past dining experiences, pre-ordering and booking experiences, key elements, and the Hows and Whys.
Would they use an app: is an app the absolute necessity or would it be feasible via a mobile responsive web-page ? We interviewed them about their app usage, their experiences in organizing group bookings, and again, the Hows and the Whys.
Where do they stand in terms of food waste: we interviewed them about their food waste reduction measures, their opinions and views about food waste, and last but not least… the Hows and the Whys.
Bring on the Guerrilla Testings
Our objective in asking our participants to test the app was to identify friction points in terms of the first impression upon first landing, the mechanism, the visuals, and the overall feel, so that we could work towards improving their experience. We also aimed at identifying potential points of opportunity that could help us make it work even better.
For the testing, we got them to complete two tasks that took them through different paths of the product whilst following certain requirements of the scenario. They were stopped at every page, asked about their feelings, impressions, and expectations.
Task 1: book for yourself and your partner. This task didn’t have too many requirements, as we wanted to observe their behaviour, reactions and emotions in terms of the discoverability of the app and the content.
Task 2: book for a team of 4 people — one of them is a vegan. This task was a little more specific, as we wanted to observe their behaviour, reactions and emotions in terms of the feasibility and usability of one of the main purposes of the app: catering for dietary requirements and choices.
The results were so revelatory, and told us a lot about what needed improvement, and what extra features needed incorporating.
Information Architecture
In order to decide where in the discovery, booking, and pre-ordering process it was best to incorporate food waste education and awareness, we got all of our users to take part in a card-sorting Information Architecture exercise. We asked them to sort 15 cards from the most important elements to take into consideration while choosing and booking a venue, to least important.
The results were surprisingly impressive. Most people valued food waste at some level. All had different motivations, but it was nice to see that it was not the least of their concerns.
Humans are good.
The Video
One of our user interviews were with one of the most knowledgeable persons in terms of food waste, food consumption and production, I have ever met. We had a two hour conversation with him, and it felt like we could have gone on for another two. His level of knowledge, passion, awareness and implication in the matter were outstanding.
That was my second eye opening moment.
He sent us a mind-blowing video. It was hard to watch, but it spoke so much about over-production, over-consumption, the limits of it and what happens once those limits are reached (aka: waste).
To sum it up, it starts with mass-production: chicken, cows, and pigs “behind the scenes”. Huge farms and stables full of them.
It’s the stuff we don’t see. The stuff that happens before they end up on our plates. The stuff that happens before we drink our takeaway latte on our way to work.
Ouch.
It then moves on to mass-consumption sensitization. We see tons of people buying products in bulk in this huge supermarket, trolleys full to the top and shelves stacked to the ceiling. It then moves on to fast-foods. People sitting and stuffing their faces with burgers, fries, chicken nuggets… It’s a lot to take in.
The last frame shows an overweight individual at the plastic surgeon’s, having his body marked to identify what areas the fat removal operation will be focusing on.
Until that point the video didn’t really make sense in my head. But that last image just gave it all its meaning.
We over-produce. So much. All the time. Which leads us to over-consuming. So much. All the time. We are humans and we love food, so if it’s there… we gon’ eat it. Even if there is too much, we don’t know when to stop. We don’t know our limits. We over-shop. Over-consume. But hey, as I said, we are humans. ONLY humans. We have limits, and once those limits are reached… what happens then ? Once we have over-consumed so much that we can’t take it anymore, what happens to the over-produced goods that are STILL being over-produced ??? Well, let me surprise ya. Waste.
Voilà.
You can watch the video here — though not for the faint hearted.
Analysis
Affinity Mapping | Insights | Objectives
“A great deal of creativity is about pattern recognition, and what you need to discern patterns, is tons of data.” Margaret Heffernan
Affinity mapping is sorting large amounts of data to be organised into groups based on their natural relationships.
Those two days of user interviews and user testings gave us So. Much. Information. We had post-notes. Stacks of them. Sh*t tons of them.
I am an intense scriber.
We gathered all of our post notes, started moving them around, and noticed clusters were starting to appear; recurring themes. Some were clear, others a little less. Some were even related to each other. Slowly but steadily, clusters became more clear and we were able to identify specific needs, behaviors, goals and motivations. We were then able to identify insights and objectives.
Here is what we discovered:
Insight: Users need discovery. They need to browse through their choices in order for them to make the most informed decision and feel safe about their choice of venue and food.
Objective: provide discoverability of the content to the user.
Insight: Users need reassurance and need to be 100% certain that their dietary requirements and preferences will be met so that they feel safe about what they order.
Objective: provide the user with immediate confirmation that their requests will be met.
Insight: Users need food waste to be omnipresent so that they are aware of the impact they are making. We discovered that they felt concerned only once it was introduced to them. If not, they had it at the back of their minds, but it was not their primary concern.
Objective: communicate/educate about food waste at the beginning and at key points of the process.
Showcase 1
After our first Sprint, we had our first Showcase and walked our Client through our week’s work. We then ideated potential solutions with her, and identified what she wanted us to focus on for Sprint 2.
Discovery
Copy-writing
Information on specific steps
Filtering
Revising the booking path and pre-ordering steps
Quick wins
Ideation & Design
Features & User Flows
During our Showcase, Natalie had identified with us what she wanted us to work on for Sprint 2. The main new features here were: filtering and discovery. Copy-writing and text information fell under the same category.
We then created a user-flow to identify when possible friction points could occur with our new features and when those new features should be implemented.
Information Architecture
Information Architecture is the conceptual structure of everything. It is the way we choose to arrange the parts of something and make it understandable as a whole.
The organisation, search and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found.
The science of organizing content into similar groups to support find-ability.
The art of labeling these content groups to support usability and find-ability.
Since we were designing two new sets of features and were adjusting an entire booking and pre-ordering path, Information Architecture was of utmost importance. We needed our users to find their information rapidly, in a usable and intuitive way.
We grabbed a few people here and there and asked them what information they looked for when browsing for a venue to eat at. We got them to sort it from most important to least, and asked them for what occasions they would eat out. That gave us enough information to sort out what options we would implement in the Filtering feature, as well as what and where we would display the information along the Discovery process.
We then conducted a different IA exercise. A Home Made exercise.
We printed out mobile phone frames, as well as all the bits of information we wanted to display along our discovery path, cut them up into individual pieces, and asked a few people to sort these bits of information as they would expect to find them, and talk us through their thinking process. This got us to identify key locations for specific pieces of information and call to actions.
Sketching & Wireframing
Sketching is, as the name suggest, a sketch. It is the basics of your user interface before getting down to the wireframing.
Wireframes describe what is on the page, describes the navigation and common elements, and identifies different content areas.
Based on our IA research, we ideated how our prototype would look, where we would implement key elements of information. We did a few quick sketches, then a few wireframes where we had a bit more detail on interactions, how they would navigate, and what information was implemented where, before moving on to prototyping.
Prototyping
My FAVORITE.
The time had finally come.
Yayyy.
We decided to create a low-fidelity prototype to use for our second round of user testings. The reason behind that choice was that we did not want our participants’ opinions and experience to be biased by a visually pleasant interface. We wanted to test the chore mechanism of the discovery, filtering, booking and pre-ordering process. This is why we decided to remove any form of visuals — excepting the ones that served a purpose in the mechanism.
À mon grand désespoir. We all know that I love a good UI along with a good UX.
However, since our Client did mention that she was open to UI suggestions, we decided that if some of us had a UI they wanted to provide her with, we would present it as a non-research-based separate deliverable.
Adobe XD… we meet again.
I took the reins on this one and took on the Master Board. I got everyone’s contribution to the prototype and created the master one that we used for our user-testings.
Unfortunately I am a PC user, so the only good prototyping tool I know of is Adobe XD. Principle, Sketch, and Framer X are only just a mere dream… sigh.
Validation
User Testings Round 2
Round 2. The day had come to test and validate our findings, ideations, and design.
We needed to see if the discovery process worked, if the filtering process was intuitive, and if the pre-ordering and booking worked better.
The objectives were:
Observe their behaviours, reactions and feelings.
Observe the way they interacted with the app and the new features.
Get them to tell us what stood out/was obvious, as opposed to what wasn’t.
We got our participants to complete similar tasks to the participants for the first round of testings. Along the completion process, we stopped them at each page and asked them how they felt, what were their impressions, expectations, and the Hows and Whys.
Task 1: Book a table for a group of 6 friends — you’re on a student budget.
Our objective here was to see if they would intuitively go to the filtering option to select a specific price range.
Task 2: Book a table for you and your friend.
Our objective here was just to give them the freedom of browsing through all the options and observing their responses to the discovery of choices.
Fun fact: we focused so much on implementing those new features the most usable and intuitive way, that we completely forgot the most simple and obvious of all features: selecting a time and date….
Awks.
Findings
The results from those testings were extremely valuable and allowed us to go even further with our improvements on the app.
Some results were extremely obvious, others not so much, but so insightful.
We were able to shorten the steps of the overall booking and pre-ordering, and give some elements of information a little more clarity to the user.
We organized all of our findings, and annotated our prototype with every single element we got from the user testings.
So What Now ?
That Friday was Showcase 2 day. It was with great sadness that we waved goodbye to UFoodi after providing Natalie with all the insights, the MVP, prototype, and annotated prototype.
This is a weird feeling.
Client work is over. In two weeks, the course is over. In two weeks, our careers begin.
What. The. Fudge.
I have to admit, even if I really wish that we had had more time on the project because it has SO much potential and I love that it thrives towards making a difference, I am proud of the work we have achieved as a team in such a short amount of time. Our responsibilities were big, and what we delivered was big.
I hope that our findings will be valuable enough for her to implement them in the version 2.0 of the app, and I wish all the best to Natalie and the UFoodi team.
Thank you for everything Natalie !
Epilogue
This project was the first one that really resonated with me in terms of why I love UX so much. I have always wanted to make a difference, impact people’s lives, but I never quite knew how. The impact UX can have on so many different scales is fascinating, and if you put it to good use, it can really make a huge difference.
With this project, it really felt like we were working towards making a difference. Not only are we helping people’s lives in terms of dietary requirements, but we are also helping them reduce food waste at a restaurant level.
It feels as good as a “2 for $5 Double Coat Tim Tams” deal at Coles.
We were designing for the better. Making a difference isn’t about the scale of your impact. You can’t solve world hunger. It’s about the small things you can do that ripple through time and create bigger impacts. The Butterfly Effect.
Like designing a better UX to improve people’s lives, help their social anxiety, give them the reassurance that they can eat out and not get sent to the emergencies because of a peanut allergy reaction. By making their lives better, you will improve other people’s lives too. You will never know about it, and that’s the beauty of it. And all that whilst working towards solving a bigger problem at a much wider scale. For the greater good.
This is what I want to achieve. Making a difference. Impacting lives. Designing for the better.
Credits
I would like to thank our instructor and mentor Robert Williams along with the Academy Xi for giving us the opportunity to work on real world client projects like this one.
A huge thanks to Natalie Hong, CEO and founder of UFoodi, for putting her trust and her business’ UX into our hands, and for being such a kind, fun, and engaging client to work with.
Thank you to Tashi Dorjee, CEO and founder of Two Space, for taking part in our testings, and for being a top photographer all along the journey.
Many thanks to John McFadden for his outstanding knowledge and awareness about food waste and food consumption. He was a chef for 36 years, and is an advisor for UFoodi.
Thank you to Anthony Sansonios, developer for UFoodi and Managing Director at TwoPi Code, for taking part in our interviews.
I would like to thank all of our participants that agreed to be interviewed and user-tested, you guys are the reason why we want to solve problems.
And last but not least, I would like to thank my three team members for their incredible work, collaboration, and support. As a team, we worked together in collaboration during the entire process, and supported and completed each other’s strengths and weaknesses.
It was amazing.
It was such a valuable growth and development experience.
Nate Bamback, Emma Aylett and Scott Burke — you guys are the best.
Hooroo.
