Concept for a food ordering website
PROJECT: Disfrutar Website
ROLE: UX, Responsive Web Design
DURATION: Feb - Mar 22
We create a website to help food lovers find the right dish and be transparent about the quality. We need to find out if choosing dishes and ordering is easy.
Challenges and Target Users
We want to create a best-in-town experience that is as positive as visiting a restaurant. Target users are all individuals with online shopping tendencies who like to browse or order food online at least once a week.
I conducted primary research. I interviewed users, made surveys, and a competitive audit as well a usability study. The research goals were to find out if the website is easy to use and if users can accomplish the core tasks (find and order food).
I identified the following KPIs:
- Use of navigation vs search
- Drop-off rates
- Conversion rates
- System usability scale
1. Selection of food
The offer of dishes is often overwhelming. How can we simplify this part of the process?
2. Transparency about quality
Users want to learn about the quality of the restaurant’s products.
3. Delivery time
In general waiting times are very long and there’s no clear communication about the delivery. How can we improve this?
4. Food details
Users want to see more details about the dishes. How can we make this easy to communicate?
Meet the users
Occupation: Art Director
Nina is a passionate graphic designer. She takes the children to school and picks them up in the afternoon after work. She likes to spend her free time with her children on the playground. She and her husband love to cook, but often don't have the time. Everyone in the family has their own preferences and favorite dishes, which makes cooking sometimes difficult.
As a busy mother of two kids and food lover
I want to filter by price, waiting time or type of cuisine
so that I can quickly order the right meal for each family member.
Occupation: Project Manager
Milad lives with his girlfriend and their dog in Düsseldorf. He doesn’t really plan meals. Sometimes his girlfriend plans the diner. Both are not very keen on cooking, but they like to enjoy good food. When they come home from work, they both like to chill on their couch and order food online.
As a busy professional and food lover
I want to be offered suitable food suggestions
so that I have a good variety in my menu plan.
Before moving onto high fidelity wireframes and mocks, I wanted to get a feel for what the core of the app would look like when put in front of me.
From Paper to Digital
Based on the test findings I iterated on the wireframes and created a high-fidelity prototype (see link below).
Utilizing a fresh color palette consisting of cool and warm colors felt like the perfect fit for the restaurant’s branding. The teal helps evoke a happy feeling out in users and paired with the yellow it creates a nice balance between calm and energy. The main typeface for the app is Migra. For body text, I used Helvetica Now which complements Migra in a beautiful way.
I made sure that the contrast ratio is at least 4,5:1 which means AA status according to WCAG compliance.
Main CTAs are placed so that users can operate them with one hand.
The app is screen reader friendly. All images and videos have captions.
I learned a lot, e.g. how important research is as it builds the foundation on every decision that’s made later in the project. I learned how biases can influence user testing and how to overcome them. I also learned how important accessibility and inclusion are, and that many apps ignore this.
Be sure to check out the process for the app’s creation below!
©2022 Dino Franke