Project overview
Design a responsive website for Cambodian restaurants to cope with the online orders for delivery and pickup demands.
Project duration: November 2021 - January 2022
My role and responsibilities: conduct research, design concept, paper and digital wireframe, and high-fidelity prototypes.
------------------------------------------------------------------
Restaurant concept
Restaurant name & URL
Champa Khmer and champakhmer.com
We aim to bring Cambodian taste and feel to the San Francisco neighborhood with affordable pricing and a fun experience.
Food & drink
Cambodian foods with homemade drinks and desserts with options for vegetarian and vegan.
Serving: launch, dinner, desserts, and drinks.
Pricing: $12+ for lunch and from $40+ for dinner serving.
Location
Champa Khmer will be serving in San Francisco in the Hayes Valley neighborhood. The location is close to one of the famous tourist destinations (The Pink Ladies and park). It is a highly populated area with residential buildings.
Main target audience
Since the location has a high population of professionals and families of all ages in the city. Th restaurant’s target audience will be the following.
- Young professionals
- Families and young kids (ages 8 - 16)
- Business people
- Young parents
- Seniors
Elevator pitch
Bring a Cambodian-authenticated taste to San Francisco with options for lunch and dinner. We are committed to sourcing our ingredients from local markets whenever possible.
------------------------------------------------------------------
Strategy
Target audience
The website focus on the following target audiences:
Roles
Order online for pickup or delivery
Make a reservation online either for dining in or catering
Interest in trying out new things or tastes
Demographics
All genders
Millennials and Generation Z with tech-savvy
Age: 13 to 65
Location: San Francisco, CA
Psychographics
Personalities & attitudes: who has a busy schedule and no time to cook. Someone who likes to treat family or others to a nice meal on special and non-special occasions.
Values: to support local businesses and immigrants
Lifestyle: go out and try new things in neighborhoods.
Location: San Francisco, CA
Values: to support local businesses and immigrants
Lifestyle: go out and try new things in neighborhoods.
Location: San Francisco, CA
Personas
Jennifer Wang, 28, Senior Auditor
- Busy with work at the end of the year and early new year.
- Love to hang out with friends and family on weekends.
- Feeling depressed because of the pandemic.
- Feeling sorry because some businesses are closing its door.
- Can't wait to go back to normality and try different food.
- Busy with work at the end of the year and early new year.
- Love to hang out with friends and family on weekends.
- Feeling depressed because of the pandemic.
- Feeling sorry because some businesses are closing its door.
- Can't wait to go back to normality and try different food.
Mark Gordan, 25, Junior Banker
- Land a job after graduating from college.
- Needs to meet clients for lunch or dinner, so hopes to find an authenticated local restaurant.
- Likes to try different tastes and support local businesses.
- Has been to Cambodia and hopes to find a Cambodian restaurant in SF.
- Land a job after graduating from college.
- Needs to meet clients for lunch or dinner, so hopes to find an authenticated local restaurant.
- Likes to try different tastes and support local businesses.
- Has been to Cambodia and hopes to find a Cambodian restaurant in SF.
Jay Park, 19, International student
- Studies business at SF State University.
- Loves to explore the city on weekends.
- Likes to try new things.
- Never tried Cambodian food before.
- Prefer local food to restaurant chains.
User needs
The website needs to enable the users to:
- Find out if Champa Khmer accepts online orders for delivery or pickup
- Menu with pictures and description
- Restaurant opening hours, reservations, and catering
- To learn more about the restaurant story
- Contact details
Client needs
The website needs to enable the client to:
- Provide a website that allows users to place an online order for pickup or delivery
- Provide a system for order customization
- Provide a reservation online for dine-in and catering
- Provide information on opening hours
- Provide information on the restaurant menu
- Provide a system for order customization
- Provide a reservation online for dine-in and catering
- Provide information on opening hours
- Provide information on the restaurant menu
------------------------------------------------------------------
Outline of scope
Content requirements
"The user will be looking for..."
- Menu with pictures and a short description
- Product offering: lunch and dinner
- What's new on the menu or special
- Information about the business
Functionality requirements
"The user will be able to..."
- Add items to the cart and edit it
- Place a note for special instructions to meet the user's diet
- Checkout via credit card or virtual wallet
- Request additional items like napkins or utensils
- Select the date and time to complete the reservation
- Place a note for special instructions to meet the user's diet
- Checkout via credit card or virtual wallet
- Request additional items like napkins or utensils
- Select the date and time to complete the reservation
------------------------------------------------------------------
Sitemap
------------------------------------------------------------------
Wireframe – Checkout Process + Homepage
------------------------------------------------------------------
Moodboard
------------------------------------------------------------------
Mockups
Desktop and mobile mockups
------------------------------------------------------------------
Prototype
Click here to view the desktop version prototype.
------------------------------------------------------------------
Going forward
Takeaway
The Pandemic has changed the way people dine out. Having the option to place an order for pickup and delivery is expected by the users.
Most restaurants can't afford to have a mobile application. More and more people access the internet through their smartphones. Therefore, responsive design is crucial.
Next steps
Conduct usability studies to get feedback on the high-fidelity prototype to determine whether the design address the users' pain points.
Design the mobile version of the restaurant website and iterate on the design based on feedback received.
------------------------------------------------------------------
Thank you!
