Thank you for your help!!!
Thank you for your help!!!
Fashion design
Fashion design
The relationship between
seniors and their pets
Cactus
Project Type: User interfaces and user experience
Date: Fall 2019
Brown University: User Interfaces and User Experience
Group with: Ziying Qiao, Yutong Shen
Role: Concept, Research, Analyst, Usertesting, Wireframing, Visualization, Prototype, Ideation
Skills: UIUX Design
Design an online monthly subscription service for young people with hair loss problems.
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.
Our target group to young people who have hair problems. 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.
| 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.
Our target group to young people who have hair problems. 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.
| Type of interface
Website.
We use the website because it is easy for us to promote our product. Users do not have to download an APP. Also, we will make it a responsive website so users can view it on their phones.
| The group of people that will be directly impacted by our interface
The pictures of how hair be improved on the interface will attract people who are concerned about their hair loss problems and trying to find the solution. The doctor/expert team section on our interface will build trust between users and our brand. So, people who want to solve hair loss problem privately, they want to avoid the embossment of visiting doctor in person will be impacted by our interface. An interface provides a hair condition quiz so that people who are looking for a personalized, convenient, and effective way to solve hair problems will be impacted by our quiz interface.
| The group of people that will be indirectly impacted by our interface
An interface with introductions of hair loss prevention products will attract hair care product companies, manufacturers who are looking for collaboration. Our interface with product details and a shareable link of the quiz will attract people who have family members that have hair loss problems. An interface showed how our product improves hair grows will attract people who are born with thin hair and would like their hair look thicker.
| Questions that our interface address to ethically handle these effects?
People who have serious hair loss problems will be affected by the before and after pictures. Generally, the company tends to post the best result pictures on their website. However, these cases can not present the mean clinical value, it might mislead our potential customers. Ethically, our company can also add links to the comment pools, or Instagram tags, which allows users to check out all other views, so that user will not only see the best result from the company, but also get all reviews from all other users.
| 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.
Wireframing set 1:
Wireframing set 2:
Wireframing set 3:
Wireframing set 4:
| Design principle and Design choices
To make a smooth user experience for our customers, we put our design efforts into improving the usability of the website.
The first thing is the intuitive design. We simplified the purchasing process, designed our original icons and branding to make the page information intuitive and easy to understand.
We also combine the product introduction with the precise steps instruction, which makes the process of our services easy to understand and easy to follow.
Our design choices are based on friendly and lively. The traditional style of hair loss products' website is more serious, but we think people should be more optimism about hair loss problems so that our design/branding is presented in a friendly and lively style.
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.
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.
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. 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.
| Visual Redesign
| Style guide
| Branding
| High-Fidelity Prototype
| Link to interactive Prototype - Made with Adobe XD
Home Page - 3 Steps To Better Hair
Quiz pages and Cart page - Take Quiz, Get Recommendation
Product page - Buy product basic on the condition
Profile page, Order page, and Stories page
| User-testing
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 find it and go through it easily. 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.
|UserTesting results
We set up four sub-tasks for our users to test out, and there were three users participated. To match the habits of different users, we designed several quiz entries on our site:
1. On the right side of the main menu bar, beside the “sign in” button
2. Clickable text in the paragraph
3. Large floating cactus button
4. At the bottom of the page: “we’re here to help you!”
According to our user testing results, only one person clicked the large cactus floating button. The other two people choose to enter the quiz from the main menu.
The result of user testing is inconsistent with our hypothesis. One reason is that people are more familiar with the “take the quiz” button shown in the main menu rather than in other parts of the webpage. Another reason might be there were only three users take the testing. Since it is a tiny sample, the results might be inaccurate.
| Feedback Table
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 is the most complicated on, 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. A 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 completing the tasks.
| Consideration of Possible Interface Changes
We find out on the main menu (product, review, about button), we don’t have anything to show the user which page their 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. After we know where we shold change, we go back and changed the interface.
| Conclusion
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 need designers to set up task instructions carefully, consider what elements or process we want users to test. For our successful it will be users are all complete the task easily, and they don’t have too much