Have you ever been annoyed or tired of having to wait in a long line when ordering food at a restaurant? Orderbook(모두의 주문) is a service that customers order directly from the table with a mobile QR code.
- Live at: https://orderbook.logostory.io/#/
- Github: https://github.com/logostory
As my first side project at LOGO Cording club, we decided to design a service that applies to us. Right after the meeting, we could not decide what food should we order for the team lunch and tired of waiting in a long line. Let’s build a food ordering service that makes it easy for anyone to find a menu, choose food, and order directly. Main contributed in UI design and React component development. I also participated in ideation, wireframing, and flow chart.
Brainstorm
At the start of the project, we surveyed similar apps and created a logo design that would be responsible for the consab and brand identity of the logostory app.
Research
First, we installed 7 food delivery services such as Yelp to understand each screen and function, and figured out how the functions we were going to create were developed in the real world. (Thanks Rachel)
Design Identity
Next, Glory, a designer, creates a logo with the image of ‘building up’ the goal we are pursuing. Next, we prepared the actual design by creating a Material Theme based on this consap.
Ideate & Sketch
PAPER PROTOTYPE USABILITY TEST
We iterated our wireframe design by conducting informal usability testing with the low-fidelity prototype. Our participants provided feedbacks on error-prevention methods, accessibility, and discoverability of the UI.
INITIAL UI DESIGN & WIREFRAME
As I was designing the UI wireframe and components, I realized that the most important function of this app lies on the user flow from camera to checkout. Using Marvel, I tested out different scenarios and finally came up with some solutions. With some external and internal critique, we settled on a QR code based interaction.
Design & Prototype
Sketch
Zeplin
Web app implementation
My teammate lead the implementation in React.js and I helped with React such as QR Code creation rule, component styling based on Material-UI, Redux (shopping cart), and Swagger integration with the backend team.
