Sohyun Lim | UI/UX Designer

Hi! I’m Sohyun, a junior majoring in Art and Design, and minoring in Entrepreneurship and Multidisciplinary Design at the University of Michigan — Ann Arbor, focusing on the UI/UX design path. I’ve always been passionate about the process of acquiring and integrating a product, including aspects of branding, design, usability, and function.

This is a case study I have recently completed in the Digital Product Design class. Our goal was to identify, define, and solve a problem.

‘Vorder’, A contactless Ordering System in the Restaurant

Problem Statement

Restaurant visitors and workers want a product to minimize interaction because of the dangerousness of face-to-face contact during the COVID-19 phase.

Audience

The target audiences include restaurant visitors and workers (server and owner), who urgently need a contactless ordering system and its function within the restaurant.

Primary Persona

The primary persona is a restaurant visitor (specifically, a student) visiting a restaurant during the COVID-19 phase. She thinks that there is a huge difference between to-go orders and dine-in but having a challenge of dining in the restaurant due to maximized face-to-face interaction. So, her goal is to enjoy the vibe of dining in a restaurant by minimizing the interaction between.

Secondary Persona

The secondary persona is a part-time server who is having a challenge of the time-consuming process of explaining and serving customers, and his goal is to reduce its time.

Another secondary persona is a restaurant owner, who is having a challenge of inspecting customers’ satisfaction after the service. His goal is to view direct feedback for their restaurant.

Process

I first started my design process with four main functions: Order (located at the top), Refill, Chat, and Payment (located at the navigation bar).

Initial User Flow

Initial Wireframe

However, after getting feedback that the ‘Chat’ and ‘Refill’ function overlaps, I decided to merge the ‘Refill’ function within ‘Chat’ by putting the ‘Refill’ as a suggested message over the keyboard.

In addition, I shifted the ‘Refill’ function to ‘Account setting’, which users can manage their payment information through. I previously got feedback that better management of payment is needed. The addition of the ‘Account setting’ function enables account creation at the entry which users can add their payment method (either credit/debit card or Paypal) and edit afterward by accessing ‘Account setting’ at the navigation bar, enabling better management.

Refined User Flow

Refined and Added Wireframes

User Feedback

There were several user feedback until the final solution:

• Chat and refill function overlaps: I solve this problem by replacing the refill function with an account setting function.
• The navigation bar is unclear only with icons: I solve this problem by consolidating the navigation bar with the text bubble next to it.
• It is unsure that the order has been sent: I solve this problem with the popout screen to notify users.
• Better management of payment is needed: I solve this problem by adding edit payment within the account setting.

Solution

Key actions:

• Sign-up (including verify email and add payment method)
• Log-in (including forgot password)
• Scan QR code for restraunt
• Home screen with menu and search option
• Order
• Chat with server
• Make a Payment (links to rate experience pop out)
• Account setting

Click to Prototype!

Rationale

I consider my product as the best answer to the problem of the dine-in experience during the COVID-19 phase. Safety is a key issue but people still want to demand. The product has an expected outcome for people to enjoy their dine-in experience safely in this time by minimizing face-to-face interaction, as well as satisfying problems that restaurant workers can have.

Design Decisions:

• Navigation: Unlike the usual navigation bar located at the bottom, I decided on a side-bar-looking navigation bar fixed at the bottom right side; viewing the menu on the home screen is one of the most important functionalities in the ordering system that cannot be hidden.
• Buttons: The buttons are shaped like a round square filled with red color with white text. Red buttons are visually noticeable, contrasting with the white background.
• Visual elements: I chose the color red to highlight important elements to create contrast with monochrome. I have used a sans-serif font, Roboto, for readability, and different emphasis to be either bold medium, and regular based on contents.
• Copy: I wrote copies to be as direct and simple as possible for better understanding.

Existing products such as UberEats and Grubhub influenced me in the designing process, on not missing important elements such as special instruction.

Next Steps

In a larger vision, I am hoping to create a server view of the product for a future iteration. Unlike from the customer view, it would have additional functionality such as view rating and a separate view of order and payment.