1.jpg

Apsara Skin Care Web Redesign

Apsara Skin Care Web Redesign

1.jpg
 

Context

At the beginning of 2019, I worked at Apsara Skin Care as a UI/UX designer to redesign their official website. The goal was to improve customer’s searching, choice-making, and purchasing experience. In addition to web redesign, I am also responsible for designing multichannel experiences to strengthen the relationship with our customers.

Challenges

User Research

At the beginning of this project, our team did comprehensive customer research by conducting surveys, interviews, and data analysis. Here is what we found from the research:

 
 
Most of the customers are very interested in getting  personalized skincare advice .

Most of the customers are very interested in getting personalized skincare advice.

Blogs  and other  content  are important to the audiences.

Blogs and other content are important to the audiences.

Users mostly searched by  skin type  and  product category .

Users mostly searched by skin type and product category.

People are hassled by the  complex ordering process .

People are hassled by the complex ordering process.

60%  of total users are browsing the website through  mobile devices .

60% of total users are browsing the website through mobile devices.

 
 
 

Business Research

While working in the company, I found that there are not a lot of products in each category, but each product is designed to solve a skin problem. I realized that the website is over-crowed with little relevant information. I think it is very important to be honest and authentic, and I always keep that in mind throughout the design process. As their marketing strategy relies heavily on the reputation and skincare consultations with the founder, their social media info and personalized skincare advice must be well shown and easily accessible. As the business grows, they also need to improve the efficiency of their skin care consulting service. As for now, the founder is the one who manually replies to all the advice requests.

 
 
competitor-07.jpg
 
 
The Ayurveda experience, Samaya, Taila, and Kama Ayurveda are competitors which hold a similar Ayurvedic culture. However, none of these brands create content that is as diverse as our website.
 
 
competitor-08.png
 
 
Shiseido, Kiehl's, and Origins are large brands that have many product collections. As a result, their websites are more complex by nature. In spite of their business scale, they are only selling the cosmetic products, while our brand is trying to promote an Ayurvedic lifestyle that benefits our mental and physical well-being.
 
 

Personas and experience journey mapping

 
persona-10.png

Shivani

Age: 22

Occupation: Student

Location: San Jose

Task: Buy the gift product for her mom.

Needs/Goals:

  • Choose an appropriate skin care product for her mom.

  • Try to find an effective anti-aging product.

  • Purchase within a budget.

User Story: Shivani has a limited budget, but she wants to give her mom a surprise on her birthday party. She doesn’t want to buy her anything useless. So, she decided to choose a gift that can actually benefit her mom’s skin health.

“I want to make my mom happier, and I think this Ayurveda based skin care brand could give her a sense of old time. ”

 
 
Experience journey mapping

Experience journey mapping

 
 
 

Design Goals

According to the insight from both user research and business research, the following design challenges: 

1. (Homepage) Insert the quiz that help users to choose products and kit.

2. (homepage) Simplify the navigation system and prioritized the information that interests the customers.

3. (Product list page) Add a handy filter and use icons to improve product searching experience.

4. (product details page) Visualize the ingredient information with honesty to build trust and reliability. Also, we need to reorganize the “related products” section to give customers the most efficient suggestions. Connect each ingredient to its related blog articles.

5. (Checkout page) Simplify the ordering and check out process to reduce customer anxiety.

6. (General) Create a responsive mobile version to help on generating new leads.

 

Low-fidelity and high-fidelity prototyping

Sketches

I created a series of sketches to visualize the task flow and multiple iterations for layout designs. After a few rounds of usability tests, two most effective layouts were chosen for high-fidelity prototyping.

 
 
pop-up-01.jpg
refined-01.png
product page-01.jpg
 
 

Usability Testing round 1

“Still overwhelmed by too many options”

Many users said that navigation still seems very crowded. Although we took out many tabs and combined similar categories, we still need a stronger visual hierarchy to highlight our featured services.

“I might skip the survey”

In the part where users are trying to get product suggestions, the quiz should be shorten and tell the user the length of the survey. The “contact founder for advice” option was added side-by-side with the option to take the quiz. So that the users can choose the way of consulting according to their time arrangement.

 
Our users have shown great interest in interacting with the brand.

Our users have shown great interest in interacting with the brand.

 

High-fidelity prototyping

After the first round of usability tests, the logo was moved to the left side to leave more space for navigation. In order to build deeper relationship with the users, “Personalized Skin Care Advice” button was emphasized with a solid color background while the top promotional banner faded out. 

 
 
2-08.png
 
 

As the pop-up window tend to annoy some users. Two options were provides for product suggestions. If the User prefers an immediately respond, they can choose to take a short quiz, rather than wait for our founder’s reply. 

 
 
Screen Shot 2019-09-13 at 11.28.24 PM.png
 
 

Usability Testing round 2

“I am just concerned about the quality”

We got a lot of feedback regarding to the concerns of product quality from online shoppers, especially the new customers. We decide to add a rating system and a messaging system to allow more honest commands.

Defining the Solutions

The key of building the customer relationship is to be authentic, unique, and responsive. Company is a cosmetic brand that uses 100% natural ingredient and believes in the power of nature. So, a product details page was designed with a section to show the formula. Users can click on each product benefit to see exactly which ingredient enhances the treatment. 

 
1-09.png
 
Screen Shot 2019-09-13 at 10.37.04 PM.png
Screen Shot 2019-09-13 at 10.37.40 PM.png
 

Other than the ingredient showcase, I also added a feature in review section where our team members can reply to customer’s questions and commends. It is okay to have negative reviews, but the way we handle it can make differences.

 

I also added lines between product details to help users compare the items and to inform costumers of more options.

 
 
3-01.png
 
 

[Product Searching Page] I added multiple filters to engage our users to explore more options available for them and increase the efficiency of their choice making process. 

[Checkout Page] I designed with a breadcrumbs for a smoother shopping experience. I let the cart information always display on the right side to reduce the chance of making mistakes. Even when users find an error, they can easily check and edit the form by clicking the step tag where they are concerned about.

 
3-02.png
3-03.png
3-04.png

Mobile Versions

Mock-up-02.png
 
Mock-up-03.png
 
 

Future

The website contains a big data base, and it is an interesting experience to see how all the functions that I introduced are shipped by the developers. The team will keep testing the website after finish updating the features. At the same time, I will keep refining the photography and other subpages.