Marathon Café Case Study
Jonathan Chiang
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
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
Screen design displayed in a mockup
Screen design displayed in a mockup
Screen design displayed in a mockup
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.
Like this project
Posted Oct 1, 2023
A mobile-responsive website for my local café that allows non-chinese speakers to order their favorite dishes without barrier language problems
Likes
0
Views
12
