E-commerce website

Curlify

Contributions

Competitive Analysis, User Research,Visual Design, Prototyping

Timeline

Dec 2020- Feb 2021

hero Image.png
Creating a one-stop shop that allows users to shop their favourite hair products through an engaging and easy to use experience

The problem with online hair shops

There are many online hair shops but their designs are somewhat outdated, they overload their pages with excessive information and have a long and confusing checkout process, this results in an overwhelmed user which then causes the experience to fall short of expectations.
My first step was to find out more about the problem, just how big it was and discover any type of opportunities. I spoke to a few users to get an overall feel of the problem space.

I feel like these big beauty websites don't cater to afro hair. You can never find the small brands that we all know and love thats why I always drive to the hair shop to get what I need.

I prefer to shop in store, the websites have so much stuff that I don’t know where to start.

It took me so long to figure out the checkout process at Pak’s that I gave up and bought the products from another retailer.

What are Curlify's goals?

The high-level goals were to create a website that is perceived as modern and trustworthy. This project's scope was to identify the issues surrounding the user experience of the competitor's websites, map the potential solutions based on that research and design a new website that also provides unique features to set Curlify apart from other platforms.

What is already out there?

I researched other websites that offered similar services to understand what is already being offered on the market tested and prepared a competitive analysis for 3 of them. Pak’s and Shaba were picked as direct competitors and Feelunique as an indirect competitor. I went for the SWOT planning method to present my insights.

Feelunique SWOT Analysis
Feelunique SWOT Analysis

press to zoom
Shaba SWOT Analysis
Shaba SWOT Analysis

press to zoom
Pak's SWOT Analysis
Pak's SWOT Analysis

press to zoom
1/3

Finding more about the users

Before deciding on what features to implement I ran a competitive analysis testing session with 3 users where I had them perform the same tasks on the 3 competitor’s websites. This was followed by user interviews to cross-examine their responses to confirm that the findings from the competitive analysis were indeed problems amongst users.
I conducted interviews with 10 users to dig deeper and get more qualitative data and gathered all my findings to get more insights.

Difficulties navigating through pages

When asked to find a certain product on competitor websites 60% of users had difficulty in knowing where to start. When asked why they mentioned it was because there was too much going on the homepage.

No product information makes browsing frustrating

Product information is very important when deciding whether to purchase a product. 2/3 of competitor websites don't provide enough product details. 

A good experience brings returns

Most users know what they need before shopping and frequently buy the same products. They appreciate a good customer experience, which makes them shop more often.

Checkout process is extremely important

First-time users don’t enjoy creating an account in order to make a quick purchase. Checkout should be clear and easy to follow.

Visual representation of the customer experience

To get a better understanding of the scope of this project I created a user journey map to get a streamlined vision for the website. This allowed me to keep the typical user and important features in mind for the next phase of the project.

Exploring different solutions

Once I organised all my insights from the research phase I began to sketch a few different solutions. Together with the competitor analysis findings, user pain points I determined a stack of features that should be in the first iteration.
I went for a mobile-first approach so that I could only focus on the important elements providing a strong base to build on.

Feedback and iterations on initial ideas

After finishing the wireframes I added some copy and images and built a prototype to begin usability testing, this allowed me to assess how users would interact with the suggested website solution and confirm that it met their needs.
I had 4 participants walk through the website, asking for their opinion on their experience along the way and providing feedback at the end.

  • Put the designs through WCAG to make page colours are accessible

  • Changed input steppers so they are more intuitive to use

  • Changed the ‘heart’ button's position so that the main CTA ‘Add to bag’ could stand out

  • Reduced the number of font weights this makes the section seem less cluttered

  • Replaced the ‘Load more’ button with pagination, this helps users keep a mental location of a review.

Final design features

Searching for the right product

  • Products are organised in general categories which then can be filtered or sorted if the users wishes to. 

  • Searching for a product is made easy on the search bar as suggestions are populated as the  user introduces new characters.

Detailed product description

  • All important information about a product is available at the bottom, progressive disclosure was used to not overwhelm users with too much information

  • Relevant suggestions and reviews are displayed in the same page

Straightforward checkout process

  • Clean shopping bag and checkout page. Every information is summarised and separated so it doesn't confuse new users.

  • There is an option to checkout a guest too

Final screens

Looking for the right product
Product page desktop v
Homepage mobile and desktop
Final Screens4
Checkout and Wishlist mobile

You can explore the prototype below

Challenges and lessons

Stepping away from my own assumptions
I empathized with users as I have also had really unsatisfying experiences when shopping online. As much as I felt that I had a good idea of what the website should contain I had to detach from my own bias in order to not affect the design decisions.



Building a design system
The project took me longer to complete due to the lack of a concise design system at the beginning and stepped back for a while to really work out on the style of the website, I felt that I took 2 steps back but in reality, it saved me countless hours by having all the components defined and ready to use, this allowed me to really dig deep into Figma and explore its functionalities.



Spending time recruiting the right participants
Due to low resources, I wasn’t able to recruit many participants from my target audience. I did continue testing with the participants I had available, this resulted in having some results that didn’t translate into something usable. This reinforced how crucial it is to select the right participants for user research.



Taking into account the user needs
As I was working on the designs I quickly learned how important it was to check in with the user insights frequently, it’s easy to get carried away designing and forget the user needs. I ensured to organise and summarise all my insights so I could quickly get back to them when needed.