Hero3.png

My Role

Independent UXUI Designer

Tool

Figma

Project Time

August 2020

Project Overview

For this project, I was responsible for creating the responsive front-end UI design of a back-end food ordering system. This system can work as a plug-in on all existing restaurants website.

Outcome

Interactive prototype for user testing and development.

Problem

 

Due to the high commission fee of third-party food ordering apps and the increasing volume of orders caused by the impact of Covid-19, many restaurants choose to set up an in-house delivery team rather than pay a third party. However, developing a food delivery app might be a huge cost for some small restaurant. My client developed a back-end food ordering system which can work as a plug-in on all kinds of restaurants' website. I was responsible for creating the front-end UI of this system.

User Flow

 

I drafted the user flow based on current food ordering apps and restaurant ordering procedure. The controversial part is when to let users select "Pick-Up" or "Delivery", third-party food ordering apps keep it at the end of user flow, but restaurants like KFC, Panera Bread, and etc. put this section at the beginning. For this version of my design, I keep it at the beginning of the user flow, because I am designing this for all kinds of restaurants. I need to ensure restaurants can satisfy their users with acceptable way and delivery distance in the beginning.

Research

 

Before I stepped into the design phase, I did heuristic evaluation for current food ordering apps and system to explore the UX, UI, and content that I can learn from. 

Color

I decided to use Terra Cotta (#ED6A5A) as the primary color after I digging into other brands. This kind of red orange can triggers stimulation, hunger, and the feeling of happiness and friendliness. 

Element Style: Rounded Corner

Rounded corner element is commonly used in up to date UI trends, because rounded corners are not only easier for our eyes to process, but they also make information easier to process (Anthony, August 17, 2011, Why rounded corners are easier on the eyes). I also applied rounded corner as the element style in this design.

Design Exploration

During the design process, I created the first version and let my supervisor and the client to review, after I got the feedback from them, I modified the design based on their opinions to produce the second version.

Restaurant Card

 

V1

V2

According the opinions from my supervisor and the client, they prefer to add the restaurant photo on the card, and also indicate the services this restaurant can provide. According to their suggestions, I improved the restaurant card from V1 to V2.

Page for Customizing the Single Item

V1

V2

For this first version, I showed the options only by text information. And tried to add images of single option in the second version, both my supervisor and client they liked the second version, because it provides more information with organized style.

Design System

 

After I explored some design styles, I created the design system to set the typography, color, and component library for reusing and keeping the consistency during the design process.

Interactive Prototype

 

Based on the design system, I created the responsive interactive prototype for mobile and desktop version separately.

Mobile

Desktop

Copyright © Minkun Liu