top of page


- an online service design

- for young people with hair loss problem

​made with Adobe XD

Due to stress, diet, and hair treatment, there is a growing number of young people who are now facing the hair loss problem. 

With a choice of lively visual style, simple interactive interface, and convenient using process,we designed the Cactus service website especially for young people who concerned their hair. The hair problem is not a big deal, let's deal it easily on Cactus.

Date: Oct.2019

Type: Course project / Group project

Place: Brown University

Course: User experience  and user interface

Group member: Yutong, Ziying, Vivian

屏幕快照 2019-126.10.jpg

01 Context


Although balding is typically associated with advancing age, an increasing number of millennials are now experiencing hair loss:

Cactus is a supplement subscription service for young people with hair loss problems. Customers can build personalized monthly subscription boxes which including vitamins, medicines, and shampoo. We encourage customers to subscribe to monthly service instead of buying single products, for more effective hair treatment and also gain steadily profit for the company.

Food, hormones, atmospheric pollution, lifestyle, stress, illness are the main reasons for hair loss in younger people. Hair loss can be stopped by avoiding the use of chemical shampoos and soaps, and by applying coconut oil to hairs. Furthermore, there are many herbs available which can prevent hair loss. Aloe vera, bhringraj, Indian gooseberry, neem, rosemary, soapnut etc. have many benefits to promote hair growth

02 Design features


To make a smooth user experience for our customers, we put our design efforts into improving the usability of the service and try to find the most convenient way of shopping hair treatment products. 

Caring questions instead of sign up

For a shopping platform, the requirement for new users to sign up is needed. But for new users, the step of sign up can be irritating. 


In our context of personize hair caring service, instead of straightly asking people to fill the information form, we present the caring questions. The questions we are asking here are also what our users want to know about themselves. It's like astrology quizzes, our questions can help people know better about their hair conditions, therefore allowing them to smoothly go through the quiz and sign up sections.

​- Diagnostic report instead of shopping chart

After the small quiz, which helps both the user and us to know their hair conditions, we will then recommend our users their personalize hair solution kit. Instead of simply presenting the recommendations, we combine the recommendations and the hair condition quiz result together as a diagnostic report. This is a free take away for our new users- even if they don't shop at our site. This feature will attract people and improve their willingness to subscribe to our service.

Subscription instead of single purchase

Haircare takes time. Therefore, we encourage our customers to subscribe instead of buying single products, for more effective hair treatment and also gain steadily profit for the company.

- Diagram instead of list

For returning people or people who clearly know their hair conditions, we also have the product page for them to make a direct purchase.

Instead of listing the products, we use a diagram to show them, so they can have an intuitional view about what they need.

​- Interactive

We add a diary part for people to document their hair treatment process. If they are willing to share their progress,  we also encourage them to do that with some giving back like promotion, trial pack or other gifts.

During our research, we find that people are more attracted by the picture of real people with real results. Therefore, encourage people to share will be a good way of advertising. 

​- Lively Branding 

The traditional style of hair loss products' website is kind of serious, We think people should be more optimism about hair loss problems, especially the young generation, so that our design/branding is presented in a friendly and lively style.

For more detail

about branding :

- Sketching

According to different design points, we each made a set of sketches. Then we combined our good points into the  design of the Set-4

- Prototype

Improve from sketch set-4, we develop the interactive prototype using Adobe XD.

Prototype website:

屏幕快照 2019-12-16 上午3.36.10.jpg
- User Testing

We did three user-testing on UserTesing. This is an online user test platform that allows us to see, hear and talk to our customers as they engage with our website.


Our hypothesis of the test is: Users can easily find the entry of the quiz and get the report based on it, then successfully subscribe to our service. We assume that every user has different preferences for visiting and shopping on a website, so we have several approaches to the quiz that allows users to easily find it and go through it. We made a floating large cactus button at the home page to attract users’ eyes. We assume that most people will click it.

屏幕快照 2019-12-19 上午1.42.13.png

  \Task Instructions

Main task:

Imagine you are experiencing the hair loss problem, and you want to subscribe to our personalized monthly box which helps your hair problem.

Sub Task 1:

As a new user to Cactus, take the quiz and subscribe to our service.


Sub Task 2:

Go to account, check your progress in stories.


Sub Task 3:

On the account page, check the information for the next shipping.


Sub Task 4:

Check the product page, add the fourth item of stage one.

\Test result

03 design process

Set 1
屏幕快照 2019-12-18 上午1.32.12.png

We set up four sub-tasks for our users to test out, and there were three users participated. All of them completed the four tasks successfully. The first task is the most complicated one, so the average time on this task is 1 minute 42 seconds. Although our users could complete these tasks, there were some lapses during the process. The main reason might be that we do not have something to show which page they are. Also, due to the 5-10 pages limit, there were not enough pages for users to interact with. From the user testing videos, users gave us positive feedback on our smooth navigation, user interface, and branding, and they feel very satisfied to complete the tasks.

组 314.png



We find out on the main menu (product, review, about button), we don’t have anything to show the user which page they are looking at. We should change the color when the user clicks on it so that the user will know which page. In the quiz, we used black to made our next button, and other buttons are all green, so the user gets a little bit confused about which one they should click. For the product page, the user goes to the product list and tries to add the product instead of adding the product from the product table.

The challenges for us is to let the user review the home page first, and then go to the other page because after we reviewed the user testing videos, we found that our three users didn’t go through the homepage. We think users didn’t go through the home page because they wanted to complete the task we gave to them. So we learned that to conduct user testing successfully, it needs designers to set up task instructions carefully, consider what elements or processes we want users to test. For our successful, it will be that users are all complete the task efficiently, and they don’t have too much error. 

04 Branding

Group 25.png

 your online hair solution


- Logo

- Color

Style Guide.jpg
Style Guide.jpg

- Font

- Packaging

Cactus Packaging.png
cactus shampoo.png
Cactus Conditioner.png
组 132.png
bottom of page