Lucia Gomez logo

The Gourmet Burger

Designing and developing a website for a restaurant

TYPE

Personal project

ROLE

Web designer & developer

DURATION

Feb to Mar 20201| 4 weeks

The project

The purpose of this project

Did you know that over 50% of people go online and research a restaurant website before deciding whether to go or not? Having an effective and appealing website for a restaurant business is crucial for making online visitors become guests.

This project consists of the design and the development of a website for a fictional restaurant called The Gourmet Burger. I made this project with the purpose of improving my web design and development skills.

About the Restaurant

Offering high quality, delicious, and unique burgers in an enjoyable environment 

Before starting with the design, I first defined the identity of the fictional restaurant.

The Gourmet Burger is a Vancouver-located restaurant that offers high-quality, delicious, and unique burgers. They care about inclusion, and they want everybody, no matter their needs and preference, to enjoy a great burger. That is why they offer beef, chicken, or vegetarian burgers. The items on their menu are hand-crafted and designed to provide the most satisfying and flavourful bite. All the suppliers are locally sourced, which allows them to support the local economy while guaranteeing they will get the freshest and highest-quality ingredients.

The Gourmet Burger identifies itself as:

  • Friendly
  • Sustainable
  • High-quality ingredients
  • Inclusive
  • Delicious
  • Fun
  • Enjoyable

The target audience of The Gourmet Burger is young adults who do not mind spending a little bit extra to have a high-quality burger. Their customers usually come in groups, to have a fun and delicious experience.

― The Challenge

What the restaurant needs

The Gourmet Burger needs a website that helps them get discovered by future customers, and that allows users to learn about the restaurant, see the menu, and most importantly order online, and make reservations easily. Despite their popularity, they found they needed to develop their online presence, mostly after seeing how customers changed their habits after Covid.

The Process Overview

From design to development

When designing the website, I first did some research about the restaurant industry. This allowed me to understand better the business and allowed me to identify the key elements restaurants need in their website to be successful and to easily convert online visitors into customers. Afterward, I designed the flow and the layout in order to be the most simple and intuitive as possible, so visitors could get the information they needed in the least amount of clicks possible. Then, I thought of the restaurant’s identity and defined a brand and look by choosing the color palette, the typography, and the images. With all that, then I designed the different pages of the website, including the homepage, the Menu page, the About Us page, and the Contact Us page.

For the development, I first did an analysis of the different web builders to identify what was the most suitable for developing a website for a restaurant. I finally chose to do the website using WordPress along with the Divi Builder. The reason I chose WordPress was that it is very intuitive, it is the most affordable, and because it offered a wide range of plugins specific for restaurant businesses that allow taking orders online, make reservations, or update the menu.

― Goals & Objectives

What key elements restaurants need in their website to be effective

After doing some research on the restaurant industry, I identified the key elements that websites for these businesses require to operate successfully and to convert online visitors into guests:

1. To make the website mobile-friendly

While this is a must for all websites, in the restaurant industry is crucial, as 81% of the people that search for restaurants do it from their phone.

2. To add an online ordering system

After Covid-19 and with the rise of the different delivery apps, guests have changed their habits when eating from restaurants. Now it is very normal for people who want to experience the food a restaurant offers from the comfort of their home. This is why is fundamental to have an online ordering system on the website. Additionally, it is very important for users to find this function at first sight once they open the homepage.

3. To show the restaurant information

This is the address, contact information, opening hours, and social media accounts. It is crucial. It is very important to locate this information in a place where users can find it easily.

4. To include a menu

Future guests want to know what food the restaurant is offering. The menu should be simple and easy to read and scan, and that provides the description and the cost of each dish. Additionally, having this menu directly on the web, instead of having only a PDF version will not only be more convenient for visitors, as they will be able to read the menu easily without the need of downloading a document, but also will improve the SEO of the website.

5. To show the right imagery

