Sephora: How might we redesign Sephora to bring an instore experience online
About the project
​
Users still find the need to go down to the store to get recommendations on whether a product is suitable for them and to get more assistance. How can we re-design Sephora to provide an in-store experience on the app?
​
The Problem
​
-
App has a lot of filters but are used more often to find a product that users are already interested in
-
There is no form of guidance in getting suitable products for newbies at makeup and skincare
​
Duration
1 week for research synthesis and prototyping with a mid-fi prototype. Focus was on user research.
​
My Role
​
This 2-person project was the first project my team member and I had where we started to get our feet wet in conducting interviews and using various tools like user personas, customer Journey maps, and heuristic evaluations in UX to help us find and solve the problem.
The Solution
To incorporate a Virtual Assistant to help users learn more about the products that woud better suit their skin type and needs, and provide a more personal experience on the app by posing questions to users instead of choosing the filters themselves.
Located in the nav bar
Virtual Assistant with help message shows up upon entering app
​
Like a conversation
Ask Jenny comes in the form of a guided questionnaire for a start
​
Research Synthesis
Information to Insight
Conducting Interviews and capturing stories
​
We started off with interviewing 5 people on their experiences with buying makeup and skincare in general. We had a couple of questions in mind but ultimately we asked questions based on their response to form user stories.
As it was our first time interviewing with a few guidelines in mind, we fumbled quite a bit here and there. It was easier when we interviewed with questions that are based on topic groups and go from there. We tried our best to improvise and change directions when the conversation took different turns.
Discovering patterns in the responses
Organizing and filtering out open-ended data through affinity mapping
​
We used a website called mural.co to help us compile all the responses we obtained from the 5 people earlier on and started to group different responses together depending on their similarities.
They were grouped by needs, problems, behaviour, and even demographics. Each group were then assign “I” statements that describes the group in a format we can easily construct HMW (How Might We...) statements from.
​
We decided to focus on the group "I buy in store because there is no online guidance" as it was a group that consisted responses from 3/5 of our interviewees.
Creating a persona
A persona based on how they think and behave
​
Meet Sarah.
She's a little impatient, likes comparing prices because she would like to get value for money and the statement that strikes off as the most interesting insight from her is that she likes going to a physical store to get assistance in person before buying
​
​
Creating a customer Journey Map
How does Sarah interact with Sephora?
​
Here we start off with a scenario Sarah faces with in real life and from there we map out her journey into phases in the buyer's journey in order to better visualize the emotions that are associated to each interaction. From here, we could identify the possible opportunities for improvement. We decided that providing a solution in the research and consider phase could perhaps improve Sarah's purchasing experience into a more positive one towards the end of her journey.
​
​
Prototyping
Ideating through Lo-fi Wireframes
Quick sketching, doesn't have to be perfect
​
This was also our first venture into the world of prototyping. After learning how various parts of a website or app are made of "building blocks", it was easier to draw out ideas in lo-fi wireframes which does not have to be perfect.
​
What it needs to accomplish is to allow us to quickly ideate and visualize how the virtual assistant could look like, where it should go and how they could function.
Going from Lo-fi to Mid-fi
Introduction to Figma through Mid-fi prototyping
​
To be honest, this prototype was made with a lot of screenshots. Figma was new to us albeit being an awesome tool, we needed more time to learn more about this tool to produce a clickable prototype.
​
As we had a deadline, we focused on how we could add in the virtual assistant feature into the first design iteration quickly in order to carry out our first user testing session to validate our ideas.
Here is the link to the prototype
User Testing
Assessing the usability of the current design features
LEMERs based heuristic evaluation - A Self-Assessment
​
Assessing the usability of the Sephora app on our own, we did a LEMErS based heuristic evaluation to quickly judge Sephora's existing UI (User Interface) and we noted down our observations. This evaluation has its pros and cons but the best part about this evaluation is that you do not require any users for this and it also gave us something as a starting ground.
Watching people do things on the app
Testing out the new features
​
Okay, so we're not just watching them, we do have a couple of guidelines that we kept in mind when testing. The key things that we needed to have before a test takes place are the following:
​
-
Testing goals
-
Users to test
-
Tasks to give
-
What are we watching for (Metrics to set up)
​
Our 2 tasks revolved around the user being able to access the virtual assistant and the metrics we monitored was...
-
Whether they were able to complete the task successfully
-
The time of hesitation in between interactions on the app which can say a lot more about how effective the new features are
-
The design and the placement of the new feature on the app as compared to measuring the time for completion.
​
Compiling data to a report
Drawing a conclusion from the dataset
​
Once the testing was done, this data was compiled into a report. The data below could be viewed as a summary to draw a conclusion from the testing.​
​
Challenges and Takeaways
So much confusion and unfinished business
Things to address in the next design iteration and other takeaways
Re-visiting the ideation phase and doing more user testing
As we carried out our first user testing sessions, they were awkward and somewhat messy. Even though we had some tasks in mind, we had some troubles starting off the interview. I would take some pointers from Krug's script to ensure the users feel comfortable before starting the tasks. Having a video camera ready would be useful to take note of the user's behavioral cues and timing.
​
I felt that as this was my first project, the concept of design thinking and the practical aspect of diverging from one idea to the next was quite foreign to me and I look forward to sharpening this skill and coming up with more ideas.
​
​
Creating components and moving away from plugging in images
As much as it was tempting and easy to plug in images of the interface as a quick solution, I should be practicing on creating the interface from scratch and use the functions that figma have to help me be successful in this. It includes using components, creating design systems and using the various plugins and templates available in Figma.
