Classified
Store
Cars
Spares
B2B
Car spares store
Car spares store
Car spares store
Development of the order checkout process in an online store, payment page that offers the customer the option to choose the most convenient payment method.
Development of the order checkout process in an online store, payment page that offers the customer the option to choose the most convenient payment method.
Development of the order checkout process in an online store, payment page that offers the customer the option to choose the most convenient payment method.
2022 - 5 months
Timeline
Product Designer
My role
User Flows, Prototyping, UXR
My contribution
Spoiler
Spoiler
If you have no time to read
If you have no time to read
What we had
The product's parts store could only purchase one item at a time, as the Cart had not yet been sold. My goal was to enable users to buy several products from different sellers at a time and make the flow as simple and convenient as possible
What I've done
I analyzed analytics data, gathered user reviews from support, conducted benchmarking, created information architecture, interviewed 10 users, built a service level model (СJM), tested draft layouts, and oversaw final layout development
What we've got
The share of users who add products to the cart from viewing the card has doubled
PV increased, among paying users the number of products per user increased by 16% on average from 1.7 products to 2 products per user
Overview
Overview
Kolesa Spare parts store is an online marketplace for the sale of spare parts for different types of vehicles from officially registered seller stores.
Kolesa Spare parts store is an online marketplace for the sale of spare parts for different types of vehicles from officially registered seller stores.
Problem
Problem
1
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process. According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
1
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process. According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
1
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process. According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
2
According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
2
According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
2
According to the analytics data, we had a clear step where users were dropping out. Having also turned to the support service data, we realized that on average 7 out of 10 calls and complaints about the spare parts store were related to the lack of a basket for purchasing several units.
*I have blurred the digits as the data is confidential
*I have blurred the digits as the data is confidential
*I have blurred the digits as the data is confidential
Design Process
Design Process
My role in this design process was the UX/UI designer. I led the design, from structuring the information architecture, improving the user flow to the final user interface design. Below is an overview of the steps that I was responsible for in the process; after that, the developers took over to realize the designs in code.
My role in this design process was the UX/UI designer. I led the design, from structuring the information architecture, improving the user flow to the final user interface design. Below is an overview of the steps that I was responsible for in the process; after that, the developers took over to realize the designs in code.
My role in this design process was the UX/UI designer. I led the design, from structuring the information architecture, improving the user flow to the final user interface design. Below is an overview of the steps that I was responsible for in the process; after that, the developers took over to realize the designs in code.
Goals
Goals
Give people the opportunity to buy several spare parts at once
Give people the opportunity to buy several spare parts at once
Give people the opportunity to buy several spare parts at once
Hypothesis
Hypothesis
The introduction of a shopping cart will increase the number of orders and conversion per order, due to the fact that it will become easier for people to place several orders at the same time
The introduction of a shopping cart will increase the number of orders and conversion per order, due to the fact that it will become easier for people to place several orders at the same time
The introduction of a shopping cart will increase the number of orders and conversion per order, due to the fact that it will become easier for people to place several orders at the same time
Definition of Done
Definition of Done
1
Increased conversion rate to product purchases
1
Increased conversion rate to product purchases
1
Increased conversion rate to product purchases
2
For UXR respondents, it is not difficult to go through the entire user journey on prototypes; UJM takes no more than a minute
2
For UXR respondents, it is not difficult to go through the entire user journey on prototypes; UJM takes no more than a minute
2
For UXR respondents, it is not difficult to go through the entire user journey on prototypes; UJM takes no more than a minute
3
The layouts depict the flow of purchasing several products, taking into account the business cases indicated on the next slide
3
The layouts depict the flow of purchasing several products, taking into account the business cases indicated on the next slide
3
The layouts depict the flow of purchasing several products, taking into account the business cases indicated on the next slide
4
Layouts have passed quality checks and are approved by designers
4
Layouts have passed quality checks and are approved by designers
4
Layouts have passed quality checks and are approved by designers
Bussiness cases
Bussiness cases
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process.
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process.
Now people in the marketplace do not have the opportunity to buy several spare parts at a time. Each order has to be placed separately, which complicates the purchasing process.
Use cases
Use cases
Based on a qualitative survey of my friends (5 people) and acquaintances, I received information about what the ideal user path is for a person who wants to purchase one or more products and has already presented a picture of MVP. Next, I quickly sketched out a draft version of the use cases
Based on a qualitative survey of my friends (5 people) and acquaintances, I received information about what the ideal user path is for a person who wants to purchase one or more products and has already presented a picture of MVP. Next, I quickly sketched out a draft version of the use cases
Based on a qualitative survey of my friends (5 people) and acquaintances, I received information about what the ideal user path is for a person who wants to purchase one or more products and has already presented a picture of MVP. Next, I quickly sketched out a draft version of the use cases
I want to be able to buy the product quickly
Hypotheses
Add an “Add to Cart” button in the product card
This way I won’t have to go to the product page again if it’s not necessary.I want to be able to add multiple units of a selected product
Hypotheses
Add buttons (+ / -) and display the number of units next to the product after I add it to the Cart and also change this number of units in the Cart itself opposite the selected product
01
I want to see my items in the cart
Hypotheses
Add a cart icon with a badge for the number of items in a prominent place
This way I will always have access to the Cart and see how many products are thereHaving entered the Cart, I want to see information
about the products in it: Name, photo, cost, seller, brandHypotheses
Make a clear view of the card with a convenient architecture above the listed necessary items
You can also make it possible to click on a product in the cart and see more information about the product. You can do this on the bottom sheet
02
I want to be able to buy an item for multiple model brands
Hypotheses
Add a function for changing cars not only in the Search results, but also in general on the main page of the marketplace
This way, from the very beginning of the product search process, I can understand for which car model I am looking for a spare part, and not just in the search resultsMake it possible to add products for different brands of models to one cart
This way it will be convenient for me to find the right products for different brands of cars and make a purchase immediately in one click, and not separately for each brand of car03
I may be hesitant to purchase some items in the Shopping Cart I may not be ready to purchase some items from the Shopping Cart Make it so that I can check out the purchase of selected items for me
Hypotheses
Add checkboxes next to products
This way I can selectively mark those products that I am going to purchase.
So I have the opportunity to keep in view (In the cart) those products that I have not checked out, but perhaps I will check them out another time. The cart will be for me the Favorites of my goods04
I want to see the total cost of all items in the cart
I want to pay for all the items in my cart that I want to buy
Hypotheses
Create a fixed bottom plate with the “Buy” button and the cost of all goods in the cart
Initially, I am shown the total price of all the goods in the cart. Then, when I mark the goods that I want to buy, I am already shown the total cost of the goods that I have marked.
Then I can easily proceed to the next steps of Checkout with the selected products
05
Current Map (As is)
Current Map (As is)
It is always important at the beginning of any changes to understand and see the full picture of what will have to be changed, so I compiled an 'AS IS' flow and marked all the steps. Now I clearly see in what step I will have a Cart and how it will affect the further flow. Also I understand that it is necessary to add
It is always important at the beginning of any changes to understand and see the full picture of what will have to be changed, so I compiled an 'AS IS' flow and marked all the steps. Now I clearly see in what step I will have a Cart and how it will affect the further flow. Also I understand that it is necessary to add
It is always important at the beginning of any changes to understand and see the full picture of what will have to be changed, so I compiled an 'AS IS' flow and marked all the steps. Now I clearly see in what step I will have a Cart and how it will affect the further flow. Also I understand that it is necessary to add
1
It is necessary to add a fixed menu, since we already have more vital sections along with the Cart and it is necessary to constantly keep it in sight
1
It is necessary to add a fixed menu, since we already have more vital sections along with the Cart and it is necessary to constantly keep it in sight
1
It is necessary to add a fixed menu, since we already have more vital sections along with the Cart and it is necessary to constantly keep it in sight
2
Between the step of adding a product to the cart and the checkout, we create a Cart page
2
Between the step of adding a product to the cart and the checkout, we create a Cart page
2
Between the step of adding a product to the cart and the checkout, we create a Cart page
Competitive analysis
Competitive analysis
I then carried out an analysis of the products in the market that take advantage of the people and taught them the flow of purchasing goods and products by noting the inconveniences and inconveniences.
I then carried out an analysis of the products in the market that take advantage of the people and taught them the flow of purchasing goods and products by noting the inconveniences and inconveniences.
I then carried out an analysis of the products in the market that take advantage of the people and taught them the flow of purchasing goods and products by noting the inconveniences and inconveniences.
Flow mapping
Flow mapping
Based on the received business case data, existing flow and benchmarking, I sketched out the ideal flow in the form of a map
Based on the received business case data, existing flow and benchmarking, I sketched out the ideal flow in the form of a map
Based on the received business case data, existing flow and benchmarking, I sketched out the ideal flow in the form of a map
Infomation Architecture
Infomation Architecture
I also tried to describe in detail the information architecture of the Cart and the pages before and after it, based on all the above research and benchmarking. This helped me have an idea of what we were working with. If I had an idea for some innovation, I immediately shared it with my colleagues, and so some of the ideas were accepted or eliminated
I also tried to describe in detail the information architecture of the Cart and the pages before and after it, based on all the above research and benchmarking. This helped me have an idea of what we were working with. If I had an idea for some innovation, I immediately shared it with my colleagues, and so some of the ideas were accepted or eliminated
I also tried to describe in detail the information architecture of the Cart and the pages before and after it, based on all the above research and benchmarking. This helped me have an idea of what we were working with. If I had an idea for some innovation, I immediately shared it with my colleagues, and so some of the ideas were accepted or eliminated
UX research
UX research
1
Planning
Previously, we, together with UXR, selected 5 respondents who use/used a spare parts store or were familiar with it. There were those who actively use the store, or simply know and have heard about it. This way we can hear different opinions about the user experience of our parts store, as well as other applications.
1
Planning
Previously, we, together with UXR, selected 5 respondents who use/used a spare parts store or were familiar with it. There were those who actively use the store, or simply know and have heard about it. This way we can hear different opinions about the user experience of our parts store, as well as other applications.
1
Planning
Previously, we, together with UXR, selected 5 respondents who use/used a spare parts store or were familiar with it. There were those who actively use the store, or simply know and have heard about it. This way we can hear different opinions about the user experience of our parts store, as well as other applications.
2
Preparing
I also prepared a prototype with a new flow and selected 5 popular applications for the Kazakh user (Caspi, AliExpress, Wildbury, MagnumGo) that have a Recycle Bin and a path to and after it. I wrote a script and prepared questions that I could ask respondents during a qualitative study. Dinara, who is UXR, and Natalya, both colleagues in the product, helped me in preparation. Next, I prepared templates for the user persona for each respondent and drew the CJM from opening the application to the successful purchase of the product so that it would be convenient for me to immediately make notes on the opinions and answers of the people being interviewed
2
Preparing
I also prepared a prototype with a new flow and selected 5 popular applications for the Kazakh user (Caspi, AliExpress, Wildbury, MagnumGo) that have a Recycle Bin and a path to and after it. I wrote a script and prepared questions that I could ask respondents during a qualitative study. Dinara, who is UXR, and Natalya, both colleagues in the product, helped me in preparation. Next, I prepared templates for the user persona for each respondent and drew the CJM from opening the application to the successful purchase of the product so that it would be convenient for me to immediately make notes on the opinions and answers of the people being interviewed
2
Preparing
I also prepared a prototype with a new flow and selected 5 popular applications for the Kazakh user (Caspi, AliExpress, Wildbury, MagnumGo) that have a Recycle Bin and a path to and after it. I wrote a script and prepared questions that I could ask respondents during a qualitative study. Dinara, who is UXR, and Natalya, both colleagues in the product, helped me in preparation. Next, I prepared templates for the user persona for each respondent and drew the CJM from opening the application to the successful purchase of the product so that it would be convenient for me to immediately make notes on the opinions and answers of the people being interviewed
3
Interviewing
The online survey lasted about 4 hours independently without the UXR. My colleague and I interviewed 5 people, with whom we checked all the flows of 5 applications. They gave me tasks without stopping me from going through them completely, and asked questions at the end. Using a pre-compiled CJM, I noted at what stage and how the respondent feels
3
Interviewing
The online survey lasted about 4 hours independently without the UXR. My colleague and I interviewed 5 people, with whom we checked all the flows of 5 applications. They gave me tasks without stopping me from going through them completely, and asked questions at the end. Using a pre-compiled CJM, I noted at what stage and how the respondent feels
3
Interviewing
The online survey lasted about 4 hours independently without the UXR. My colleague and I interviewed 5 people, with whom we checked all the flows of 5 applications. They gave me tasks without stopping me from going through them completely, and asked questions at the end. Using a pre-compiled CJM, I noted at what stage and how the respondent feels
4
Analysing
After 4 hours of questioning, I immediately began to analyze and completely fill out all the prepared templates and describe the conclusions, because the next day I could forget the freshness of the insights. The conclusions were generally expected; almost all respondents had no difficulty completing the flow, either with my spare parts store prototype or with other applications.
4
Analysing
After 4 hours of questioning, I immediately began to analyze and completely fill out all the prepared templates and describe the conclusions, because the next day I could forget the freshness of the insights. The conclusions were generally expected; almost all respondents had no difficulty completing the flow, either with my spare parts store prototype or with other applications.
4
Analysing
After 4 hours of questioning, I immediately began to analyze and completely fill out all the prepared templates and describe the conclusions, because the next day I could forget the freshness of the insights. The conclusions were generally expected; almost all respondents had no difficulty completing the flow, either with my spare parts store prototype or with other applications.
Results
Results
We launched and analyzed the AB-test on a basket with 80% in the test (group B), 20% in the control groups. The test period is a month.
We launched and analyzed the AB-test on a basket with 80% in the test (group B), 20% in the control groups. The test period is a month.
We launched and analyzed the AB-test on a basket with 80% in the test (group B), 20% in the control groups. The test period is a month.
1
Across all users, there was no significant change in the number of products per user or the average bill.
1
Across all users, there was no significant change in the number of products per user or the average bill.
1
Across all users, there was no significant change in the number of products per user or the average bill.
2
However, the conversion rate from product viewing to completed orders among users has declined. This decline can be attributed to users storing items in their carts for longer durations, with an increasing number of users waiting several days before finalizing their purchase.
2
However, the conversion rate from product viewing to completed orders among users has declined. This decline can be attributed to users storing items in their carts for longer durations, with an increasing number of users waiting several days before finalizing their purchase.
2
However, the conversion rate from product viewing to completed orders among users has declined. This decline can be attributed to users storing items in their carts for longer durations, with an increasing number of users waiting several days before finalizing their purchase.
3
Interestingly, among paying users, there was a notable increase in the number of products per user. However, this increase did not correspond to a significant rise in average revenue. ADPPU increased. Among paying users, the number of products per user increased by 16% from an average of 1.7 to 2 products per user. Confidence 90%.
3
Interestingly, among paying users, there was a notable increase in the number of products per user. However, this increase did not correspond to a significant rise in average revenue. ADPPU increased. Among paying users, the number of products per user increased by 16% from an average of 1.7 to 2 products per user. Confidence 90%.
3
Interestingly, among paying users, there was a notable increase in the number of products per user. However, this increase did not correspond to a significant rise in average revenue. ADPPU increased. Among paying users, the number of products per user increased by 16% from an average of 1.7 to 2 products per user. Confidence 90%.
4
Furthermore, there has been a noticeable uptick in users' propensity to add more items to their cart compared to previous behaviors. However, the conversion rate from the main page to the spare parts card has remained unchanged.
4
Furthermore, there has been a noticeable uptick in users' propensity to add more items to their cart compared to previous behaviors. However, the conversion rate from the main page to the spare parts card has remained unchanged.
4
Furthermore, there has been a noticeable uptick in users' propensity to add more items to their cart compared to previous behaviors. However, the conversion rate from the main page to the spare parts card has remained unchanged.
Recommendations
Recommendations
1
Roll out the AB test to all users. There is great potential among those who have already added the product to the cart, but have not purchased it
1
Roll out the AB test to all users. There is great potential among those who have already added the product to the cart, but have not purchased it
1
Roll out the AB test to all users. There is great potential among those who have already added the product to the cart, but have not purchased it
2
Marketing push notifications and DMs.
2
Marketing push notifications and DMs.
2
Marketing push notifications and DMs.
3
UX research among those who did not redeem the cart to identify the reasons.
3
UX research among those who did not redeem the cart to identify the reasons.
3
UX research among those who did not redeem the cart to identify the reasons.
Retrospective
One of the difficulties I had was at the very beginning, when with such a large project I did not know what deadlines to set for the customer - the product manager, naively thinking that I could complete the task in 3 weeks (😅), but in the end the project took 4 months from receiving the task to support design for developers 🥲
This taught me, first of all, to carefully study the task without haste and divide it into iterations, reaching an agreement with the product (stakeholders)
Tools
Tools
Figma
Team
Me
Продуктовый дизайнер
Usoroh Paius
Product Manager
Dinara Abdildinova
Lead of UXR
Natalya Nerovnaya
UX designer, Inspirer
Oleg Vereschagin
Lead of Software Developing
Nikolay Babeshkin
CEO of Kolesa Group
Dmitry Komarovskiy
Head of Product
Alexander Nagorniy
Chief Product Officer
Karina Kassimanova
Head of Design
Vladimir Muschegov
Senior Frontend Developer
