PROJECT OVERVIEW

Green Room

The project’s purpose was create a responsive Web design for a local business. The workflow included research, interviews, design, and usability testing. This project was developed as a part of Designlab’s UX Bootcamp.

The Green Room is a bar located in downtown Placerville, California. The restaurant is a small local business, and they promote themselves as “Placerville’s Finest Music Venue”. They host all-ages events and 21+ events at their venue. They offer a large selection of different types of music, such as country, jazz, folk, rock, drag nights, and cover bands. The venue is a small location with limited indoor tables, so they want people to buy tickets in advance so they can control how many people attend the shows.

GR Header

Strategy planning

Role

User Researcher

Visual Designer

Branding Designer

Interactive Designer

Tool

Figma

Adobe Illustrator

Duration

4 Weeks

Problem

The Green Room is a bar that hosts live performances. The website heavily promotes the live performances by featuring a calendar, hosting live streams, and promoting a club where you will get notified about the latest up-coming events. The website also has a ticket reservation system, so customers may buy their tickets and book a table far in advance. The website does a good job at promoting the events. But, the website barely mentions the bar. The food service is vague, and the website only briefly mentions that they serve local beer, wine, and cocktails. The website should promote its bar because their food service is a major part of their overall service. The Green Room needs to show off its food in order to compete with the other late night bars and restaurants in the area.

Solution

The solution is to redesign the website so they can effectively promote their bar and food service. The Green Room’s main features are the live events and the bar. As of now, they barely promote the bar. The website says they offer local wines, cocktails, and craft beer, but they don’t specifically say what they have to offer.  However, my hypothesis is that most customers base their decision to visit a restaurant primarily on the restaurant’s menu. It is important The Green Room brings more attention to their food service in order to attract more customers. This online menu feature will be simple and accessible, so the restaurant can change the menu as often as they want.

Goal

The project’s goal is to modify the website, in order to bring more attention to the food service. The website will have a menu and online food ordering system in place, enabling customers to order curbside pickup meals. The goal is to promote the restaurant’s food service, in order to compete with the other bars in the area.

Research Stage

The research stage closely examines and test different solutions for the problem. This stage explores the current trends in restaurants, online food ordering systems, the standard and practices of food safety laws in America, and interviews to help define user’s needs and point points. The research findings will be used to help develops and tests some possible solutions for the problem.

Competitive Analysis

The competitive analysis looks at the local competitive restaurants in the area. It is important to understand what are customers’ expectations and priorities are in regards with restaurants websites, so we can answer the question; what do customers want to know about The Green Room’s food service?

Interviews

The participants are adults, ranging from 25 to 60 years, who are familiar with researching restaurants and placing online orders. Some participants are people who have one or two types of allergies. It is important to design with accessibility as part of the foundation for the overall design. 

Key Takeaways From The Interviews

Regarding restaurant websites, the participants say they expect to see a menu, food photos, food prices, an option to order directly on the website, hours of operation, restaurant’s location, and customer service number.

Most participants say they will not go to a restaurant if they don’t have an online menu. They want to get a sense of the food, prices, and the overall food service before they decide to go to a restaurant.

Participants dislike restaurant websites that have outdated information and disorganized clutter menus. They want menus are that simple, accurate, and easy to read.

Participants with food allergies greatly value restaurants that are transparent about their food services. They feel safe going to restaurants that clearly label the food allergies on the menu.

Affinity Mapping

User Personas

I divided the participants into two groups: people who research restaurants ahead of time, so they can make an informed decision, and people who want to see the basic information, i.e. cuisine and price, to see if anything appeals to them.

The first persona represents someone who needs to look up information in order to make sure that they can safely eat something at the restaurant. They enjoy taking some extra time to research the restaurant and value restaurants that are transparent about their food service.

The second persona is someone who wants to be able to quickly scan through a restaurant’s website and menu. They appreciates seeing dietary information, but that isn’t an important part of his decision. They mainly wants to know if the restaurant serves good food at a decent price range.

Persona 1:  Wants In-depth Informatioin

