Cafe EZ

A redesign of a local restaurant’s website with a new app.

Overview

Cafe EZ is a local family-owned restaurant in Howard County, Maryland. It has two locations, the second one only opened in February 2022. Their menu offers a variety of dishes, from your traditional breakfast to Korean American fusion dishes. However, customers have issues with navigating the menu on mobile devices, so my goal is to create a new application and redesign their website.  

TIMELINE
May 2022 to July 2022

ROLE
UX Designer

TOOLS
Figma, Xd, Illustrator, Photoshop

Problems

  • The menu is not mobile-friendly, so it affects readability.

  • The menu does not provide allergen information.

  • There are no images showing the dishes.

  • There is no option to place an order on the website.

Once you click on Menu, it takes you to this page with a Google Docs link.

The link takes you to this view.

Personas

After knowing the problems of the existing website, I created two personas to better understand the main user group. Please meet Ian and Jennifer!

Low-Fidelity Wireframes

The first version of low-fidelity wireframes allowed me to run usability tests and collected feedback from the participants. Four out of five participants had no idea how to start their first order and had trouble adding an item to the cart. Ultimately, I had to fix the home screen, so I took their suggestion by moving “Start My First Order” along with the three buttons to the top. Another priority was to find a new way for users to add items. I removed the plus signs completely to resolve the issue. The revisions are shown below.

High-Fidelity Wireframes

The second version of low-fidelity wireframes helped me move toward this stage. I finally began making decisions on the style of the application. I wanted to stay true to Café EZ’s branding, which was to incorporate black and white.

Prototype

During the usability study of the high-fidelity prototype, participants were asked to add a vegetarian dish to their cart and finish the takeout process. However, the study revealed a couple of challenges that they faced during the task.

  • Pain point: participants could not identify the food allergen icons
    Solution:     add a key with icons at the top of each category

  • Pain point: participants were not sure if the item was in their cart
    Solution: add an icon with a number to indicate the number of items in the cart

After these pain points were addressed, we have an interactive application prototype. Please feel free to place an order 🙂

Responsive Web Designs

Another goal of this project was to redesign Café EZ’s website, so I made responsive designs for the home page. I included popular items and their photos to address customers’ needs. Now customers could place their orders easily online by clicking on “Order Now.”

Reflection

This was my first UX design project, which allowed me to learn the process from beginning to end. Although I use various applications and browse different websites daily, I never knew the work a UX designer has put into order to create a final product. During testing, my participants changed my perspective and helped me improve user experience. I specifically remembered that I once assumed everyone would identify a vegetarian icon easily with a leaf and green color, but this was not the case. This project taught me the importance of usability testing.

Next Steps

I want to present this project to the owner of Café EZ and offer to redesign their website. They may not be able to offer people online orders, but I want to set up a menu page that would improve their current user experience on mobile devices. As a graphic designer and a photographer, I’m also happy to redesign their menu and take photos of their dishes.