Ozon: redesigning
shelf component
Making navigation in complimentary items smooth and delightful
What is Ozon?
Ozon.ru is the place where you can buy nearly anything from best selling books to the newest smartphones. As well as Amazon, Ozon started as a book store and became one of the biggest online stores in Russia.
Shelfs is a universal component that is used all over the site to present scrollable sets of items. During my work I've made a complete redesign of this component, to make it easier to use.
Typical shelf before redesign
Books section of the site
The Problem
This old component was outdated, and worked poorly with item sources on the site. Also, there were only one style of shelves, and it had a number of UX challenges.
My Role
I did research and developed several new styles for different occasions, and worked with the developers to make it work the right way.

Several different types of new shelves
In addition, I've created this promo animation presenting changes made on the site:
These new shelves also solve some the UX problems of the previous version. For example, now you can see the full name of the product by hovering over it. Before, It was impossible and very inconvenient for customers when there were similar products on the shelf:
Also, I have developed several component styles for different occasions. With this you can pick the most suitable one, while constructing a static page on site.
For auto-generated ones, like on the Product Detail Page, a basic style is always applied.
Basic shelf style after redesign
A nice status bar now appears while scrolling a shelf without making much visual noise when unused.
And here is an example, of what a static page can look like when different types of shelves are used:
Results
I've updated the appearance, solved the UX challenges of previous versions and developed a set of different styles to make the site more diverse, and the experience smoother.

Also while working on this case I've initiated the development of a new static page constructor. This allows section managers to make and rearrange their pages easier without the use of code, by choosing styles and product sources for the shelves and another components on the page .
Items are now larger and have more space to breathe. Also, I've added more useful information, such as a place for various marketing badges, and discount information.
.
Made on
Tilda