People eat with their eyes. Having appealing and high-quality photos of the food is crucial to make the visitors salivate and excited to come to the restaurant. Additionally, showing some photos of the ambiance and interior will allow guests to know if this is the right spot for what they are looking for.

6. To tell the story of the restaurant

 When people like the food and the photos, they tend to do more digging and they wanna learn about the story and values of the restaurant.

7. For visitors to start experiencing the restaurant through the app

Make the guests experience the restaurant before they go. The website should effectively represent the restaurant brand, feel, and values. the guests should be able to know what type of restaurant it is just by looking at the website.

― Visual Design

Colors inspired on fire and grill, and burgers

I chose orange as the accent color in order to represent the fire of the grill and the buns of the burgers. Additionally, in color psychology, the orange makes people feel hungry, which could increment the chances of online visitors being more excited to come to the restaurant.

For the background and the text, I alternate between a light beige and a dark brown. The dark brown represented the charcoal of the grill and used the beige as a contrast of that color in order to make a balance.

The Gourmet Burger color palette

Modern, friendly and strong typographies: Khand + Open Sans

For the typography, I chose two fonts: Khand for the headings with Open Sans for the paragraph. I believed Khand was a great typography because it had some characteristics similar to burgers: both of them are strong, tall, modern, fun, and slightly round. For the paragraphs I chose Open Sans, as I believed they matched very well, it has great legibility for small texts and is great for mobile interfaces, and its humanist design gives a sense of modernism and friendliness.

The Gourmet Burger - chosen typography

Choosing the photographs that both match the restaurant’s identity and make customers get excited about visiting.

My objectives for choosing the different photographies were:

1. To show samples of the food the customer could get in the restaurant. This will make online visitors excited to try the food they offer, and hopefully, they convert into guests.

2. To show images of guests enjoying their meals. I wanted to find pictures with groups of people in it, enjoying their meals with their friends. This will allow users to picture themselves as the people in the pictures, and will likely increase their excitement of coming.

3. To show images of the restaurant. This will help the user to understand how the restaurant atmosphere is.

4. To show some green. The restaurant identifies itself as offering sustainable and locally sourced high-quality products. Adding some green pictures of nature will not only transmit that identity but also will give a great contrast against those orange and dark brown colors of the rest of the website, creating a more balanced look.

5. To show the fire and grill. Showing pictures of the grill and the fire where the burgers are cooked will allow the user to immerse in the kitchen and understand how their meal is being cooked.

Burger on a wood
Lettuce
Patties on a grill
Three burgers
Burger restaurant at night
Friends sharing a meal
Green garden
Pattie on a grill

― Website Design

The Gourmet Burger web design - home page
The Gourmet Burger web design - home page mobile version
The Gourmet Burger web design - menu
The Gourmet Burger web design - menu mobile version
The Gourmet Burger web design - about page
The Gourmet Burger web design - about page mobile version
The Gourmet Burger web design - contact us page
The Gourmet Burger web design - contact us page mobile version

Website Development

Developed the website using WordPress

Before developing the website, I made an analysis of different web builders, including Shopify, Squarespace, Wix, and WordPress, to identify which one was the most suitable one for developing restaurants. I analyzed the different plugins or features available to support online ordering, menus, and reservations, the difficulty of use, and the price. My conclusion for this analysis was that the best option was to build the website in WordPress + Divi, as it offers a great variety of plugins to support restaurant businesses, is easy to use for non-technical users, and is the most affordable one.

 

Note that due to this is a fictional business, I was not able to design and develop the Order Online and Make Reservation pages. Those functions and their design depend on the plugin being used. There is a wide variety of plugins developed for those functions, with different prices, aesthetics, and features. If this was a project with a real client, I would have made an analysis of those different plugins, and we would have chose together the most suitable one according to her needs and budjet.

The Solution

Launch the Site →

Thanks for reading!

Want to more? Check out my other projects!