Project detail
Improving product discoverability in
E-commerce website
An Ecommerce website redesign that involved in improving search experience and mobile responsiveness resulting in 28% increase in revenue and 32% increase in mobile adoption.
Promofit was solely offering fitness-related products as welcome gifts for gyms. I was tasked to revamp their website changing the way it looked and improve search experience, make it responsive for mobile users and designing a new feature that enables users to add their custom design to the products. After launching the new websites, the clients experienced, 28% increase in revenue, 32% increase in mobile adoption and 35% reduction in bounce rate.
The following metrics measured the success of the website re-design process. It was given to us from the clients after they reviewed their analytics after a month of launching the website.
28%
Increase in revenue through website
32%
Increase in mobile adoption
11 → 6 clicks
Add to cart flow
The team consisted of me (Designer), 3 Engineers, and a Product Manager. I led the design process and was responsible for
Gathering requirements and research data from clients
Defining features with Product managers and engineers
Designing the user interface for web, mobile and tablet screens.
prototyping and testing.
Assisting engineers in the implementation of the design.
One of the key focuses of this project is optimising mobile responsiveness. The traffic in mobile was very low and the clients wanted an easily adaptable mobile version of the website.
The irrelevant and overwhelming search experience was affecting the conversion and sales.
Another goal was to implement new customisation feature which enables the customers to add their custom designs to the products in addition to other attributes like color and sizes.
The clients provided us primary research data which they collected through analytics, ticket records from queries and surveys. They identified these data through analytics and user reviews. The main problems were
42% of users landed on the homepage and exited without interacting with products.
Mobile responsiveness is inconsistent.
Users relied heavily on search but found results overwhelming or irrelevant, leading to high bounce rates.
63% of sessions used search but only 14% clicked results.
The design process began with discovering the usability issues with the existing website. I identified several problems with the website. And these findings matched with the analytics from the clients.
I found competitors in our client's market in the Netherlands. I noticed patterns, navigations, banners and layouts. Most of the successful competitors exhibited common UI patterns and flows. I grabbed inspiration from them and started brainstorming the solutions for the above stated issues.
The goal was to understand their search experience, information architecture and product customisation feature if available.
Pattern
Issue
Type A: Direct redirect to product listing
Users lose context
Type B: No search suggestions
High typing friction
Type C: Rich suggestions with previews
Helps users decide faster
KEY INSIGHT
Users benefit from search suggestions that provide product context before navigation. This allows them to preview results without committing to a page change.
Implemented rich search suggestions including:
• product name
• variant preview
• product image
• quick link to listing page
I investigated all the competitor website for categories menu and we discussed all the pros and cons and we decided these patterns will not fit us for two reasons.
All the categories menu in the headers in the compeitors consist of one sub-categories. But our website consisted of two levels of sub-categories. Our team descided it won't suit our content.
The sticky header is so big that it takes so much of the space in the screen. The categories rolled out occupying the screen when users accidentally hovered over the categories leaving them frustrated.
We created a collaborative session that involves Me(Designer), UI Developers, Backend developers and a project manager to prioritise features based on effort and impact because of budget and time constraints.
This new feature lets users add their own design to be engraved on the product to make it more personalised.
We had a meeting with developers and project manager to discuss the technical feasibility and time required to build and decided on the following flow as final.
The key goal behind this flow is for users to add their own designs in to the product. But when doing so, I noticed that it could be done effectively with lesser clicks.
I created an interactive prototype and and tested for number of clicks and task completion rate. I reduced the process of adding a product to the cart from 11 clicks to 6 clicks. I proposed this idea with the user testing data to get buy in from the product manager and clients to build the feature.
I started UI design for the website. I was assigned tasks in weekly design sprints which involved designing, feedback, iteration and presenting the designs to clients to get approval.
For the website to be familiar to the users in the Netherland, we kept the design similar to the other competitors in Netherland. The websites involved big fonts, bright colors and similar website structures in terms of navigation and content. I designed interfaces in such a way that it retains all the common patterns and a more clean look when compared to the old website.
The entire website was built in Magento framework. Bug fixes and other optimisations like slower loading time were also done during the development process.
A lot of information is packed in the header, increasing cognitive load for users.
Lacking visual hierarchy of elements.
Home page featuring only categories and not products.
Not optimised for mobile.
A minimalistic and clean header with a sleek logo and uniform icons for visual consistency.
The main action of the header is emphasised with search bar taking up more space.the
Products are included right after hero section increasing the chance of clicking and reducing bounce rate in turn.
Highly responsve across mobile and tablet.
The focus was to
Show enough information like descriptive name, stocks remaining, comprehensive image, price of the product and number of search result.
Option for the user to view and go to the listing page at their will.
The way the competitors website had their categories menu would not suit our website. So I had to research other patterns and interactions. I proposed the widely popular and successful pattern that Amazon follows.Since the pattern fit our content and it was widely used in ecommerce websites, this design was approved. Also it reduces accidental opening of the modal because it opens on click and not hover.
I had very limited time to test but I tried my best to make sure the website is usable and reach the business goal. I tested designs early and got feedbacks and continuously iterated to save time and to move in the right direction.
SIMPLICITY ENHANCES CONVERSION
Simplified navigation and checkout processes directly contributed to reduced bounce rates and increased conversion rates, proving that a frictionless experience drives customer satisfaction and sales.
MOBILE OPTIMIZATION IS NON-NEGOTIABLE
The significant rise in mobile conversions post-redesign demonstrated the necessity of prioritizing responsive design and mobile-first development strategies.
I DO NOT HAVE TO RELY ON PERFECT CONDITIONS TO TEST MY DESIGN
I always showed my design to my colleagues as soon as I design a new element or section to get an objective set of eyes and ask them to use the screen to check the usability and look and feel. This saved me lot of time.
HAVE PAGINATIONS FOR PRODUCT LISTING PAGES
,I wanted to add a few features like pagination which I thought would improve users to navigate back and forth, but the client did not want that. I had to compromise ideas like that, and I understood that at the end of the day, it is about the business needs.
CARD SORTING FOR LOGICAL CATEGORISATION
Fixing the search bar helped a lot, but I also believed that it would be more effective to fully understand why users cannot find products they were looking for. Since the categories menu plays a significant part in finding products, I would have used a card sorting exercise to group products into certain categories based on users' logic.