Persona 2: Mainly Cares About Basic Information

Research POVs

1. I’d like to explore ways to help people who have dietary allergies find dietary information on the menu because it’s important that all customers feel safe about ordering a dish or drink. 

2. I’d like to explore ways to help mobile users navigate the website because most customers use their phone and they feel frustrated if they cannot easily navigate a website on their mobile device.

3. I’d like to explore ways to help users find the menu on the website because most customers primarily base their decision to go to a restaurant if the menu appeals to them.

Research HMW

1. How might we make first-time users feel confident that they can quickly find the menu on the website?

2. How might we promote the menu without making the website feel too cluttered or disorganized?

3. How might we make the menu accessible for desktop users and mobile users?

According to the research findings, most participants expect to see a menu on a restaurant website. They consider food descriptions, photos, and prices to be basic information for menu. If they can’t find a menu on the website, then they are far less motivated to visit the restaurant. Some participants explain that they would like to see food allergy and nutritional information, but they don’t consider that information to be a priority. While, participants with food allergies consider food allergy and nutritional information to be important factors in their decision to go to a restaurant.

The first user flow shows how users can select a meal period and find nutritional information on the menu. The second user flow shows how users can use a filter to only include gluten-free dishes on the menu. The last user flow shows how users can place a mobile order on the website.

User Flows

Research Wrap-Up

The research findings showed the importance of including a menu and online ordering feature on the website. All restaurants in the competitive analysis included a menu on their website. The participants from the interviews expect to see a menu on a restaurant’s website. Most importantly, majority of the participants explained they would feel far less motivated to go to a restaurant if they couldn’t find a menu on their website. 

There is a level of expectation for menus and online ordering system. The menu must be desktop and friendly, must have accurate information, include visually appealing photos, and it must be transparent about food prices and nutritional information. It is important that the menu clearly labels the food allergy and nutritional information in order to ensure that all customers can safely order a meal. While, the online order system must be simple, convenient, easy to use, and accommodating to the customers’ needs. 

The design stage focuses on developing a menu and online ordering system that is simple, easy to navigate, visually appealing, and inclusive to everyone’s dietary needs. 

Design Stage

The Green Room’s aesthetics heavily inspired the menu design. The Green Room’s color palette is black, green, and white, with a high key value contrast; this color palette invokes the aesthetics of band performing in a small private venue. This is a place where people can relax, have a nice meal, and enjoy a show. It’s important that the menu design also reflects the restaurant’s aesthetics and brand identity. 

UI Kit

Screenshot 2024-04-20 at 5.54.32 PM

Detailed Specs Covering Each Page

Mid Fidelity Wireframes

The mid fidelity wireframes largely focus on the menu and the ordering process. This is an interactive menu, in which users can select a meal period, lunch or dinner, users add dishes to the order basket, view nutritional information for every single dish, and users can select an allergy filter to exclude certain dishes.

The allergy filter feature is a concept that my mentor suggested to me, he recommended creating a filter feature so users could quickly include or exclude dishes based on the allergy for example, someone with a gluten allergy can select the “gluten allergy” button, and the menu will only show gluten-free dishes. This filter feature could address the allergy transparency need. 

After I created the wireframes, I sought out feedback from my mentor, peers, and participants. The majority thought the wireframes showed good potential. Many like the allergy filter feature because they thought it was a simple and convenient way to accommodate for people’s dietary needs. They also like the ordering process because it felt modern, simple, and it met their expectation of a professional restaurant ordering system. But there were some issues with the wireframes. First, the elements were too large. Which means it would be difficult to view the menu on mobile screens. Second, there is too much negative space between elements, so the design wasn’t fully utilizing the space in the layout. Lastly, the allergy filter needed to be relabeled. A peer explained that most people look up “gluten-free” not “gluten allergy”, so she recommended changing the labels to make it more clear to users. 

The wireframes need a large update on the design composition in order to be viewed on desktop and mobile screens. 

Green Room Mid Fidelity Wireframes​

