Project Background
I didn't get a single frozen dumpling at home for 5 years. Just because I had too too many dumplings in high school and I got tired of it.
BUT
When the pandemic hit and I have to cook 3 meals a day at home, frozen dumplings is now my best buddy. It's my to-go food when I'm lazy to cook that day.
I wanted to know...
Why do customers get frozen dumplings?
Has the pandemic changed their home cooking?
Before diving deep into the design process, I need a solid understanding about the business. I need to make sure that my design will align with the business goals and limitations.
Yummy Dumpling currently has a Facebook page. It also has partnerships with food delivery platforms, DoorDash and SkipTheDishes. However, they don't have a website.
Users need to flip through posts and photos to find information such as products menu and price. They have no info on ingredients, storing and cooking instructions.
They have no photos in the text-based menu, which makes it less attractive as customers cannot associate with how the frozen dumplings look like.
On DoorDash & SkipTheDishes, the same photo is used for different dumplings. It is confusing and serves no visual clue about the difference between each dumpling product.
I conducted a competitive analysis with 4 competitors who already have a website and operates in the same area.
I wanted to know why customers buy frozen dumplings. I dived in to ask questions about their eating & cooking habits, their grocery shopping routine, and cooking difficulties. I also asked why they visit a food website and their needs and pain points. I interviewed 5 participants in persons and learned the following:
I created a persona, Catherine, who doesn't have much time to cook for lunch especially when working from home. It ties back to the user interview and aligns with the ideal customer Yummy Dumpling wants to reach.
How might we design a website so that customers can find information about the business and products easily?
I wanted to make sure that the structure and nav bar is simple and clear. This is especially important because my interview results shows that users browse a food website to find information such as menu and location. I conducted open card sorting with 9 participants in person and created a sitemap based on the result.
I worked on the task of checking out products menu. Currently, users have to flip through posts and photos on Facebook and jump to different platforms like Google Map for more information.
My proposed new flow simplifies the process by having a website that includes all the information needed in one place.
One of the design challenges was to make it clear that Yummy Dumpling is a store that sells frozen dumplings, not a restaurant, and dumplings are not sold cooked. How might we inform customers in an elegant way without being too intrusive?
Another design challenge was to balance user wants and business & technical limits.
I did different sketches and then wireframes to ideate the structure of the website. The lo-fi wireframes allowed me to get quick feedback on the structure before diving into the UI.
After showing the lo-fi wireframes to the owners, we talked about styles and branding of Yummy Dumpling. At first, the owners didn't know what exactly they like, so I showed them different examples on Pinterest. Seeing visuals made our discussion easier as they would say if they like or dislike this.
We came to a conclusion that the website style would be:
Food photography plays a vital role in a food business. It makes a first impression and a key to determine if customers want to try it or not. Since I also do photography (checkout on Instagram or portfolio), we did 3 photo sessions along with the inspiration photo boards I made below.
Dumplings look the same on the outside, but have different filling. Their current dumpling packaging also look the same.
How can we take attractive photos that allow customers to know the product difference quickly?
Dumplings use the same photos which is confusing. Customers cannot tell what flavour this dumpling is.
The ingredients serve as quick visual clues for customers to understand what each dumpling product.
The current logo is outdated, and words are not legible when sized for smaller applications. I redesigned the logo as it is an essential part of the rebranding of Yummy Dumpling. Keywords of the new logo are modern, handmade, family, and friendly.
.png)
It’s time to test my solution. I recruited 6 participants for usability testing. I wanted to test the easiness of finding the info about dumplings, location, and contact and to understand if contents are clear and easy. They were asked to complete 3 tasks:
1. Find the location & operating hours
2. Find a specific product
3. Order on delivery platforms
Result
83%
of participants navigated to contact page when asked to find store info
100%
successful rate of finding a specific product
83%
of participants knew that the dumplings come frozen (even through delivery platforms)
What participants liked
1. CTA on product detail screen
When asked to order on SkiptheDishes, participants looked for a CTA button on the product detail screen.
The ah-ha moment
My assumption
It turns out that...
Users would expect the cta button to bring them to the corresponding dumpling section on SkipTheDishes or DoorDash (which it’s technically difficult to do so). Therefore, I didn't add a cta button.
Participants were good with the button linked to the business page on the DoorDash or SkiptheDishes.
2. Product card
Participants were confused by the 'from' text, thinking that there could be customization with the dumplings. Also, they didn't need to see the dumpling category text as the title of the section already showed it.
3. Contact
When asked to find the location and operating hours of the business, most participants navigated to the contact page. However, their eyes were drawn by the form at first. They wanted a more obvious & eye-catching information.
Things I considered:
Expand online presence
A responsive website benefits the business to reach a larger customer base outside of Facebook. It also enhances branding and helps build trust, which can drive sales.
More attractive product presentation
The product page shows dumplings by categories, with photos that display their ingredients for quick visual clue.
contact
dumpling details
Find info easily
From location to operating hours to product details, users can find information with ease.
What's special about this business
Allow customers to understand its unique offering and how it differentiates from competitors.
"We really like the design. It shows our dumplings and story in a beautiful and elegant way."
— Yummy Dumpling owners
• Walk through the design with owners
• Organize and share files in Google Drive (scripts, style guide, media)
• I'll help them build the design on Webflow, which is expected to launch in 2023 Jan.
To make the whole experience more holistic, we decided to print a QR code (linked to website) on the frozen dumpling packaging so that customers can see more details like how to store and cooking instructions (right now, it relies on verbal communication).
current packaging
• number of users per month
• number of new users per month
• average session per user
• traffic source
• how many times the QR code is scanned
A second round of testing to test the easiness of finding contact info and ordering, and if 100% of participants know that the business sells frozen dumplings (instead of a restaurant).
A more thorough client onboarding with expected timeline and process details to align expectations
• Working with constraints: there're always an ideal design for users, but that might not be feasible with business. Learning to balance user needs and business goals is important.
• Communication with non-designers: it's harder for them to imagine by words and descriptions, so having visuals helped a lot with the communication. Sometimes, clients might not exactly know what they want, but they do know what they don't like. I learned to do elimination and to ask questions about they liked or disliked about it.
• Assumptions can be wrong, and it's important to validate assumptions in user testing. I learned to pay more attention if my design decision is based on research or assumptions.
courtneyywong@gmail.com
2022 © Courtney Wong
