Educating users about the specialty
of contemporary pastry.
Okay Eats is a local pastry shop located in Kuala Lumpur, Malaysia. The brand combines timeless elements from traditional ‘Nyonya Kuih , means traditional cakes in Malaysian language and incorporates them into contemporary pastries. Okay Eats uses a third party ordering platform to sell dessert but the traffic coming in are too low. The brand aims to be more established and is looking into having an official website.
Malaysian traditional pastries are normally affordable and easily bought in roadside stalls and franchise restaurants. The pastry scene is constantly evolving in Malaysia and businesses are trying new recipes to incorporate to traditional desserts. Because Contemporary Nyonya Kuih is a relatively new type of pastry, users struggle to justify the upscale price.
Design an e-commerce pastry website that contains comprehensive information about Okay Eats desserts.
I started looking into the industry landscape and found out that contemporary Nyonya Kuih is a fairly new business. The traditional pastries are often bought at street stalls or Baba Nyonya restaurants. Okay Eats stands out in the market to be one of the first brand that is experimenting with traditional and contemporary desserts in Malaysia.
The pandemic has also highly influenced the F&B industry. Many bakeries have been shifting towards selling pastries and cakes in gift sets. This is due to the strict lockdowns, people are unable to visit their family and friends. Therefore, they purchase food gift sets as a care package to maintain relationships.
It was hard to find a direct competitor because Okay Eats are the first business that specializes in contemporary kuih in Malaysia. Okay Eats have a large following on Instagram and the business rely on the platform to promote their pastries. Therefore, I looked up similar businesses that heavily promotes products on Instagram and reputable local bakeries that has an existing websites.
I reached out to seven followers from Okay Eats instagram account to better understand Okay Eats customer needs, goals and frustrations. During my interview, I discovered surprising and insightful findings that helped my research along the way.
"I would say that it is interesting , I would give it a try . But i would need some convincing. "
"It doesn't show much information of the product, just fancy pictures.. It would be nice to know the thought process behind. Now it looks very gimmicky"
"I think is nice but I will only buy it for my friends and family because I would not spend so much for kuih for myself. It doesn't show much information of the product, just fancy pictures.
Okay Eats are best known for their "branded" social media content with many design elements and carefully laid out photography. However, users are not convinced that the product is focused on the pastries but rather the design elements around it. Therefore, users struggle to validate the quality of the pastries.
Users also mentioned that they would purchase Okay Eats products as gifts for their friends and family due to the attractive outlook of the products. The repetitive discovery of gift sets from my market research, competitor analysis and user interviews, gave me a new focus point in my research moving forward.
With the combination of research, I used affinity mapping and searched for the core problems that I want to solve, largely involved with how users purchase pastries online.
With research in hand, my next step was to create a suitable user persona where we could generalized my target demographic. The result was a persona named Andrea— a young professional that values transparency, quality and convenient.
Now my mission is to help Andrea overcome her problems. In doing so, I used HMW (How Might We) to generate as many ideas as possible. The core problem is not having sufficient information for Andrea to make a purchase but I decided to tackle this by splitting into three categories.
How might we provide sufficient information to validate the price of contemporary pastry?
How might we gain recognition and trust from user?
How might we help users reduce delivery fees?
All ideas seems reasonable but I needed to prioritized solutions that would solve the major problems. Plus, I didn't want to overwhelmed my potential users by overselling the brand with too much information. From there on, I explored different user flows for Andrea and how each task will guide her purchasing a gift set for her friend.
6 participants completed the card sort with an average 7m49s using Optimal Sort. Okay Eats products are all in sets. Therefore it can be complicated for users to differentiate basic sets with gift sets. To give a better understanding to users, I arranged the study with pictures and description to guide users. The aim of cart sorting was to get an idea of what naming or words that are most familiar to users.
After cart sorting, I compared the results with similar websites that sells gift sets to get an idea how brands group their products. I managed to find a middle ground between user's cart sorting while aligning to industry standards. The findings later helped me to develop the sitemap of the website.
I began sketching out several wireframes to find the best solutions for my persona. After sketching low-fidelity wireframes, I selected the ones that best comply with my feature roadmap while keeping my user flow in mind. The most important screens are the homepage and product page because it leaves the first and last impression for users before making payment.
Contemporary kuih is a relatively new market and customers are still unsure about the idea of this particular dessert. A short description of the concept and thought process can educate users.
Providing a clear description of the each dessert justifies the price difference between a traditional kuih and contemporary kuih. This helps user to understand the content of each pastry.
Easily accessible FAQs
Prioritizing the common questions asked during user interviews. Addressing these points in a simple format -icon and short text allow users to quickly assess whether an answer applies to their particular situation and provide clear actions to get started with a solution.
Delivery Info Indication
Delivery fees highly influence the decision of making a purchase. Okay Eats actually offer free delivery on orders over RM60 but it not widely marketed on their third party platform. The platform also does not allow self pick-up option which Okay Eats have promoted on social media as well.
Indicating free delivery/self pick-up option on homepage and product page might capture user's attention and allow user to browse products without worrying about delivery fees.
Using the mid-fidelity prototype, I conducted usability testing on 5 participants. Overall experience was smooth with successful checkouts. Most feedbacks were found in check-out page where users felt that more information should be presented.
It was a good step to get feedbacks as early as possible to prevent heavy changes during high-fidelity wireframing. After revising, I proceeded to build the UI Kit.
The existing logo and branding for Okay Eats remains strong. The vibrant and saturated colors are challenging as I was developing the UI elements. I always thought that I had to stick to brand primary colors on user interface elements to align with the brand identity. However, the brand's primary color is a bride pink that, if used too often on the website, will distract user's attention from the product photos. Besides that, overusing bright colors might cause discomfort on user's eyesight.
While building my mood board which is heavily influenced by Peranakan culture and exotic plants from South East Asia, I noticed that most Peranakan family houses have dark color furnitures to balance with the vivid colors of household items. After that discovery, I started to test with brown shades with existing brand colors. The combination matches well and is able give a focus point on the products.
I changed the color of the logo to from bright pink to brown to have a better consistency throughout all pages. However, I did not want to fully remove it because it is the original primary color. The good thing about playing with user interface elements is we get to have a multiple colors in different states 😉 Therefore the original primary color is incorporated in a hover state and active state.
I began to put UI elements in place and this is where the wireframes start to look more complete. With the sufficient feedback I've gotten during my first usability test, I started building the wireframes for mobile version.Another usability testing was also conducted to make sure that users are able to make purchases confidently and easily in both desktop and mobile version.
Before diving into this project, I thought there weren't any challenges for me because I was only designing a local bakery website. However, I discovered many interesting findings along the way. One of the major challenge was solving the "Add to Cart" and "Buy Now" buttons. During my usability testings, majority of users prefer adding to cart because it allows them to save an item while looking at other products. After looking at several e-commerce websites where both buttons are present, I asked myself again whether "Do we really need both buttons when only one is working?" It makes to focus on one button now because Okay Eats products are made out from several items that are included in a set. Therefore, users need to compare on several products to make a decision.
This was my second project where I applied UX research and design techniques that I learned from Designlab’s UX Academy program. A few key takeaways from this experience:
Thank you Okay Eats team for giving me consent to work on the brand. I would like to give credit to the branding team for the amazing design assets and photography. Participants loved them and the desserts captivated their taste buds 😋