Orderup: a food ordering app

Food delivery app

UX/UI

OrderUp

What’s cooking?

Order Up is a food order platform

It offers a few food order options
and enables users to book tables.

Restaurant
and hotel owners
create special pages
for their places and
customize the service
based on
their brand requirements.

This way, the entrepreneurs get a full-fledged app and don’t have to pay for its development.

Order Up is a food order platform

It offers a few food order options and enables users to book tables.

Restaurant and hotel owners create special pages for their places and customize the service based on their brand requirements.

This way, the entrepreneurs get a full-fledged app and don’t have to pay for its development.

Clients

John Saadi and Josh Nicholson — the Order Up founder and CTO respectively — contacted us.

They asked us to redesign the platform so that it would be convenient for entrepreneurs and their clients. In essence — a full rebrand of the platform.

John and Josh liked our Dribble works, so they decided to turn to us.

Work scope

Mobile version Desktop

Dark theme

Order Up features

Downloading is not necessary.
Users can order food via a browser.

QR-code
or search

A user scans a QR-code in a hotel, restaurant, or from an ad. Otherwise, they can find the service page via search.

Location and delivery

A user selects a location, if there are several restaurants / hotels in the chain, and a delivery option:

door-to-door delivery
customer pickup
room service
no-contact ordering at a restaurant
table booking

Views the menu and adds dishes to the cart

Pays for the order and tracks it

Gets the food and enjoys one’s life

Stick to the colors but change the typeface

Order Up provided brand colors and style: the white background and rich blue logo.

The clients didn’t want to change the colors as they contribute to the brand awareness.

Poppins

Regular
Aa Bb Cc Dd Ee

Semibold
Aa Bb Cc Dd Ee

That's why we changed only the typeface. We replaced the original one with the Poppins.

It goes well with the rounded UI details.

As we work, we take everything into consideration

We do our best to envisage all the possible use cases.

It’s like a game

What if

I, sure, want a fried fish and I don’t want to scroll thousands of menu items

before

There were no
subcategories,
so users had to open an entire
category and view all the options.

now

The menu contains categories and subcategories. This way, it takes less time to select what a user needs.

What if

I’m a vegan

want to cut on sugar

before

The menu contains categories

and subcategories.
This way, it
takes less time

to select
what a user needs.

now

The menu contains
categories and subcategories.
This way,
it takes less time to

select what a user needs.

What if

I have selected a wrong

order time

an want to change it

before

The order time
and shipping option
were hidden in a drop-down menu.

now

Every screen contains a drop-down menu.

This way, a user can always see the selected time along with the shipping option and change them at any point.

Set up a dark theme for the buttons of all the colors

What an entrepreneur can change

Entrepreneurs can customize Order Up based on their business requirements. They can change categories, subcategories, shipping options, filters, and colors of all the elements.

A light theme is easy to customize

What about a dark one?

The Dark Theme Rule Number 1 — select contrasting colors that stand out on the dark background.

We have added undercoats that vary in transparency level and make every UI element visible.

For example, in the Cart, the menu is 10% transparent. The buttons stand out here, as they are 40% transparent on this background.

The buttons have different transparency levels as well. The colors of key buttons are Intense, whereas all the others are dimmed.

A restaurant owner can add some color to the background to make a better color scheme.

For example, if yellow is the restaurant's key color, the background is going to be vaguely yellowish.

So, a restaurant can use their brand colors to make a page design.

Desktop
challenges

Users mostly select smartphones to place orders. Thus, we decided to make a desktop version that would resemble the smartphone one, so users could enjoy the familiar UI.

We made a menu with two columns and a cart. In this case, the app cards would be perfectly readable on any device.

Still, our clients insisted on three columns.