E-commerce website concept
Curlify
Contributions
Competitive Analysis, User Research,Visual Design, Prototyping
Timeline
Dec 2020- Feb 2021
Creating a one-stop shop that allows users to shop their favourite hair products through an engaging and easy to use experience
The current 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 was already being offered on the market, and tested and prepared a competitive analysis for 3 of them.
Pak’s and Shaba were picked as direct competitors and Feelunique as indirect competitors. I went for the SWOT planning method to present my insights.
Finding out 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 organized in general categories which then can be filtered or sorted if the users wish 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 on the same page
Straightforward checkout process
Clean shopping bag and checkout page. Every piece of information is summarised and separated so it doesn't confuse new users.
There is an option to check out a guest too
Final screens
 |  |  |
|---|---|---|
 |  |
You can explore the prototype below (desktop only)
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 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 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's 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 organize and summarise all my insights so I could quickly get back to them when needed.