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). The neighbor is a highly populated area that hosts all the tech and professional workers.
Main target audience
Since the location has a high population of professionals and families of all ages to the city. A restaurant’s target audience will be the following:
- Young professionals
- Families and young kids (age 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
Personality & attitudes: who are busy schedule and no time to cook, someone who likes to treat family or others to a nice meal on both special occasions and non-special occasions.
-Values: to support local businesses and immigrants
Lifestyle: go out and try new things in neighborhoods.
Location: San Francisco, CA
Personas
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 website that allow users to place 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 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 instruction to meet the user's diet
- Checkout via credit card or virtual wallet
- Request additional items like  napkins or utensils or sources
- Select the date and time to complete the reservation
Sitemap
Wireframe – Checkout Process + Homepage
Moodboard
Mockups
Prototype
Click here to view desktop version prototype.
Going forward
Takeaway
Pandemic has changed the way people dine out. Having an option to place an order for pickup and delivery is expected by the users of the restaurant.

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 client's needs are met.
Design the mobile version of the restaurant website and iterate on the design based on feedback received.

You may also like

Back to Top