Privacy Policy

Disfrutar

Concept for a food ordering website

PROJECT: Disfrutar Website

ROLE: UX, Responsive Web Design

DURATION: Feb - Mar 22

Project Goal

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.

Comp-Desktop-Mockup-1

User Research

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

Pain Points

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

Persona-Image-1-3

PRIMARY

Name: Nina
Age: 44
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.

USER STORY

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.

Persona-Image-2-3

SECONDARY

Name: Milad
Age: 31
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.

USER STORY

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.

Disfrutar-Image-Full-Width

Paper Wireframes

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.

Paper-Wireframes-2

Digital Wireframes

The user flow outlines how the user navigates from choosing dishes to ordering.

Digital-Wireframes-2
Before-4 After-4

From Paper to Digital

Based on the test findings I iterated on the wireframes and created a high-fidelity prototype (see link below).

Styleguide

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.

Styleguide-1

Accessibility Considerations

Color Contrast

I made sure that the contrast ratio is at least 4,5:1 which means AA status according to WCAG compliance.

Button Placement

Main CTAs are placed so that users can operate them with one hand.

Screen Reader

The app is screen reader friendly. All images and videos have captions.

Takeaways

Research is important as it builds the foundation for every decision that’s made later in the project. Biases can influence user testing and you have to overcome them. Also, accessibility and inclusion are essential, and many apps ignore this.

Contact

Studio Dino Franke
Flurstrasse 57
40235 Düsseldorf
Phone: +49 162 61 37 600
Email: contact@dinofranke.de
Instagram: @studiodinofranke

© Dino Franke 2022

Made in Flingern

Instagram_white
dribbble_white
behance_white
linkedin_white
View