The mid fidelity wireframes look over the menu, allergy filters, close up page of a dish, and the order details page.

Mid Fidelity Wireframes Close Up

High Fidelity Wireframes

The high fidelity wireframes showcases the menu’s new redesign, additional filters, an order history page, and more details about the ordering process. 

As mentioned in the last section, the menu needed a redesign so it could be responsive on desktop and mobile screens. I drastically scaled down the elements, scaled down the text, and reduced the negative space in between elements. I tested the design with a group, and the participants were able to easily navigate the design on desktop and mobile screens.

The filter feature also received a large update. In between the mid fidelity and high fidelity development, I got feedback from some peers about the filters. They liked the concept, but they wanted to see the filters include vegan, vegetarian, and healthy options; they explained that some people have dietary issues because of religious or personal reasons, so the menu should also be inclusive of their needs. The new filters include vegan, vegetarian, low sodium, low fat, low calorie, dairy-free, gluten-free, tree nut-free, peanut-free, soy-free, corn-free, fish-free, and shellfish-free. Users can also view dishes’ nutritional content to learn more about the ingredients in the dish. This is just in case, user who didn’t use the filter still have a chance to learn about the dish’s ingredients. It is important to ensure that everyone can feel safe and fully informed about their decision to place a meal order.

The order process was expanded. The high fidelity wireframes showcase all the options available in the ordering process. Users can decide if they want to dine inside the restaurant, pickup their meal, or have their meal delivered to them. Users can decide if they want their meal “ASAP” or if they want to pick up at a later time. The people who select “later” can choose the day and time for their meal pick up. Lastly, users can enter a coupon code for their meal. The final page shows the order confirmation and order details. Users who have ordered from The Green Room can also view their past orders on the order history page. This will allow users to quickly reordered their past favorite meals. 

Overall, it was important that the menu was accessible, easy to navigate, visually appealing, and accommodating to the users’ needs. 

The high fidelity wireframes look over the menu, allergy filters, a close up page of a dish, order history page, order details page, order options, and order confirmation page.

Prototype

The prototype allows participants to fully explore the menu and the ordering process. Participant can select any of the filters and explore the menu. For the prototyping test, the participants were instructed to explore the menu, order the Ahi Tuna bowl, and explore the options on the order page. Overall, the participants praised the menu’s design and the ordering process. Most participants enjoyed the food filter feature; they thought it was simple, practical, and very convenient for people with dietary needs. In conclusion, the prototype test showed that the design successfully addressed the users’ needs and frustrations.  

Prototype Test Link

Veiw Prototype Test

Conclusion

In the end, I learned a lot about how to design online menus and online ordering features for a restaurant. During this project, I also learned how to include accessibility earlier in the project’s development timeline. Ever since I did the interviews with the participants with food allergies, I kept thinking about different ways to make the menu accessible to everyone. The big key takeaway is that it is very important to keep accessibility in mind while developing a solution to a problem. If the solution isn’t accessible, then it is not a valuable solution to the problem. 

Overall, this project helped me learn how to effectively identify users needs and frustrations, how to design with accessibility, and how to overcome certain technical difficulties during the project’s development. I’ve gained a lot of experience while working on this project, and I am grateful that I had this opportunity to work on this bootcamp project. 

Conclusion

In the end, I learned a lot about how to design online menus and online ordering features for a restaurant. During this project, I also learned how to include accessibility earlier in the project’s development timeline. Ever since I did the interviews with the participants with food allergies, I kept thinking about different ways to make the menu accessible to everyone. The big key takeaway is that it is very important to keep accessibility in mind while developing a solution to a problem. If the solution isn’t accessible, then it is not a valuable solution to the problem. 

 

Overall, this project helped me learn how to effectively identify users needs and frustrations, how to design with accessibility, and how to overcome certain technical difficulties during the project’s development. I’ve gained a lot of experience while working on this project, and I am grateful that I had this opportunity to work on this bootcamp project. 

View more case studies

Restful Support

View

Barnes & Noble

View

Academy Hive

View

Want to connect?