MARKET
I'd like to share my story about redesigning snippets at Yandex Market.
First and foremost, let's talk about Yandex and Yandex Market. Yandex is the largest IT company in Russia, comparable to Google but with even more services. Yandex offers solutions for various offline needs, such as taxi services, food delivery, car sharing, and of course, online shopping through Yandex Market. Yandex Market serves as a marketplace and is a part of the biggest IT company in the Russian Federation. It boasts a daily audience of over 4 million users and a monthly audience of 20 million.
Now, let's dive into the specific aspect I want to discuss: snippets or product cards in search results (and more, to be honest).
APP STORE →
THE PROBLEM
Why did we decide to redesign the snippets, and why did we begin with this particular part of the service? The answer is simple - because they are one of the most fundamental components of Yandex Market. However, let's take a brief journey into history. When Market was initially launched, it was known as Beru, a marketplace that was jointly owned by two major Russian companies, Sberbank and Yandex. However, due to political circumstances, Sberbank decided to sell its share to Yandex, resulting in Yandex taking over the company's development as a separate entity. This transition led to the rebranding of Beru to Yandex Market, and with the rebranding came the need for a new, strong visual identity.
Additionally, as the range of products available on Market expanded, it became evident that the existing snippet design could not accommodate the diverse range of items being sold. While Market originally specialized in electronic products such as notebooks and smartphones, it soon expanded to include cosmetics, groceries, fashion, and more. The old snippet architecture simply could not handle this growth, which prompted us to embark on the redesign journey.
GOAL
In short, the goals were as follows:
Successfully launch the redesign on Yandex Market without negatively impacting metrics.
Create a system for interaction between cross-platform teams within the snippets.
TASKS
Develop a new architecture for snippets to scale functionality.
Update the visual design of the snippets.
Designing the snippets and their architecture.
Creating specifications for development.
Updating the design system.
Scaling ideas across product and development levels.
RESPONSIBILITIES
IDEA
Similar to Perekrestok, the idea came from the offline world. Yandex Market initially specialized in selling electronics. To provide a vivid example, let's consider the company Apple. Selling Apple devices and selling apples are two entirely different things. If in offline stores they are approached differently, why not do the same online? Apples in a grocery store are piled together, while an iPhone is showcased on a separate stand. We applied the same concept.
Orders increased by 1.5%.
The button conversion rate for "Add to Cart" improved by 5.6%.
It's important to note that these numbers may change as these are results from the first two weeks.
However, the most significant achievement for me was creating a new language for interaction between design, development, and product teams.
This was possible because the data model and architecture became unified, allowing for faster decision-making and quicker delivery of value to our customers.
MODEL
To understand how it works, we established a simple model—the approach we would take to handle information. Let's take clothing and technology as examples of how we would sell differently on Yandex Market.
Let's examine the model for technology.
Now, let's consider a dress as an example. You already understand how various elements are represented:
Since decision-making and actions such as selecting the size and color happen within the product, there is no purchase button displayed. To simplify matters, we didn't include any pop-up windows, allowing users to thoroughly examine the product.
- The first point is the photo. People should be able to quickly understand what it is and which model it is.
- The second point is the information. This includes text providing more detailed descriptions.
- The third point is the price.
- The fourth point is the action button.
- A large, yet not overpowering, product photo. It is important to quickly grasp what it is.
- Detailed information, as there can be multiple options when choosing a specific model.
- The price, which is highlighted if there is a discount.
- The action button, always positioned at the bottom for quick and convenient purchasing.
- A large photo that plays a significant role in the decision-making process since visuals play a major part.
- Minimal information, as images provide more information about the product than text.
- Lastly, the price, an essential factor in decision-making.
We approached cards differently, making direct visual distinctions. This is not commonly seen in online marketplaces, though it is implemented by individual online stores (for example, Farfetch). The reason why others don't adopt this approach is mainly due to costs. However, we had the opportunity to create a unified solution that would save the company an estimated 3,000,000 rubles in development costs.
TESTS
We needed to validate our hypotheses, so we conducted two user interviews (with five participants in each interview).
The researcher and I asked questions to compare the old and new versions, while also conducting non-moderated studies to determine how quickly people found specific information. In all cases, users preferred the new version, noting its improved readability and clarity of information. Additionally, users found the necessary information on the snippet 3.6 seconds faster.
For our research, we utilized Yandex's own service, Toloka, and conducted in-depth interviews using established methods.
DESIGN
Now let's take a look at the design of the new snippets. One unique aspect of the design approach was that it was filled with numerous components that lived separately.
Why was this done? One of our goals was to create an architecture that would allow different teams to manage their respective parts within the snippet.
For example, we had a loyalty program team called "Yandex Plus" that offered bonuses to people for purchasing products. They had their own design and metrics. We needed to create a space for them to contribute and easily add new functionality. We accomplished this at the development and design levels, and most importantly, at the product level. Everyone understood how and where they could integrate and on what rules. This significantly improved the speed of delivering features (TTM - Time to Market).
Results:
Thanks to the new snippets, we launched new sections for fashion and FMCG (Fast-moving consumer goods).
TEAM
Stakeholders: Tatyana Umryaeva [CPO]
Management: Denis Osipov [SPO], Marina Pridachuk [PO]
Development: Aleksandr Lukin [TM], Aleksey Kovalenko [SD], Igor Gorelov [Android D], Ivan Sekisov [D], Yulia Pashkova [QA], Denis Konstantinov [D], Eugeney Kurapov [iOS D]
Design: Taras Sharov [Art Director], Andrew Sakharow [Lead Designer]