Bengawan Solo Website Redesign
Transforming user experience in finding and purchasing a cake from an online cake shop.
My task is to redesign the Bengawan Solo online shopping experience, focusing primarily on its mobile website.
It is an individual project required by my General Assembly UX design course, in which I took the role of UX researcher and UX/UI designer.
Overview
Process Overview
Throughout the project, I am using the double diamond design process with various methods as shown below.
About Bengawan Solo
Bengawan Solo is a traditional cake and kueh shop that is famous for its high-quality ingredients. Many tourists visiting Singapore would buy the delicacies from this shop and carry them home as gifts to friends and families.
However, when Covid happened, the travel ban and regulatory restrictions halted overseas traffic and hit retail businesses. From Singapore Statistic data, online F&B sales proportion increased more than twofold from 9 percent in 2019 to 22 percent in 2020 since the Circuit Breaker period. Thus the need for Bengawan Solo to increase its online presence to compete well with other modern cake shops by improving the user experience.
Long story short..
The problem
-
Users can't find the information and details they need when browsing.
-
Users can't find the product easily and efficiently.
-
There is unnecessary friction in the checkout flow that causes users to drop off.
The solution
-
Redesign the product page with more informative details so that users can have a seamless online experience, just as if they're buying at the store.
-
Redesign the web navigation so that users can find things quickly.
-
Modified the user flow and provided an option for users to checkout as a guest without asking them to register or log in first.
High Fidelity Prototype Mobile
Here are a few detailed screen designs that I created to solved Felicia's and Pauline's problems.
Better navigation with informative details
Click arrow to view the slide deck gallery.
Improved Checkout Flow
I create an option for users to checkout as guest. Previously, they have to log in or register before they can complete the steps.
Another improvement is to clarify whether they are sending the item as a gift. This would help to avoid confusion when the sender and the recipient is different.
Do give my prototype a try and let me know your thoughts.
Note that the prototype only works on certain tasks that I want to test.
Impact of the redesign
Improved SUS Rating from
75 to 91
Showing that the newly revamped site has improved overall usability
Received a high satisfaction score when performing tasks.
Minimum score received is:
4 /5
Overall feedback is positive.
Users prefer the new checkout flow and like the new features such as: party platter, review, and allergen information
Click to view full process
DISCOVER
1. Lack of information
2. Confusing product name & picture
3. Lack of details
What are the current issues that I identified?
What are others doing in the market?
Bengawan Solo sells both custom birthday character cakes and traditional kuehs. I choose Lele Bakery because it specialized in custom cake design. Polar Cake sells different types of cakes, puffs, and pastries. I chose it because it is one of the main competitors for birthday character cake.
For the traditional kueh stores, I choose Ollella and HariAnns.
All of them offers pre-selection of bake goods
The delivery charges and information is shown upfront at the homepage
Most of them have chat support or FAQ provided for delivery and cancellation enquiries
All of them shows flavour descriptions or listing the main ingredients
User Interview & Usability Test
To understand the users' thought process when searching and buying cake online, I conducted a user interview with 6 participants. My research questions helped me to decide which features to prioritize for the redesign.
At the same time, I took the opportunity to do a usability test on the existing website to find out more about the pain points when they are browsing the site to search for products and complete the order.
Objective
-
To understand needs, pain points, and mental model when users are purchasing the cake from online website
-
To find out how they use the Bengawan Solo website and how it can be improved
Format
-
Moderated Interview
-
User takes 3 tasks on Bengawan Solo website and score the site according to a System Usability Scale
Participants
-
Female aged 25-40 who are prospective customers of Bengawan Solo cake.
-
Number of participants: 6
DEFINE
Affinity Mapping
I use affinity mapping to group similar insights that I gained from the user interviews.
Link to Affinity Mapping Image
DEFINE
User Personas & User Flow
Based on the affinity mapping key insights, I came up with 2 user personas that represents the typical user groups.
Felicia
The Flavour Hunter
Felicia is 30 years old and works as System Engineer. She lives in Singapore, married but has no kid yet. She would buy sweet treats, be it to satisfy her self craving or to celebrate special occasions with her family and friends. She would look for a unique or novelty flavour cake from online shops because it is generally cheaper and more convenient as well.
Behaviour
-
Looking for the novelty of cake flavour and must look good
-
Discover cake to try from social media and Google
-
Cost conscious
Frustrations
-
Difficult to decide because there is no proper description of how it tastes
-
The actual cake is often not the same as the picture
-
Delivery is expensive and worries the cake is damaged during delivery
Needs and Goal
-
Need to read descriptions of the cake flavour
-
Want to know the review about how the actual cake taste and looks
-
Want to have an option for self pick up
"I want my cake to taste and look as I imagined it would be"
Scenario:
Buys a trending flavour cake for her friend's birthday gathering.
Felicia is browsing for a cake to buy for her friends' birthday. She discovered a new flavour cake from her social media and decided to go to the online cake shop. Before purchasing the cake, she hopes to find out more information about the cake flavour and how it tastes. She also wants to read some reviews from those who have tried the cake.
I created the user flow and overlapped it with the users' emotions while performing the task. I highlighted the areas of improvement in the red box, where I would focus most during the redesign.
Pauline
The Party Planner
Pauline is an adjunct lecturer and turning 35 this year. She has a 2-year-old boy and a 5-year-old girl. She loves to plan a party to celebrate her kids' birthdays at school. Occasionally she would also send a cake or other sweet treats as a birthday gift surprise to her friends.
Behaviour
-
Need to buy multiple items from the same shop if possible
-
Using mobile to browse and make a purchase
-
Prefer delivery for convenience as she would send it out as gifts occasionally
Frustrations
-
Too many options and selections for custom cake design
-
Little or no descriptions of the allergens in most cake shops
-
Unable to visualize how big it actually is when buying online
Needs and Goal
-
Able to streamline the options faster
-
Need to know if there’s an allergen in the cake to inform the teachers
-
Want to get the correct sizing of the cake
"Too many options to consider when planning for a party"
Scenario:
Buys items for her kid's birthday party
Pauline is planning for her son's birthday at his preschool. She wants to buy both cake and small bites to share with the teacher and her son's classmates.
Click here to see the user flow.
Usability Test Findings
Using the current website and the user scenarios created for each persona, I conducted the usability test with the same participants in my user interview.
Finding & add items to cart
Cart & Checkout Process
Problem Statement & HMW
Before coming up with the solutions, I created the problem statements and how might we try to solve them.
Felicia needs an easy way to discover new or unique flavour cakes with accurate details and information because she wants to receive the cake with a look and taste as close as described on the website.
HMW:
-
Help Felicia to discover new or unique flavour cake easily?
-
Help Felicia to find more accurate information and details about the cake?
Pauline needs an efficient way to browse and select cake items for her party because she often gets overwhelmed with too many options and she finds it hard to get the required information.
HMW:
-
Help Pauline to browse and find information faster?
-
Provide Pauline with suggestions to narrow down her options efficiently?
Proposed Solutions
Finally, after all the user research, data gathering, and synthesizing are done, I came up with proposed solutions to solve the user problem.
For Felicia
-
Redesign sitemap so that she can discover new flavour cake easily.
-
Redesign product page to show flavour description, review and ratings of product so that she can find accurate information about the cake.
For Pauline
-
Redesign sitemap so that she can browse and navigate faster when searching for the cake design and have some suggestions for preselections party items.
-
Redesign product page to show serving size guide and allergen information
For all users
-
Redesign checkout flow to remove the unnecessary frictions and reduce number of steps
DESIGN & ITERATE
Web Sitemap
I begin with sketching the new sitemap before designing the new screens. The main difference for the homepage is in the product navigation. I regroup the products into three categories: Cake, Delicious bake, and Special Occasions. I also modify the Character Cake category and group it based on gender instead of character names.
The intention here is to not overwhelm users with too many choices in the navigation menu.
