Fugetsu-do
Fugetsu-Do has been a family-owned and operated Japanese confectionery store since 1903. The store is located in the heart of the Historic District of Little Tokyo in Los Angeles, CA. They specialize in Japanese rice cakes, more commonly known as mochi.
[e-commerce, web design, ux/ui]
check out the prototype
// Overview
Despite their rich history and immense popularity amongst the community, Fugetsu-Do has limited digital engagement due to their outdated website. For this project, my goal is to design an e-commerce website for Fugetsu-Do that strives to provide a superior digital customer experience for its users.
As the sole UX/UI Designer, I shaped a unique user experience and brand with high-fidelity prototype of the e-commerce website. My responsibilities included improving information architecture, web layout, and UI practices to provide superior digital experiences.
Impact: Introduced onsite checkout function with detailed progress indicator and clear copywriting to reduce bounce rate by 75%.
primary role
UX/UI Designer
Function
User Research, User Interviews, User Flows, Information Architecture, Usability Testing
timeline
2022
// Heuristic evaluation
I began my design process by familiarizing myself with the current website. I conducted a heuristic evaluation by following Jakob Nielsen's 10 general principles for interaction design. I discovered 4 heuristic violations:
Header is not fixed and disappears once page is scrolled down.
There is minimal balance among information density, images, and use of white space.
Elements that are not clickable look like they are and vice versa.
Onsite checkout function is completely missing.
// competitive analysis
Fugetsu-Do has been a staple for delicious Japanese confectionery for over a century. However, when comparing their website to those of other popular shops, the differences are staggering. This is especially true in regards to a lack of an adequate checkout system.
// User interviews
I conducted user interviews with 5 participants. I asked the following questions and based on our conversation, any relevant follow-up questions that I might have had.
Can you tell me about the last time you purchased any type of pastries or sweets from online?
What are some criteria that you look for when making purchases online?
Can you share with me the experiences you have when shopping in stores vs shopping online?
Can you visit fugetsu-do.com and share with me your first impressions?
How does fugetsu-do.com compare to your preferred online shop?
Although a wide variety of topics were covered during the interviews, I identified 2 main pain points:
Mistrust - users did not trust a 3rd party offsite checkout entity, especially an outdated one.
Streamlined user interface - Users preferred an easy to use website that have few or none heuristic violations.
// Personas
After synthesizing the research and findings from our user research, I created two proto-personas to better visualize and understand the paint points and needs of the users.
// the user journey
After developing the two proto-personas, I considered the user journey each user would experience when interacting with the current website. Here is Kathy’s user journey.
// what's the problem?
I summarized my research into a clear problem statement to guide myself to a possible solution.
Having moved out of state for work, Kathy needs a reliable way to order Fugetsu-Do Japanese confectioneries online when she has the cravings for them because she can no longer drive to the physical store.
// Asking the right questions
I asked myself in what way to approach the problem at hand and came up with 3 main questions:
How might we build an effective onsite checkout option?
How might we instill confidence in the users’ digital experience?
How might we clean up the heuristic violations?
// Proposed solution
Considering the pain points and questions at hand, I propose a redesign of Fugetsu-Do’s ecommerce website that implements information architecture, web layout, and UI best practices to provide a superior digital customer experience for its users.
// Design considerations
The redesigned e-commerce website should…
Have a reliable onsite checkout option with progress indicators.
Follow UI best practices and implements information architecture/web layout.
Provide an intuitive and conventional shopping experience for the user.
Have multiple clear ways of locating specific products.
Allow users to learn more about individual products.
Have an efficient way of purchasing one or more products.
Steer customers toward popular products.
Allow customers to receive curated and personalized style recommendations.
// User flow
Keeping the user persona in mind, I developed this user flow to help the user find the right products through streamlined navigation.
// site map
The site map forms the skeleton of the ecommerce website. With the user persona in mind, my primary focus is on SHOP, ABOUT, and SHOPPING CART.
// sketch to wireframing
After sketching out initial wireframes with consideration of the user flow, site map, and design, I transitioned to mid-fidelity wireframing to prepare for usability testing.
// usability testing
Using the interactive prototype, I conducted usability testing with 3 users to find and complete the purchase of Sakura mochi, Kathy’s favorite. Users will imagine that they are familiar with Fugetsu-Do’s products. They are simply checking to see if they can reliably purchase the product on the redesigned ecommerce website.
3 out of 3 users successfully navigated through the website and completed the purchase with ease.
All users stated that they found all the necessary information they would want on the Product Details Page, including recommended products.
All users expressed their satisfaction with the progress indicator in the checkout process.
2 out of 3 users recommended incorporating the excellent reviews from Yelp into the website to further enhance the user experience.
check out the prototype
// learnings and takeaways
Going through the design process as the sole UX/UI Designer really challenged me to think outside of the box. I learned to allow my research to guide me through the design process to formulate purpose-driven solutions. I reminded myself to always keep the users in mind when making my design decisions. I was reminded throughout this project to not get ahead of myself with trying to figure out a solution before synthesizing my research to identify key, relevant pain-points.
I am proud to inform that the end product was the result of prioritizing the users’ needs and has succeeded in providing an elevated digital user experience that matches the rich history and immense popularity of Fugetsu-Do. Now, I think I’ll reward myself to some of their mochi! Yum!
view more work