Marathon Café Case Study

UX Designer

Product Designer

UI Designer

Figma

Maze

A responsive web application created for a local café in my neighborhood

Problem

Non Chinese restaurant goers are alienated by the language barrier

Marathon Cafe's regular customers are mostly older Chinese folks from the area, as the owners primarily speak Chinese and not much English. The owners want to expand their customer base by attracting younger people and people that don't speak Chinese.

Research Methodologies

Competitive Analysis

I explored the strengths and weaknesses of 4 major Hong Kong-style cafes within New York City to identify opportunities and threats to look out for. The 4 competitors I looked at were Hi Tea Bakery & Restaurant, Hong Kong Taste Café, Cha Chan Tang, and Kong Sihk Tong. Many of them had outdated websites and no ability to order online.

Why: research the product landscape and discover any feature gaps to fill in

Marathon Cafe

Surveys Results

Understanding the target audience and their challenges was my top priority. First, I created an online survey using Google Forms and shared it with my friends and cohort mates. In just a few days, I received 15 submissions. I gathered the following insights from my survey results:

User Interview Insights

After analyzing my results, I invited 5 survey participants back to interview more in-depth about their experiences. I had some hypotheses and preconceptions going into the interviews, but I also learned new eye-opening facts that I had never thought of before. Here, I organized my findings into an affinity map, grouped by categories.

Marathon Cafe

User Persona

I wish I could order food without having to call or order in person.

Using my affinity map and user interview insights, I created Jessica Lee, a distinct persona that encompassed many of the qualities of those 5 participants. She loves to try new food in the area, but she doesn't speak other languages besides English and so calling to order lunch can be frustrating.

Image gallery item

User Flow

I mapped out a user flow to illustrate the various paths a user might take when ordering online from Marathon Cafe's website. Users can take different paths based on their signed-in status.

If a user is signed in, they can simply go to their account page and re-order a previous item and checkout without having to add in extra order details again.

Marathon Cafe

Using Figma, I translated my initial sketches into low/mid-fidelity wireframes. This was useful when determining how useful and usable the current design was.

Pages include home, menu, order modal, account, and a gallery

Screen design displayed in a mockup

High Fidelity Wireframes

I utilized the cafes existing font and colors taken from their one logo to create the high-fidelity mockups. I centered my designs on the menu and overall online ordering process.

I took inspiration from existing cafe websites and bubble tea shops.

Next steps

I will continue working with the owners to refine this website until it is ready to be a live, functioning website

I will help the owners market this website on Yelp and other social media platforms to increase engagement and orders processsed on the website

Embracing new technologies can open more opportunities

This project allowed me to work with an actual local business, one that I frequent quite often. I learned about the struggles of the local business and how difficult it is to transition to a digital environment.

Talking with the owners has taught me how they currently integrate Uber Eats into their business model, as well as the pros and cons. Adding another website to the mix was definitely a challenge for them as small business owners, but necessary as to keep up with today's ever changing consumer.