In a Nutshell

Web Design: Strategy and Information Architecture | California Institute of the Arts | Figma, Balsamiq, Adobe Illustrator | 2023

  • A project goal

Imagine being hired by an entrepreneur who wants to open a new, delivery-only
establishment that delivers food (or drinks) to customers living nearby.
For this, I needed to plan and design the restaurant’s website.
The centerpiece of this website is an online ordering system.

Design Process

Coming Up with an idea for a restaurant

Before starting, I came up with an idea for a restaurant business. I needed to decide on a few parameters for the restaurant business such as food products, a primary target audience, the restaurant’s price range, and its name, which allowed me to approach the project in a very real-life manner.

Creating a strategy

Using the concept I created for the restaurant, I built strategies composed of the target audiences, and the user and client needs to base a website upon.

Outline of Scope

Based on the user and client needs that I established, created a set of content and functionality requirements to transform goals into specific requirements for the website.

Sitemap

With the outline of the scope in hand, I transformed the content and functionality requirement into a navigable structure, figuring out how the pieces of content and functionality fit together as a logical whole that the user can navigate.

Now that created the content and functionality as the structure, I designed how the pieces are presented on the actual screen by creating a wireframe via Balsamiq.

Wireframe

Creating a Moodboard

To set out and gather some inspiration about how it would be represented and how it would look for a visual mockup, I collected some images related to the concept of my restaurant and created a mood board. Since I decided to create the website for the Korean food restaurant, I found the Korean traditional patterns and images of Kimbaps, which is the representative menu of the restaurant.

Inspired by the look and feel of the mood board that I created, I design the main visual mockups for both PC and mobile.

Visual mockups : Full set

Key Mockups for mobile

High Fidelity Prototype for Mobile

Designing a logo based on the moodboard

High Fidelity Prototype for PC

Based on the mood board, I designed the logo and decided on the main color schemes for the website.

Creating Visual Mockups

Key Mockups for PC

After designing the visual mockup of the main page for both PC and mobile ver, I created the rest of your visual mockups for the site, focusing on the ordering process.