OrderUp a customizable food delivery app: design and development case Description
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.
John and Josh liked our Dribble works, so they decided to turn to us.
Work scope
Dark theme
Order Up features
Downloading is not necessary. Users can order food via a browser.
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 changethe typeface
Stick to the colors
but changethe 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
What if
I, sure, want a fried fish and
I don’t want to scrollthousands 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
or
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.
This resulted in a smaller card that would be hard to read.
Win-win
We made three card columns on the screen to meet the clients’ requirements.
Once the cart appears after a click, it moves the third card column down.
Our clients are happy now —
it’s a perfect combination of content density and readability.
The design is ready
We handed over the finished design to our clients.
John and Josh loved our solutions, especially on the customizable dark theme.
Now users can order food in Order Up, and the platform stands out among the competitors.
