One2Snacks
A look into responsive web design
Academic Project
Sector
Local Business, Design
Role
Solo Designer
Tools Used
Figma
Project Timeline
4 Weeks
Background
-
One2Snacks is a local mom and pop restaurant specializing in Malaysian cuisine
Bringing the Malaysian hawker experience to the GTA
A hawker is someone who sells food from a stall, often in open settings
This is actually where the best food is found
-
One2Snacks doesn’t currently have a website
As a result, customers often have to refer to images of their menu from Google Reviews or Yelp
They’re also very popular, and because they’re a small restaurant they can only serve so many people
They often require customers to call or email a day ahead to secure their orders
Very hard to reach them by phone because of how busy they are
-
Design a responsive website where customers can easily access information
Also have the opportunity to design an online ordering feature to reduce call volume, increase sales by reducing missed calls, and the reduce inconvenience on customers
Business Goal
Share their passion for Malaysian food
User Goal
Understand the dishes on the menu
Interviews
Demographic
3 Females
Ages 24-27
Some of the Interview Questions
When you were on the site, what kind of information were you looking for? Where did you go within the site to find it?
Can you recall the last time you had an enjoyable/successful visit, and what made it so?
Do you have experience placing online orders? If so, can you walk me through your most recent experience? Was there anything that delighted you? Were there any frustrations you dealt with?
What Participants Mentioned
“Being able to look at prices and photos of the food especially if I haven’t been there before, or it’s a cuisine I’m not familiar with.”
— Participant #3
“I’ll use Google to look at ratings and photos to make a judgment call, and if I’m still unsure I’ll turn to Yelp.”
— Participant #1
Key Takeaways
Keeping Customers Informed
All participants valued being able to understand the dishes being offered, along with the prices of each one. They want to see pictures, and are even happier when there’s a brief description of the item. This is especially important for them if they’re unfamiliar with the cuisine.
Word of Mouth
All participants do further research into restaurants through Yelp, Google, and occasionally Instagram. They do this to figure out what other people are saying about the food, and to see more pictures of the dishes.
Online Ordering
Participant #1 made an interesting point about how she liked that the only info she was required to fill to place the order, was her phone number. I kept this in mind when designing the website to keep the process as short as possible, while ensuring all required info was being provided.
Creating our Persona
Moving forward, we kept the persona at the front of our design decisions. How can we design the site so that Melissa’s need are met, and her frustrations are being taken into account?
Feature Roadmap
With Melissa in mind, the following features were identified to help her meet her goals.
Sitemap
The next step was to think about what pages the website was going to need. Luckily, restaurant sites like this aren’t too complicated in terms of content. Below I mentioned the pages along with some modals that would be required.
Interaction Design
The following flows were created to outline the online ordering process a user would go through.
Low Fidelity Wireframes
Utilizing design thinking and what we learned from interviews, I designed the wireframes.
Since all participants did further research through Google Reviews and Yelp, I provided links to each on the homepage. I also included quotes from each resource praising the business to further entice customers.
Transparency was key when designing the site from restrictions, to providing all necessary information regarding the menu. I was working off of One2Snacks’ current menu, so I didn’t play around with their categories. Having said that, it can be very confusing. What does “Hawkers Delight” mean? Why is there a category for “Also Available”? In an attempt to provide further clarification, a brief description is listed underneath each category.
Visual Design
For the visuals, I worked off of their current logo and color palette. I also utilized their takeout menu for its neutrals.
The purpose of this case study was to design a responsive website. To test for this, I designed One2Snacks’ site for desktop as well as mobile.
If you want to check out these deliverables in detail, you can find them here.
Usability Testing & Iterations
Test Objectives
Find out if users are able to view the menu.
Determine if they’re able to place an online pre-order.
Find out if they’re able to complete these tasks on the mobile version as well.
Learn if users understand the dishes on the menu.
Tasks
Find the menu, and take a look at your options.
Add the items to your order and proceed to checkout.
Enter the required information, and place your order.
I asked the participants to go through the same tasks (with the exception of adding a dessert) on the mobile version to test the responsiveness
Want to try out the prototype for yourself?
“Having seen your desktop one, I’m like this echoes your desktop version really closely so that feels nice because there’s a lot of continuity.”
— Participant #4
“I think there’s a lot of information…I wonder if there’s a more succinct way to say this.”
— Participant #1 & #4
Results
6/6 Participants completed all tasks without errors
All participants felt the ordering process was easy & straightforward
All participants were very satisfied with the amount of info that was provided.
4/6 Participants were confused about the category “Also Available”. They would’ve liked to see this included under one of the other categories. So this may be something the business could consider changing on their menu.
Participant 4 mentioned possibly changing the wording of “Place Order” to “Schedule Pickup”, because placing an order feels like you’re adding a payment method.
Conclusions
While I wasn’t able to get in touch with the business to work with them directly, it was fun to think about ways that I could help them improve. This project involved more consideration regarding the business’ limitations and how this would affect the users.
As a next step, it’d be helpful for the menu to be revised to provide more clarity (but that would be the business’ decision of course).
I’m most proud of the work I put in to create a more open decision making process for usability testing. In previous case studies, I designed for one particular path. This time around I gave participants options to test the visibility and understanding of menu icons. Doing so ensured that the tasks were not leading participants to the answers, which is vital when testing the usability of a product.