Redesign of a web widget checkout
My role was
product designer
I worked on
desktop web widget
Duration
2019 - 2021

Context

On "Afisha.ru," you can find details about current events and purchase tickets via a web widget. The platform sees around 12 million monthly visitors. This widget is also available as a White-label (WL) SaaS, suitable for both B2C and B2B purposes. With the increase in the number of partners, we needed to modify the checkout process. We added new associations between promotions and payment methods, introduced the ability to add a loyalty card, and implemented an option of enter a promo code.

Analysis

It was important for me to understand all user flows when applying different promotions, promo codes, and loyalty cards. How a specific promotion aligns with various payment methods.
It was also important to meticulously plan all scenarios and notifications so that the user feels at ease throughout the entire process.

Prototype testing

Prototype №1: Implement a long scroll and reveal the next section when the previous one is completed
Prototype №2: One screen, one action
Prototype №1
Prototype №2

Final design

After testing two prototypes and agreeing on the design with the product manager and the team, I created the final design. Based on all the testing, I realized that:

•  Users want to complete payments quickly
•  A long scroll in the checkout is unnecessary
•  Users don't like it when something is disabled
•  Too many choices create a lot of stress

Below, I will show a portion of the changes.
Before
After
Before

Results and lessons learned

• Conversion rate increased
• Now, there is the ability to display various payment methods and associated promotions
• The number of partnerships has increased
• User loyalty has increased
I have understood the importance of usability testing with real users. It's crucial to test the designed interface and gather feedback from respondents effectively.