1. Define Specifications, Create Rough Drafts

The outline of the flow was provided by the client because they want to launch the service as soon as possible.

I put them into actual UI by creating high-fidelity mockups to correspond to specifications.

Check and refine specifications with Store Owners

I checked requirements not just within the team but the actual restaurant as a potential user to get to know how to use or if there are any blockers on current POS systems, together with drawing screen transition diagrams and wireframes.

2. Define Key Colour and Typography

Based on the red colour which illustrates energy and enjoyment at the dining experience, I also used orange and yellow as analogical colours. For the typography, Nunito Sans is mainly used for Web app, however, I determined to use a standard font for each OS, to consider stable readability and development cost.

3. Create Design Guidelines

I made design guidelines by making key elements as components to minify design costs for creation and modification. It also made me possible to provide semantic design with accuracy in the structure of Figma file thanks to Variants, Auto Layout, and some other features.

Header and Nav Components

Menu and Keypad-related components

Modal-related Components

I acknowledged the importance of accessibility in design, a little while later of starting designing for iPad app. Even though it was a little difficult to change key colours due to those having already been determined, I tried adapting to accessibility starting by considering accuracy in icons, spacing, and content writing.

4. Generate UI and Prototyping

— Consider Information order

In this UI, the menu is filtered into the horizontal reading direction (from left to right), from choosing a category to editing or customizing an order.

1. Choose category

2. Choose menu item

3. Modify quantity, or edit/delete items

4. Send the order to the kitchen, or the payment

— Manage multiple order

This app offers managing multiple orders for both dine-in and takeout. Staff can switch dine-in and takeout by tapping tabs.

State can be identified by the difference in color as below:

— Modify Orders - Discount, add sauce, topping or utensils

The feature for modification for all items or partial items are also available.

• If you tap each items→ Customise, discount or make it void for Only the item

• if you tap "Void All"or "Discount All" on the right bottom→ Customise, discount or make it void for All items

— Payment

Staff can process payment when they tapped the "Payment" button. For the dine-in, we offer transactions with cash, credit/debit card, or vouchers such as gift cards, and delivery services such as UberEats, DoorDash, or Skip the Dishes.

Of course, payment for multiple customers in one table is also available based on the number of seats when registered orders.

5. The Logo

I also made logos that can provide an impression of "joyful experience at the restaurant" based on typography provided by Google fonts to meet their desire even within a limited budget by the little arrangement in alignment and small elements.

Logo ideation:

• left – Just arranged typography

• right – typography with small elements

The completed logo