Context
Frolickers is fashion e-commerce brand with the focus on high-quality reversible items for men and women.
Problem
Users land on the website but few of them convert. It is especially relevant for mobile version.
Role
Timeframe
UX/UI Design, User Research
Oct-Nov 2024
RESEARCH
Analysing the current website by heuristic analysis
​​Having analysed the entire user flow from the home page to the check out, we revealed the common areas of improvement:​​
​1. Information Architecture.
Many pages lacked structured and clear content which hindered the website's shopping experience.​
2. UI Consistency.
Many elements elements (buttons, spacing, headers, icons) were inconsistent and did not match fashion e-commerce norms which also decreased users' trust.​
3. Microinteractions.
There was a lack of uniformity across interactions so users could intuitively recognise actions and navigation.
_edited.png)
USER TESTING OF THE CURRENT WEBSITE
To check how these findings were noticeable by users and to better understand the audience, we decided to conduct user testing of the current website.
​
We asked 10 users to try to buy an item on the website and share their overall experience. Overall, their feedback reinforced the feeling of lack of guidance and confusion. But we were also able to identify the main pain points.​
-
​​Users did not understand what the brand is about when they landed on the home page. The home page seemed very long and cluttered.
-
The "ways to wear" selection under the image (e.g. Halter or Asymmetric for the item on the left) was not clear and made users think it was a selection of different products.
-
Category page lacked guidance and was too different from what e-commerce standards are: title looking like a button, no alignment, elements floating etc.
.png)
COMPETITOR & FEATURE ANALYSIS
​After presenting our findings to the client, we decided to focus on the main pages that create engagement for the users and encourage them to convert: home, category and product pages.
Further competitor analysis allowed us to make sure we are following the industry standards: we highlighted all the features that are considered best practices & must-haves for the e-commerce.
.png)
IDEATION: COLLAGE
We decided to take inspiration from other leading brands and create a collage of ideas: this way we could find our redesign solution but also make sure we are following the industry standards.
As for the Home page, we decided to do A/B test of 2 versions: the one with more creative overlap of campaign and e-commerce visuals and the one with carousel category banner blocks.
ITERATIONS: FROM CURRENT WEBSITE TO HIGH-FI
Home page
Taken into consideration the testing feedback, we made the redesigned home page short and visually appealing. As for the A/B test, most users preferred banner carousel version as it was more minimalist and showed the products better.
Category page
Product page
.png)
All the content was there but we had to structure it to make the user experience more intuitive. The most difficult part included explaining the reversible or convertible concept: from selection placed under the image or title we went for images inside the image to help users understand it is the same item.
FINAL HIGH-FI
MEASURING SUCCESS & KEY LEARNINGS
To understand the success of the redesign it will be necessary to to measure the change in conversion rate, CTR to the next pages in the check-out flow and bounce rate of the pages. Once these KPIs are measured, we can determine further iterations.
​
This project allowed me to dive deeper into the e-commerce segment and showcase how well-executed design can impact the shopping experience and user intention. I learnt that user tester recruiting can be challenging and it is crucial to have a user persona reference to find users for testing.