Yummy.

Food Delivery Mobile
Application

Project overview

This project is a design of the food delivery application called "Yummy." letting user pick the best food saving their time. My main objective was to meet user and business goals that had been stated at the beginning of the project. The goal was also to create a clear unique design according to the design principles and best UI practices.

Goals

User goals

1. Cut down on time spent on creating an account
2. Filter and sort resturants and food conveniently
3. Convenient forms filling and easy searching
4. Transparent delivery process

Business goals

1. Cut down on delivery time
2. Grab customers' attention
3. Display discounts and deals

Design Process

  1. Idea and research
  2. User Flow Diagram and User Stories
  3. Low fidelity and high fidelity wireframes
  4. Color palette and typography
  5. Designing Views

User Flow Diagram and User Stories

Story 1

As a food delivery application user, I want to sign up using my e-mail or social media account, so that I do not have to remember additional password.

Story 2

As a food delivery application user, I want to be able to manually set the delivery location, so that I can get the food delivered to any place.

Story 3

As a food delivery application user, I want to be able to sort and filter resturants, so that I can find the most recommended places that serve particular cuisine.

Story 4

As a food delivery application user, I want to be able to search and filter dishes, so that I can buy the food that is compliant with my diet.

Story 5

As a food delivery application user, I want to see what is the status of my order over the delivery process, so that I know when to expect the food to be delivered.

Low fidelity and high fidelity wireframes

Color palette

After doing research I came to the conclusion that among food delivery applications and designs that can be found on the Internet there are two colors that dominate: green and orange. This makes another application that uses these colors lost in crowd. To make "Yummy." unique and outstanding brand I decided to use color named Rouge, hex code #983C80 as a main color.

Main color palette

Neutral color palette

Typography

I decided to use PT Serif font for heading text and PT Sans for subheading and paragraph text. The serif and sans serif go well in this case as they belong to the same family. The serif font has been used for headings to create a nice visual hierarchy.
Logo, Pacifico, Regular, 32
Heading 01, PT Serif, 32, Bold
Heading 02, PT Serif, 24, Bold
Subheading 01, PT Sans, 22, Bold
Subheading 01, PT Sans, 22, Regular
Subheading 02, PT Sans, 20, Bold
Subheading 02, PT Sans, 20, Regular
Paragraph 01, PT Sans, 16, Bold
Paragraph 01, PT Sans, 16, Regular
Paragraph 02, PT Sans, 14, Bold
Paragraph 02, PT Sans, 14, Regular

Accomplishing goals

User goal #1 - cut down on time spent on creating an account

There are four possibilities of authentication provided for user. Three of them use the external providers. User has also possibility to generate one-time link sent to user’s email. None of them requires password creation.
Combo box with autocompletion in order to prevent spelling errors.
User can rapidly share their location or enter it manually.
Even if user chooses option “enter address manually”, Google Place Autocomplete will let user to find their address automatically.
If user has not found their address, they can find it and pin on the map.

User goal #2 - filter and sort resturants and food conveniently

User is able to filter and sort restaurants to meet their expectations.
It is also possible to find the food that matches dietary requirements.

User goal #3 - convenient forms filling and easy searching

Real-time validation on each field to provide early and relevant feedback to the user.
I applied good practices to forms e. g. no placeholders for fields like name or country not to mislead users.
Another good practice which I applied was to differentiate text field in focus state from the rest of the form.

User goal #4 - transparent delivery process

The user is able to track the order in real time with information about what stage is the order on.

Business goal #1 - cut down on delivery time

Additional address details are required from users to help couriers find the place.

Business goal #2 - Grab customers' attention

Colorful illustrations and unique brand color have been used.

Business goal #3 - Display discounts and deals

On the home page custom deals can be displayed.

Design

Welcome page

Default CTA
Active CTA

Authentication methods

Authentication by email

Default input
Active input
Input validation
Active 2ry button

Profile details

Inactive CTA
Country combo box
autocompletion
Active choice
Disabled email
input
Input validation
Unchecked
checkbox
Checkbox validation
Active checkbox
Checked checkbox

Phone number verification

Country code with
drop down list
Input validation
Active input

Address entering methods

Entering address manually

  • Place Autocomplete by Google

    • Address combo box
    autocompletion
    Active choice

  • Pinning an address on a map

    • Active option
    “Use a map ...”
    Pinned address

    Entering address details

    Validation
    Active choice on
    drop down list
    Active input

    Home page

    Browse page - search

    Default search input
    Active search input
    Search results
    Default filter and
    sort settings
    Selected filter and
    sort settings

    Browse page - selected category

    Selected price range
    Selected delivery fee
    Active dietary
    checkbox
    Checked dietary
    checkbox
    Toggled on "with
    discounts only"

    Selected restaurant

    Dish personalizing

    Checked pizza size
    Active “rest
    toppings” checkbox
    Checked “rest
    toppings” checkbox

    Cart page

    Active code input
    Code input
    validation

    Checkout page

    Order track page