Homepage Category Cards Redesign. Improving navigation and visibility

Fragstore is an e-commerce platform focused on gaming and collectible products. Users were ignoring the category block on the homepage and going straight to products. The redesign strengthened the role of categories as an entry point by improving hierarchy, readability, and visual emphasis — increasing engagement and navigation to categories

Problem

The category block was placed on the homepage, but users didn’t interact with it and continued scrolling without entering categories. As a result, navigation to the catalog via categories was rarely used

Problem

The category block was placed on the homepage, but users didn’t interact with it and continued scrolling without entering categories. As a result, navigation to the catalog via categories was rarely used

Problem

The category block was placed on the homepage, but users didn’t interact with it and continued scrolling without entering categories. As a result, navigation to the catalog via categories was rarely used

Goal

Make categories a clear and noticeable entry point to the catalog by increasing their clickability and simplifying site navigation

Goal

Make categories a clear and noticeable entry point to the catalog by increasing their clickability and simplifying site navigation

Goal

Make categories a clear and noticeable entry point to the catalog by increasing their clickability and simplifying site navigation

Role

Led the full UX/UI cycle — from analyzing user behavior to designing and implementing the solution

Conducted analysis of the user flow and identified low interaction with categories

Developed hypotheses and explored visual solutions

Designed a new format for category cards with a focus on content and hierarchy

Handed off designs to development and supported implementation

Participated in solution validation and outcome evaluation

Category CTR

increase the number of transitions to categories by improving their visual visibility

Drop-off before interaction

reduce the share of users ignoring navigation to categories

Time to first click

reduce the time to first interaction with the catalog

Users scan the first screen and interact with the most visually prominent elements. The category block didn’t attract attention and was perceived as secondary. The main focus shifted to the product cards below

Hypotheses

If the visual priority of the category block is increased, users will interact with it more often and use it as the main entry point to the catalog

If icons are replaced with product images, users will recognize categories faster and click on them more often

If the size and contrast of the cards are increased, the block will become more noticeable and will no longer be ignored while scrolling

If users find a category faster, the time to first interaction with the catalog will decrease

Design Solutions

Problem

The category block was placed on the homepage, but it didn’t fulfill its navigational role — users didn’t interact with it, as the cards appeared weak and didn’t clearly communicate their content. As a result, navigation to the catalog via categories was rarely used

Problem

The category block was placed on the homepage, but it didn’t fulfill its navigational role — users didn’t interact with it, as the cards appeared weak and didn’t clearly communicate their content. As a result, navigation to the catalog via categories was rarely used

Problem

The category block was placed on the homepage, but it didn’t fulfill its navigational role — users didn’t interact with it, as the cards appeared weak and didn’t clearly communicate their content. As a result, navigation to the catalog via categories was rarely used

Solution

I strengthened the role of categories as an entry point to the catalog by redesigning their visual appearance. I replaced icons with more expressive cards featuring product images, increased their size, and enhanced visual hierarchy to make the block more noticeable on the homepage

Solution

I strengthened the role of categories as an entry point to the catalog by redesigning their visual appearance. I replaced icons with more expressive cards featuring product images, increased their size, and enhanced visual hierarchy to make the block more noticeable on the homepage

Solution

I strengthened the role of categories as an entry point to the catalog by redesigning their visual appearance. I replaced icons with more expressive cards featuring product images, increased their size, and enhanced visual hierarchy to make the block more noticeable on the homepage

This made the categories clearer and more engaging, making users more likely to interact

Iteration 1

At the first stage, I focused on enhancing the visual prominence of the categories while keeping their existing structure and placement

Solution

The category block still didn’t attract enough attention and wasn’t perceived as a navigation element

Insight

Categories became more noticeable, but they still received less attention compared to products

Conclusion

It was necessary to further increase their visual priority and make them more prominent and clickable

Iteration 2

In the second iteration, I rethought the approach to how categories are presented and strengthened their role as a key entry point to the catalog

Solution

Replaced compact cards with larger, visually prominent banners

Added content-driven imagery that reflects each category

Increased contrast and improved the visual hierarchy of the above-the-fold section

Aligned the block’s visual style with the overall design system of the product

Conclusion

Categories became a primary navigation element, driven by visually rich, content-based banners

As part of this project, I didn’t just update the visual design of the block, but strengthened its role as a key navigation element on the homepage

+20%

increase in category clicks

–12%

decrease in users ignoring the block

–10%

reduction in time to first click

Next case

ALINA Shumitskaia

Behance

Dribbble