Improving an e-commerce experience
The online beauty industry is very competitive.
Helisa PL has been in operation since 2003. They are entering a new phase for their business and wish to improve their website to keep up with competitors, as they expand into the European and global market.
They find that they have a lot of repeat business but struggle to attract new online customers. They want to increase online sales and have a digital platform befitting the quality of the product.
They want to make it easier for customers to find out about their products and go through the checkout process. They have a range of products which can be hard to find.
The first step was to understand the issues users face when buying skin care products online, particularly for those products which people are not familiar with. I set out to empathise the pain points surrounding the issues online shoppers face, and from there propose a solution to improve the experience.
A proto-persona was used to brainstorm and consider what the user might be like. It was used it to begin empathising with the user straight away and to move beyond the term of 'user'. This would help me understand and ultimately solve their pain points.
I set out with the goal to understand women's habits when purchasing skin care products online, and the problems they face when finding new products. By understanding their process and pain points it would enable me to propose a solution to Helisa PL which avoids these issues. This is particularly relevant as an unknown new brand in a very competitive space. The research was conducted both remotely and face-to-face and the interviews recorded.
I also conducted competitor analysis and market research.
I synthesised my findings from research on post-it notes and then created an empathy map.
PERSONA & CUSTOMER JOURNEY
Talking to real people enabled me to clarify the persona. Mapping out the pain points in a customer journey map helped me understand the pain points at each stage of the journey when buying skin care products. This enabled me to break down the solution for each stage of the buying process.
Pain points such as the cost of products and delivery issues were not be considered. I highlighted the pain points I would consider throughout my ideation process:
I conducted a remote open card sort using Optimal Workshop with ten target users. I chose to conduct an open card sort because I wanted to gain insight into both the grouping and labeling of the categories.
Here are my results created in Sketch, which is based on my card sorting exercise:
Using my findings from card sorting I created a site map:
The ideation process began with creating as many ideas a possible, with pen and paper, regardless of their feasibility.
As part of my design sprint, I used a method called ‘Crazy Eights’s’ for about four hours.
I considered the different ways of addressing the pain points and then created an affinity map to highlight and group the main things to help me choose a direction.
Here are some examples:
HOW MIGHT WE?
A ‘how might we’ exercise helped me frame the problem which I would provide a solution to:
“How might we encourage people to try new products?"
User stories were used to determine primary product features, and I decided to focus on the journey for a new user looking for eye cream.
WIREFRAMES & PROTOTYPES
Wireframes were created using pen and paper and then digitalised in Sketch, and synced with InVision.
I developed the wireframes using a mobile first approach not only to account for a large number of mobile purchases but also because it fits with the marketing strategy which employs a large amount of social media for referrals.
Early digital version finding and buying a new eye cream:
I conducted testing to gain user input and feedback into my design process.
Usability testing was conducted using an InVision prototype for the mobile version. The most valuable testing method was the observational research, as it allowed me to view how the product worked as a whole with the user in control. The other testing methods were useful to answer simple questions and confirm the understanding of elements.
I also tested the desktop version at a later date.
Many changes were made following two rounds of usability testing. Here are two examples:
CREATING THE UI
I began by creating a mood board using Pinterest and Sketch. The client wanted me to keep a similar feel to the current brand, so I just wanted to develop it a little. I used many of the similar colours used throughout their current products but wanted to place a large emphasis on white space and product images for the design. I created a word mark for the purpose of the project as the business is changing its name.
The higher fidelity prototypes were then again with two more users to watch their interaction with the product and iterated upon again.
EXAMPLE OF ITERATION
ADDRESSING PAIN POINTS
Below are two example screens demonstrating how I tried to address the pain points with the design which was developed through iteration.
BEFORE & AFTER EXAMPLE
FINAL DESIGN: MOBILE
FINAL DESIGN: DESKTOP EXAMPLES
Overall, I am happy with the result and the solutions to the pain points I uncovered in research.
It is now easier for new users to find the products which they are looking for, with the increased prominence of product categories and the search bar. I also think that the improvement in the product page and review function would provide the customers with more confidence when buying new products.
The overall user experience is much simpler and easier to follow for users and I am happy with the results I gained from testing, praising its simplicity.
WHAT I LEARNED
For this project, I didn't want to simply redesign the existing website or uncover current usability issues. I really wanted to talk to users and understand the problems they face when buying new skin care products and create a new experience. Having this focus enabled me to concentrate on solving the issues users face, rather than improving a website and its current features.
I learned about the importance of information architecture and site structure during this project. It really helped me to break down the content and user flow.
Working on an existing website did present its own challenges. In addition to adopting a mobile first approach to improve responsiveness, I had to spend time analysing the existing product, as well as gathering and understanding the content, before working on my own solution.