Case Study: Designing a food ordering app for a food-truck
Introduction
This case study summarizes the results of a two-week long design sprint in collaboration with Esra Luijken as part of the Ironhack UX/UI Bootcamp we followed in January — March 2021.
The goal of this project was to design a mobile app for a business using the Design Thinking process — emphasize, define, ideate, prototype and test. The first week was centered around understanding users, the second was dedicated to design and prototyping.
The brief
Our client is Tutta Italia, a food truck serving Italian food run by Jan Albert van Weerdhuizen in The Hague, Netherlands. Jan Albert has years of experience as a chef working in busy restaurants in Amsterdam and as a freelance chef, catering for big events and private cooking.
After working for 25 years in the kitchen, he was looking for a new challenge. He started looking at food trucks as a viable alternative to opening a restaurant. He loved the possibility to cook while on the move and being in contact with his customers. His business quickly took off, with companies as well as wedding parties and birthday celebrations hiring him to cater for their big events.
As we all know, Covid-19 put a halt in celebrations everywhere in the world and so Jan Albert quickly adapted his model. He started travelling around 4 high-end neighborhoods in The Hague to continue serving his food. He wants his customers to be able to order from an app so that he can manage the influx of orders and know where he is located.
The research
To properly define the user problem and business objective, it was necessary to get a broader understanding of the stakeholder and his customers. Qualitative interviews really helped in getting those insights.
From Tutta Italia’s customers, we found out that the current ordering process lacks automation:
These are the key takeaways from interviews with the customers:
- The current ordering process involves a lot of manual input from both the business owner and the customers themselves: the business owner posts flyers to let the customers know he is in their neighborhoods. From there, the customers either call, email or WhatsApp Tutta Italia to place their orders.
- Customers don’t like the current process of making an order via Whatsapp/email.
- The payment process currently cannot be done online. Customers pay directly at the food truck.
- They want to know when the food truck is or will be coming to their neighborhood.
- From their experience of ordering with other third-party food ordering apps, they like when the process is quick (3 screens and the order is complete).
- However, they don’t like when at checkout, they are prompted to add more products (drinks, desserts, etc.) as these are items they already have at home.
The problem(s)
After the research, we identified the main problems we wanted to focus on. We felt we had to them breakdown into 5 different HMWs as they each related to different stages of the process:
About the menu and how to display the products:
- How Might We display the Tutta Italia menu in an appealing way that matches the Italian branding?
About the ordering process:
- How Might we allow customers to let Jan Albert know about their personal preferences?
- How Might We spread the orders so that the waiting time is reduced?
- How Might We make the payment process fast and secure for the customers?
About the location of the truck:
- How Might We make it easy for the customers to know where the truck is located and how to reach it?
The prototypes & iterations
Having already come up with a rough idea of what the app would include using the Crazy 8 and the MOSCOW methods, we started sketching a lo-fi prototype. The prototype showed the flow of a user opening the app from a push notification, ordering a pizza, choosing a pick-up day, pick-up time, and paying.
While our app does not involve a lot of navigation, sketching the lo-fi version turned out more complex than we thought. We had a lot of personal assumptions of how elements should be presented. We created a survey to validate these assumptions with users and guide us in the way forward. Some very interesting and unexpected results came out.
We initially thought that users would want to see all the free, available slots displayed and have the locked/full ones not shown at all. The survey showed that more than 1 in 2 respondents preferred to see all slots, available as well as full ones.
It was also interesting to find out that most respondents preferred the option B to get to the product description page which would show the ingredients. This implies that users need a visual cue to know that there is more behind the picture.
Having validated those assumptions, we were confident to build our mid-fi prototype. We tested our first version on Maze which did not go well (very high percentage of indirect success). Be it because of too many possible paths for the user to take, or a misconfiguration of said paths on Maze on our part, this clearly showed our prototype was not intuitive enough. We needed to help the users make the choices by making it clearer for them which options they do have.
We reviewed our flow and made users test our 2nd version on Figma face-to-face while they were thinking out loud. With 5 testers we managed to get valuable feedback which we applied for our 3rd version, which was the winning one as the flow was much clearer.
The result
We tested our high-fi with users on Figma, again asking them to think out loud as they were navigating through it. Their opinions were completely unbiased as they had never seen any prototypes of this project before. We received encouraging feedback.
We felt confident to show the high-fi to our client and explained the choices we made based on user testing. He was initially enthusiastic about the process and how we solved the problem.
He then gave us suggestions on the design such as: a photo of his truck as the app background, more of his logo, smaller photos of the pizza, an about me page, a banner displaying adverts, pizza reviews and overall more pictures.
We agreed that the first version of the high-fi did not reflect his branding enough but with 35 hours left on our deadline, we had to prioritise his feedback. Starting off from our current design system, we re-used several components and tweaked them to empathise his branding a little more, while maintaining the elegant feeling of Tutta Italia and our vision as designers.
Here is the final version of our high-fi, which received great feedback from both the client and Tutta Italia’s customers:
Learnings
- It’s all about good balance — embracing the client’s feedback and knowing when to stand our ground as the designers was sometimes difficult to do. This was our first project for a real client with real business needs. Our own opinions, subjectivity and interpretations of what e.g. Italy represents can sometimes differ from the client’s and therefore bias our design’s vision but regular catch-ups definitely help in minimising any misunderstandings that might arise.
- Clear communication in a team helps to work faster — with tight deadlines, a big project scope and the pressure of delivering something the client will approve of can really create a tensed atmosphere that everybody can feel. It is therefore important that team members work together and leave their egos aside. Esra and I managed to face adversities on this project together because we communicated well, remained calm and kept celebrating every little wins throughout the project.
- Test assumptions, even the ones that feel obvious — we are not designing for ourselves, we are not the user so what seems obvious to us is not for someone else. Testing those assumptions with users to back our decisions made us feel more confident in our product.
Thanks for reading!
This article was written as part of the the UX/UI Design Bootcamp I followed in January — March 2021 at Ironhack.
