CASE STUDY

Improving an e-commerce experience 

new covernew cover

SUMMARY

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.

 

Artboard 123Artboard 123
ganttgantt

THE PROCESS

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.

ArtboardArtboard

PROTO-PERSONA 

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. 

proto-personaproto-persona

RESEARCH 

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.

researchresearch

EMPATHY MAP

I synthesised my findings from research on post-it notes and then created an empathy map. 

DesignLab - Empathy MapDesignLab - 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.

post research personapost research persona
helisa customer journeyhelisa customer journey

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:

Artboard 4Artboard 4

CARD SORTING

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:

Card sortingCard sorting

SITEMAP

Using my findings from card sorting I created a site map:

  

 

sitemapsitemap

IDEATION

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:
  

IMG_20170612_143908IMG_20170612_143908

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.

USER FLOW

 

USERFLOQUSERFLOQ

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:

 

wireswires

TESTING

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.

 

testingtesting

KEY CHANGES

Many changes were made following two rounds of usability testing. Here are two examples:

 

ArtboardArtboard

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. 

moodbaordmoodbaord
ui kitui kit

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

iterationiteration

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. 

example 1example 1
example 2example 2

BEFORE & AFTER EXAMPLE

before and afterbefore and after

FINAL DESIGN: MOBILE

FINAL DESIGN mobileSADxxFINAL DESIGN mobileSADxx

FINAL DESIGN: DESKTOP EXAMPLES

FINAL desktopFINAL desktop

CONCLUSION

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.  

 

[unex_ce_button id="content_41red9vq3,column_content_5znp63new" button_text_color="#20ccba" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 68px 15px 68px" button_border_width="2px" button_border_color="#20ccba" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#bcbcbc" button_border_hover_color="#bcbcbc" button_link="http://www.iamdanandrews.com/work/nomad" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]View Nomad[/ce_button]
[unex_ce_button id="content_41red9vq3,column_content_cy3b1w5qv" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#20ccba" button_padding="15px 85px 15px 85px" button_border_width="2px" button_border_color="#20ccba" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#bcbcbc" button_border_hover_color="#bcbcbc" button_link="daniel.andrews@bath.edu" button_link_type="email" button_link_target="_blank" has_container="" in_column="1"]Send email[/ce_button]