UI Challenge Design Process — Restaurant Reservation

Aldi Pratama
4 min readJan 27, 2018

--

Introduction

Before starting to discuss UI Challenge. Let me introduce myself. My name is Aldi, my career as a designer started while still in college and actively create a website template for sale in the marketplace.

During college, I got a job offer. The job offer is a position for UI Designer on one of the startups in North Sumatra. This job is actually my first job ever. On February 2016 I went to work for the first time in my life. Working as a UI Designer and while managing time with college is not an easy time. However, because of my excitement towards the world of my design, it seemed easy.

Working to be a designer is a field of work that provides solutions to a problem, that’s the thing I like the most. Not just drawing here and there, but also has a clear purpose. UI design makes design and interfaces solutions to solve problems and make it convenient to use. As a UI Designer many of the challenges I face, mostly are to make the interface easier to understand and use. Here I will explain one of the challenges I have ever done. It was about a Restaurant Reservation. I will explain from the challenge that I faced, how I see the problem, do the research and arrange the flow from the process work, make visual design and the last is testing design.

The Challenge

The restaurant becomes a great place to host a party and bizarre event nowadays. As technology growing so fast, it is easy if we can book a reservation without sweating, just typing and press order from our mobile phone.

The challenge is to design a restaurant reservation-booking flow. As a designer, I need to think design solutions on how the user will make a book, fill up the information and what is the user pain points.

The Process

Before starting to design we must know in advance for whom we are designing and the ultimate goal of the design

Here are some steps that I did to overcome this challenge :

Research

The first thing I did was try to learn and understand how the restaurant reservation process works in general. Started Data, Flow and so forth. You can start by scratching the paper streaks

After making the flow indirectly you already know what page you will create. All you have to think about is what features will be displayed on this page

Here I add flow “select menu” so this restaurant reservation not only serves to book a restaurant but can also directly select the menu of food that they will order

Wireframe

Before creating a visual wireframe you can start creating wireframes on paper first.

Wireframe Restaurant Reservation

Visual Design

Once you feel you’ve got the right wireframe, it’s time to get into the high fidelity stage or make a design stage with pixel perfect.

Visual Design Restaurant Reservation

Testing Design

To try the design work, you can create a prototype and create a scenario to try out the design you have created.

Example :

“Kirito plans to eat Mampino fincencall at Mampino restaurant on August 24.

Special thanks to Daniel Pakpahan has helped in writing this article.

Follow me on: LinkedIn| Dribbble| Behance | Website

Recommended articles for you

If you haven’t read my latest case study yet, check it out.

--

--