Wok N Roll
Responsive web design for local
Chinese restaurant.
Project Overview
Wok N Roll is a local favorite of Mclean, VA and they have specialized in serving Chinese cuisine since 1992. For a business well known for their delivery and take-out options, it’s important to be accessible to their customers. Driven by the pandemic, apps that offer food delivery services have increased in popularity. These services take a percentage of the profits taking away money from Chinese restaurants who already have their own delivery services available.
Problem
Wok N Roll has limited accessibility to their customers.
Solution
Modernizing their brand and creating a responsive website.
Market Research
I’m very familiar with ordering Chinese cuisine for delivery, but I had little knowledge about the industry. To gain a better understanding of the scale and demographics of the Chinese restaurant industry, I started my research by looking up qualitative data on the viability of the product.
Competitive Analysis
With a better understanding of how viable the product can be in the market, I looked into direct and indirect competitors of Wok N Roll. I compared the strengths and weaknesses of each restaurant in order to be familiar with how others are creating solutions and finding inspiration to use later in my design. My findings showed that overall the franchise restaurants offer more services and features on their site.
Interviews
With a better understanding of what and who the typical users, I conducted interviews with 6 participants to how and why they would use the Wok N Roll website. With the business being local, I was fortunate enough to find participants in my network who were customers. I asked open ended questions with the objective of finding their motivations and pain points.
Tell me about your last time ordering from Wok N Roll
Tell me about your experience using the Wok N Roll website
Empathy Map Findings
Once I collected enough data from the interviews, I had to transcribe my findings into sticky notes. To do this, I used Maze so I could move around notes to find patterns.
Persona
I created a persona that represented the needs, frustrations, and goals of the users so that I could easily refer back to key points about the user when making design decisions.
POV Statement and HMW Questions
Brainstorming
Project Goals
Defining the shared goals was important in order to ensure that both the business and user’s goals are met in the design.
Sitemap
Task Flow
Once I had the information architecture of the site, I was able to use it as a guide to create a task flow. I referred back to the user’s needs to create 3 tasks which I could use to create the prototype. and It was necessary to establish the sitemap and writing down the tasks before creating the task flow so that I could visualize the path and the pages that was necessary to be completed.
Sketches
Using the task flow to determine what pages were necessary for the design, I started with quick sketches with inspiration from dribbble and other restaurant websites. I completed this exercise to brainstorm the different ways I could design the page including the features.
Homepage
Restaurant Information
Menu
Online Order Menu
Add to Order
Checkout
Responsive Wireframes
To show the responsiveness of the design, I created a tablet and mobile version for the homepage and the checkout screen. I used bootstrap as a framework for the responsive wireframes as well as the high-fidelity wireframes in the next phase.
Usability Test
TEST METHODOLOGY
In-Person : I will be facilitating an in-person test using the Think Aloud Method
PARTICIPANTS
6 participants (22-47)
TASKS
Each participant had to verbalize their thoughts and complete 4 tasks that were based on the task flow.
Task #1: Find the lunch specials on the website
Task #2: Start an online delivery order for 1 Crab Rangoon.
Task #3: Add an order of Triple Delight with a customization.
Task #4: Complete your order as a guest and purchase using a credit card.
Affinity Map
Minimize scrolling so users can easily find what they are looking for
Adding more content to the homepage
Homepage
Menu
About
Online Ordering
UI Kit
Reflection
Through this project, I realized the importance of research and collecting valuable data. Having a good foundation is key to a successful project. As I completed my research, I struggled with finding and prioritizing insights and with the guidance of my mentor as well as participating in group critiques, I was able to move forward with my project. Though it was difficult, I really enjoyed this project because it led me to a better understanding of design thinking.
Next Steps
I really enjoyed the challenge of creating a responsive design. With more time, I would have completed the mobile and tablet version. As for the desktop version, I would conduct a final user test with the iterations to ensure the changes led to improvements. Once that is complete, It would be ready for handoff.