UI / UX

10/2019

Team Project with Mengjiao Han, Yutong Shen| Brown University: User Interfaces and User Experience

My Role: Concept, Research, Wireframing, Prototyping, Visualization

Cactus

Online monthly subscription service for young people with hair loss problems. 

Interactive Prototype made with Adobe XD

https://xd.adobe.com/view/2c273386-c804-4c05-6c45-b1cb594b1073-5a16/?fullscreen

Project Focus

It 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, because we think that it is more personalized and also gain more profit to the company.

Sketching

To help us visualize ideas in front of users and stakeholders, consider alternate designs, and avoid premature decision making, we created four sets of sketches.

Sketch 1

Sketch 2

Sketch 3

Sketch 4

Design Choice

The traditional style of hair loss products' website is more serious, but we think people should be more optimistic about hair loss problems so that our design/branding is presented in a friendly and lively style.

Visual Design

B R A N G D I N G

S T Y L E  G U I D E

Interactive Prototype

3 Steps To Better Hair

Take Quiz, Get Recommendation

On the home page, we enhanced the noticeability of our quiz, so we provided multiple entries to the quiz, and it led to the subscription. Also, the three steps processes would give users a clear view of how our service works.

We made our shopping cart page looks like the medical report because we want our users to know why we recommend these products to them based on the results of the quiz.

Unique Product Page

For the product page, we use a table to show our products, which is different from the conventional product page design. Because we want to let, the customer chose the product by their hair state and the concern. If users know what stage of the hair loss they are experiencing, they can have an intuitional view about what they need.

Profile, Orders, Stories

4. We also add the retake quiz feature in the account page, so that customer can retake the quiz and update their subscription based on how their hair improved.

Usertesting

We did three user-testing with UserTesing, this platform allows us to get the real feedbacks from our audience. 

Consider our service is facing young people with hair loss problems, we set our target users age between 18-40, with decent salaries.

Hypothesis

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 a different preference for visiting and shopping on the 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.

Task Instructions

Main task:

Imagine you are experiencing hair loss problem, and you want to subscribe 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.

Feedback

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 tasks are the most complicated, 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. 

Conclusion

We found 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. 

Ziying Qiao

zqiao@risd.edu

  • Black Instagram Icon
  • Black LinkedIn Icon