top of page
Shopping Experience Optimization
Herbelle, herbe(herbal) + elle(her) in french, means natural woman.
Herbelle is the idea of skincare revolution from Formosa Biomedical Technology Corp.(台塑生醫) founded in 2018.
Project Brief
While Herbelle Store's business is growing rapidly in Longtan Lake Leisure Park, its online shop checkout rate is not performing well. To celebrate Herbelle's 3rd anniversary, clients have decided to redesign the e-commerce website and give it a fresh new look.
My Role
Designers (2), Engineers (4)
・Usability testing/ UX design/ UI design/ Wireframe/ Prototype
・I used the Design Thinking process to optimize the E-commerce website from user research to ideation, prototyping, and testing.
Challenge
E-commerce is a complicated task, I spent lots of time figuring out the need of customers, clients, and the brand. Include finding the pain points to clients with back and force discussing to define what are the key points.
Timeline
Mar. 2020 - Sep. 2020
Design Highlight
_gif.gif)
Always Pursuing Better Experience
We found that users spent a lot of time switching between product categories while choosing products on the original website, so we put the product categories in the top menu to make it more convenient.
Single product page
Chossing products between categories
What do Customer Concern
The shipping fee is the key factor that most users care about when before checking out. So, we try to add the pop-up notification to provide users with a pleasant experience in the shopping cart.
Besides, a step-by-step checkout process can reduce user anxiety and achieve every staged achievement.
_gif.gif)
Notification of shopping fee
_gif.gif)
Checkout process
How We Work
In the beginning, Formosa Biomedical Technology Corp. and we set 3 goals to redesign the website :
-
Improved E-commerce UX: Optimize the current shopping experience, increasing checkout rate.
-
Rebrand: This year, Yilan Park is a popular check-in spot on the Internet. We expect to redesign the website to match the style of the store, it will enhance the brand identity.
-
Membership system: Establish member information for marketing.
Approch & Goal
How we optimize shopping experience
We executed in original website :
-
Questionnaire
-
5 Users Interview /Usability Testing
-
UX Diagnosis
-
Google Analytics
The purpose is to find out what do users concern about and define what problems need to solve.
User testing & Insight
In order to know more about users’ behavior, we select five users from the questionnaire to execute the following tasks.
-
Task1: (Want to know how do they pick products and go to checkout)
Find the products and complete the checkout according to the requirements
-
Task2: (Want to know how do they browse the site because the site is having sale) Situation: I heard from my friends that the total checkout amount on this site today is only 50% off
I categorize the problems faced by users into three parts below.
Define problems
Through discovering the pain points from users, analyzing and discussing the main goals of iteration with client. We moved forward with the following two main issues.
Fluency of checkout flow
-
Registration Process
-
Shopping fee and deliver
-
Interface of shopping cart
Better experience in browsing
-
Categories of UI
-
Discount information
How did we design it?
1/ Check out in one minute with more convenient
More than 80% of users left the original website before checkout (or even check the shopping cart) from the results of Google Analytics and user testing because users needed to complete the complicated process of registration.
-
First, we connect fast to register with Google and Facebook to reduce the user's complicated login process to affect the checkout rate.
-
Second, we design a step-by-step checkout process (the original website is a one-page checkout), make users more clearly know the goals of each stage, and reduce anxiety.
2/ Provide better experience in picking products
In the testing process, I found the five users back and forth picking products between the hidden menus, and confirm the shopping cart many times, because they want to make sure shopping fee is free.
-
Based on the above insights, we decided to place the product category on the top menu, users can quickly select product categories. Meanwhile, we designed the pop-up notification of shopping fee in the shopping cart.
3/ Show discounts to customers to buy more
On the original website, discount information is easy to miss on the product page (five testing users all faced this problem), instead, they found discount information on the checkout page. However, users always don’t want to miss discounts, so they returned to the product page during the checkout process. It's a very unpleasant experience for shopping experience.
-
Therefore, we strengthened discount information on the product page, make users can pick up discount products at the same time. Besides, we add more other special price products to checkout page, it's easy to increase the total amount in order.
Wireframe make user flow more fluntly
We constructed links between the main pages to make sure users have a good shopping experience on the website.
At the same time, we created a low-fi prototype of the model for client to confirm our ideas are consistent.
Apart from UX, Brand Identity is important
_gif.gif)
Before & After
/ Landing Page /
Next
After user testing 5 original interviewed users, agreed that the website is much better than the original site, and the other 5 users (first shopped on Herbelle) also gave us a lot of positive reviews.
Although we must postpone development due to the policy, I learned a lot in the process of working with developers because I need to be a project manager and a designer at the same time, and we use Notion as a communication platform to record to-do lists and design details.
bottom of page