El Agave Mexican Restaurant
Sample Project: Creating a New Website for a Small Restaurant
THE PROBLEM
El Agave Mexican Restaurant does not have a website. As a customer, I am very annoyed by this because it is not convenient for me to try new items and viewing their menu on Facebook is cumbersome. I have to click through pictures to view the menu or I get distracted by a notification and then forget to order from them. This is not a great experience.
MAKE OF THE TEAM
Me
KEY GOAL
Design a new website
MY ROLE
UX/UI Designer
TITLE OF THE CALLOUT BLOCK
THE SOLUTION
I designed a mobile and desktop website. I have not spoken with the restaurant owner, but if I were to make this into a reality, I would find a developer.
UNDERSTANDING THE USER
According to datausa.io, the median age for people living in Hoffman Estates is 37.9 years old and whites (Non-Hispanic) are the largest ethnic group in Hoffman Estates, IL (50.1%). Using this data, I am assumed that the users of this website would be people who are accustomed to using technology, and that they have the capability to order from websites like Grubhub, Uber Eats or Seamless.
BREAKING DOWN THE PROCESS
After creating the Empathy Map, User Persona and User Flow, I tackled the wireframes and designed a simple prototype.
I created the desktop and mobile wireframes with Figma. On the wireframe, I added a “Fotos” page, but when I began researching restaurant sites in Chicago, I noticed how many of them don’t have a gallery page anymore. I think Instagram has replaced the gallery page, which might be the reason why gallery pages are going away. So for the design, I removed the “Fotos” page.
After scanning the El Agave's takeout menu into my computer, I used their logo and branding for my design. It was nice not having to create the logo and branding this time round because it sped up the design process. When designing, I prefer simplicity and subtly - I don't like to overwhelm the user because I aim for clarity and ease of use. I chose the blue from the their logo because I found it to be softer and less harsh than the red. For the typography, I used Oxygen and Fira Sans because they are free Google fonts and easy to read. I used an Agave Plant image for the background of my design because they use the plant in their logo. I used images from El Agave's Facebook and Yelp page.
THESE WERE SOME MAJOR LEARNINGS OR POINTS I WANTED TO CALL OUT
User Research is very important
I learned that User Research really helps with the design process. Gaining insight into what the user specifically needs, helps with deciding what to create, and you don't end up designing in the dark.
Food Photography is critical
When it comes to a restaurant site, the food photos are really everything. The restaurant can be informal, but the photos HAVE to be done with a professional camera or else the quality of the site will be diminished, and you may lose customers.
PDF Menu
I decided to have the menu as a PDF for this project because I believe El Agave has their menu set up this way, and I wanted the process of updating the website to be easy on the staff's end. I also wanted to see the differences between my Frank & Betsie's setup (menu written out) vs. my El Agave setup. Which menu set up is actually better?