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
35%
Decrease in bounce rate
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.
The primary business goal of redesigning PromoFit’s e-commerce website is to enhance the overall user experience and drive customer engagement. By creating a more intuitive, visually appealing, and user-friendly design, PromoFit aims to improve site navigation, reduce cart abandonment rates, and increase conversion rates. The redesign will also focus on mobile responsiveness.
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
Users land on the homepage and leave without interacting further resulting in higher bounce rate
Mobile responsiveness is inconsistent.
Customers are not able to find the products they were looking for. They rely on search but say search results are irrelevant or overwhelming.
Search experience is weak and frustrates users.
The design process began with understading the existing problems. Then I went on to identify opportunities through market research. Then we ideated potential solutions, prioritised features, built it and iterated to acheive the results.
The design process began with discovering the usability issues with the existing website. I wrote down key tasks for each page and performed them by myself first and then asked my colleagues who did not work on the project to simulate new users of the website. I identified several problems with the website.
According to the usability evaluation, there were few problems in the current version of the website. The main problems were
Outdated design
Poor mobile experience
Ineffective search functionality
Long loading speeds
I used sitelike and similarweb to find out competitor website in our client's market in Netherland. 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 functionality, categorisation and their customisation feature if available.
Few competitors have search suggestion feature where, when a user types in the search bar it automatically takes them to product listing pages without any warning to the users. This made it harder for the users to track which page they are in the website.
Few competitors had no search suggestions . Since many users relied on search suggestions, they are frustrated to type the whole name of the project and frequently getting it wrong. Although one of them has a suggestion, we felt it was not adequate for decision making.
When some competitors had too much and too little, some had just enough information needed for the users to make an informed decision. This gave them a little preview rather than directing them somewhere where they may not want to go.
Price of the product
Name, variants and a little description of the product.
Image that shows variants rather than just the product.
Option for the users to go to the listing page rather than automatically directing them.
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.
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.
The client also wanted to add a new feature where users can customise their choice of products according to certain attributes like color, size, quantity and add their own design to be engraved on the product to make it more personalised.
I researched competitors who did very similar flows in there website and proposed various flows and interactions. We had a meeting with developers and project manager to discuss the usability, technical feasibility and time required to build and decided on the following flow as final.
The key goal behind this flow is to have minimum clicks and to help customers recognise the information required rather than recalling it to reduce frustration and enable them to make fast decisions. I created an interactive prototype and tested it with various colleagues, and checked the number of clicks and task completion rate. I reduced the process of adding a product to the cart from 11 clicks to 6 clicks through iterations.
I had very limited time to test but I tried my best to make sure the website is usable and reach the business goal. Everytime I design a page, I would ask my colleague to do a quick walkthrough of the page to check if the design was intuitive before I send it for project managers to review in order to save time.
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.