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 launching a new delivery-only restaurant that serves food or drinks to nearby customers. The goal of this project was to plan and design the restaurant’s website, with a strong focus on usability and functionality. At the heart of the website is an online ordering system that allows customers to browse the menu, customize orders, and schedule delivery.

Design Process

Coming Up with an idea for a restaurant

Before diving into the design, I first developed a concept for the restaurant business. This involved setting key factors such as the type of food offered, the primary target audience, the restaurant’s price range, and its name. Defining these details early helped me approach the project with a real-world mindset.

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.