DATE
Apr – Aug 2016
PLATFORM
Mobile Website
MY ROLES
UX Design
UI Design
Illustration
Branding
TEAM
1 PM
1 Designer
2 Marketers
2 Developers (Outsourced)
The Problem
When buying a new beauty product, reviews are generally more objective than advertisements. However, writing and reading reviews can also be time-consuming at times. We wanted to create an alternative way of making and consuming beauty product reviews.
Define the Problem
It was a consensus that user-centered reviewing was one of the most reliable channels to learn about certain beauty products. We looked at the typical user scenarios and decided the main problem to tackle.
GOAL
More customers vote on our site and make purchase decisions by referring to our rankings.
RISKS & CONSTRAINTS
What if users are not willing to vote?
Will users believe the authenticity of the data we collect?
Insufficient developer support.
Create a Persona
Based on our discussions and interviews, we created a mid-20s female persona which would be our reliable and realistic representation of our key audience segment for reference.
Look at Inspiring Solutions
We found an app of the similar concept called Glowpick in the Korean market. It offered cosmetics product rankings based on users’ ratings, which we thought we could make a little more intuitive. We also listed the “thumb up” feature of Behance and buyers’ comment feature of 11st as good reference. The first step to build our solution was inspired by these collected and reviewed features.
Idea Sketches
With a thorough understanding of the challenge and its primary user base, we were able to move onto sketch to translate our findings into possible solutions.
Solution Wireframes
I then built the first set of wireframes and collected feedbacks from our teammates. Comments and questions were written down beside the wireframes for making iterations. It was critical here that we put our focus on functions and flows so that we can move quickly to produce the MVP for more realistic user reactions.
Storyboard
Storyboard told us which part of our prototype had to be “faked” fully functional. It was the outline of later usability test as well.
Create Prototypes
When all teammates agreed on the iterated wireframes, I build them into higher fidelity prototype. The prototype brought static designs to life and created a real time experience for our users during usability testing.
Test Objectives
1. Can the user easily find and understand the evaluation of certain product on the site?
2. Can the user quickly find the ranking of certain category she’s interested in?
3. Is the user eventually willing to use this site to help her make purchase decisions?
TASK SCRIPT EXAMPLE
Let’s assume you are thinking about buying IOPE’s new air cushion. How are you going to use this website to get information about this product?
ASK
·What is your first impression when you enter the website?
·What are the differences between your anticipation and the actual pages?
·What do you think about the voting section?
OBSERVE
·Which part does the user notice and for how long?
·How does the user react to the voting section?
·Does the user have a motivation for scrolling down?
·What are the user’s facial expressions?
Reaction Patterns
Work with Developers
I was also in charge of picking some front-end realization mistakes in this step. Since our developers were outsourced, keeping the quality was always a problem. The key here was to respect each other and put ourselves in both the shoes of our users and the developers.
