6pm Skincare Brand Extension CREATED AND RESEARCHED BY XINNI WU FALL 2016
6pm User Smart Goal -BEING ABLE TO ATTRACT 15% OR MORE FEMALE CONSUMERS BASED ON SKINCARE PRODUCT WITHIN 15 WEEKS
6pm Feature Prioritization Map
6pm User-Flow Chart
Wireframes LOW-FIDELITY SCREENS
High-Fidelity UI Screens and Annotations HOME PAGE, HEALTHY SKIN FINDER, AUTO-SUGGESTION RESULT, SEARCH PAGE, QUICKVIEW, LIVE CHAT, RATINGS AND REVIEWS
Home Page
Home Page Annotation
Healthy Skin Finder
Healthy Skin Finder Annotation
Auto-Suggestion Result
Auto-Suggestion Result Annotation
Searching Page
Search Page Annotation
Quickview
Quickview Annotation
Live Chat
Live Chat Annotation
Ratings and Reviews
Ratings and Reviews Annotation
Low-Fidelity Clickable Interactive Prototype HTTPS://MARVELAPP.COM/2262238
User Testing Results USER TESTING QUESTIONS, RESULTS, DATA ANALYSIS, AND RECOMMENDATIONS
Home Page What features on the home page might interest you?
On the home page, 6 out of 11 people believed pictures attract them the most. 2 out of 11 believe the word “sale� attracted them the most. 3 out of 11 people see different features besides images and words on the Ad. Therefore, an attracting image will helpful to grab more consumers.
Healthy Skin Finder What other information about your skin condition needs to appear on the skin finder page to improve the research?
3 out of 11 people believed there are enough information on the skin condition section, which could help them to find product in the skin finder page. One participant suggested that there should be a level of dryness or acne to help consumer find the final product. Another participant suggested different diets could affect your skin condition. Also, one person believed different races of people have different types of skin condition, so there should be a section to tell the skin finder tool your race. Hence, it needs more information about skin condition to guide consumers to find a needed product.
Selecting What’s your favorite way of selecting your condition and concerns?
6 out of 11 participants like to select their options from image and words. 4 out of 11 participants like to select from only words. Only one person like to select from only image. More people like to see both images and words at the same time to guide them on the website, and the words are more important in this situation because they do not want to get those options wrong.
6 Steps Auto-Suggestion What do you like or dislike about the step-by-step skin care product (1 to 6 steps by brand) suggestions by brand?
2 out of 11 participants believed there should be less steps because too many steps are complicated, and they want to have fewer times to take care of their skin. 6 out of 11 participants believed step-bystep is a suitable for auto-suggestion. Few people are struggled with step-by-step suggestions, but most people like this way to help them select a skin care product.
Navigation What other categories on the left navigation besides type of skin care, price, and brand could help you to find product?
2 out of 11 people believed there should be consumer concerns and types of skin that the consumer have to help filter the page. 6 out of 11 people think by filtering type of skin care, price, and brand is enough to help them. Therefore, there still need small changes in the search page to help consumers filter the page, but overall is in a good shape.
Quick View tool What' your favorite way of viewing a quick view?
7 out of 11 people like to view a quick view window on the right, but there are still 4 out of 11 people like to view it in the center of the page. This shows more people like to use a quick view on the right rather on the center. A right side quick view allows consumers to make a comparison of selected product and other products.
Product Page In the product page, what confused you and what don’t confused you? What do you like or don't like about the product page?
One person believed there are no numbers of people that rated the product was confusing because by showing only rating stars did not tell the consumer enough information. One person also believed more images on the product page will be helpful. Overall, the product page is clear and straight forward to most participants. There are still little mistakes such as spacing and rating numbers that still need to fix. Overall, people like the colors and the overall layout, which is clean and easy to guide the consumers.
Pop Out Window What do you like or dislike about the pop-out checkout window?
7 out of 11 participants like the pop out window, which shows images with simple description of the product. One person believed a list of products without image is better because this allows consumers to see the entire shopping bag very quickly. However, most people like an image with simple description such as name, price, and quantity. Then, there will be a problem if there are more products that have been added to the shopping bag.
Share Button Will you use the share button under the product image if you like the product?
6 out of 11 participants believed they will use a share button, and 5 out of 11 participants believed that they would not use that button. Overall, it seems half-and-half consumers will use the share button, but people said that they usually would not use the share button. This button seems unnecessary for the consumers.
Live Chat Do you understand what is ASK US NOW at the first time when you see it? If not then what it should be to help you understand it? Do you think ASK US NOW is necessary? What do you like or dislike about the chat window? Do you feel comfortable to have your name and email on the ASK US NOW window? If not then what it should be?
8 out of 11 of participants understood the function at the first time, but there are still few people got confused about the chat window. Also, 7 out of 11 people believed it will be a necessary tool to help them, and 3 out of 11 people still believed it is unnecessary for them or they will never use it. Overall, it seems this will become a helpful tool for consumers to ask questions. One person believed to use an anonymous makes that person feels comfortable to chat with a representative. Two people believed by chatting with only name and no email address will make the them feel comfortable. 8 out of 11 people believed that they feel comfortable to have both name and email address on the chat window. Most people felt comfortable to have their information on the chat window but this might become an option.
Ratings and Reviews Is there anything else that you would like to see besides who wrote the review, place, date, age, gender, rating stars, reviewers’ thoughts?
People suggested ideas such as how long did the consumers use the product? Also, skin type, and race might help them to review the product. 7 out of 11 people felt the review contains name, place, date, age, gender, rating stars, and thoughts are good enough, but one person still believed gender does not matter in a review. Overall, rating and reviews seems have enough structure but adding more conditions will improve the design.
Users’ Overall Experience
User Testing Result Summary More than 50% of testers said that they won’t use the share button. More than 50% of testers said that 6pm needs a live chat, but few of them are confused about the live chat. Most testers like to select skin condition with image and word and select from only words. Most people believed Healthy Skin Finder should have more skin condition to help them find a skincare product. More than 50% of testers like to view a quickview on the right. Recommendation: to watch for small details that few people see in the design
Project Retrospective In completing this project, the top five things that I learned from the human-centered design process is first, some people are unable to understand the buttons’ function in front of them. For example, some testers are confused about the chatting window, and some of them need time and explanation to understand this function. Second, people are unable to tell why something is confusing. Third, testers will try to reach unexpected pages that I did not create for in prototype. Fourth, people did not understand where to follow without telling them the next step. Fifth, some button became a decoration on the website. To illustrated, people can always see the share button under the product image, but they would just leave the button alone and would not use it.
I think by interview testers in person helps me to understand when and how people are confused on some designs. However, their struggling faces made me feel challenging because they could not tell me what makes them confused. The three design-specific strengths that I developed during this project: First, I was able to create my original product for brand extension that 6pm did not have on the website. Second, I think I have better understanding of design annotations that I could explain each individual item on my designs that relate to my design goal. Third, I think I created my prototype in a logical order that I made my buttons to link to pages that people could easy follow. I do not think I jumped from one page to a different page that confused my testers.
Project Retrospective Three areas of improvements that I identified during this project: First, I think I have improved my design skills from the first project such as layout and typography. Second, I had not worked with design draft in black and white, which allows designers to see more simple and clear interface. Those wireframes helped me to get improvements on design and allowed me to see small mistakes such as spacing and to arrange items, which are hard to see in colors.
Therefore, I think I obtained improvements from wireframes. Third, I think I got improvement from the user-flow chart. The user-flow chart helped users and me to understand the process and logic of using a website. I think I have been considering more specific steps that makes it easy for my users to follow the process. I think a clickable interactive prototype is what I am mostly proud of because this is my first time to make something clickable other than a flat image.
Project Summary During the brand extension in 6pm, I started to sketch ideas that might fit to the category of skin care. I looked for other skin care companies to gather my ideas. I set up a goal to attract more female consumers in skin care section. Then, I started a new tool, healthy skin finder, to help users to find skin care product that is suitable for them. I still followed 6pm’s left navigation in the search page that allows users to filter their needs by product type, price, and brand. I started to make a user-flow chart to help guide me into design because those steps show me what pages that I have to create. The feature prioritization allowed me to understand what functions that I have to consider more and what I have to consider less. I began to make those wireframes online and created a simple look of the skin care brand extension. After that, I changed my black and white designs into color to help me to test my designs. During the testing, some people are confused from their facial expression. The chatting window is what I mostly saw the confusion on, and I have to explain this to them so testers will understand the function. This testing helps me to fix the problem of my design solution. The numbers of data would tell me what I have to focus on.