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 a suitable 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 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, conducted surveys, conducted a competitive audit, and conducted a usability study. The research goals were to determine 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 preferences and favorite dishes, which sometimes makes cooking tricky.

USER STORY

As a busy mother of two kids and a food lover
I want to filter by price, waiting time, or type of cuisine
so that I can quickly order the proper 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 plan meals, and sometimes his girlfriend plans dinner. Both are not very keen on cooking, but they enjoy good food. They both like to chill on their couch and order food online when they leave work.

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 palette of cool and warm colors was the perfect fit for the restaurant’s branding. The teal helps evoke a happy feeling in users, and paired with the yellow; it creates a nice balance between calm and energy. The primary typeface for the app is Migra. For body text, I used Helvetica Now, which beautifully complements Migra.

Styleguide-1

Accessibility Considerations

Color Contrast

I ensured 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 essential as it builds the foundation for every decision 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