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. Despite no recent work on the widget internally, it continued to be sold as WL to partners, with their numbers growing. During my research, I identified issues with responsiveness and other user complaints. Balancing management, partner, and user preferences, my goal was to refresh and enhance critical UX areas without disrupting established usage patterns.

Research and analysis

Of course, I started by examining all available data: online reviews, NPS data (from the research outsourcing company "UX feedback"), and metrics in Google Analytics. I broke down the entire widget into its components to see the full picture.

Together with the product manager and analyst, we identified our main critical areas

I analyzed all the data and compiled a CJM. And 80% of "Non-Cinema" event users leave because there are no seat maps. 73% of "Cinema" event users leave the seat selection page to change the movie screening time

Next, I proceeded to create wireframes based on the user flow, and I validated them through usability testing. I've added a section of my wireframes below.

New widget appearance

Next, I had to set up user communication in the web widget and add emotions to the interface. I decided to incorporate illustrations and found an artist for this purpose. Together with the product manager and illustrator, we listed all the associations: joy, fun, kindness, care, love, warmth, memorable, movement, energy

Tasks:
• Boosting mood with colors and characters
• Making a lasting impression on the user
• Caring for our users, providing tips, guiding through the interface
‍
Illustrations were created by the illustrator Natasha Savina

Final design

A lot of work was done, and the layouts underwent several usability tests. We addressed critical pain points:
‍
• Added a mobile version
• The widget is now responsive and enlarges on larger screens
• All layouts are now in Figma, everything is documented, and a UI kit is provided
• Added a cart feature, allowing users to quickly adjust contentsUsers can now easily switch sessions and view available seats
• Expanded the ability to view all promotions and offers
• Large seating charts were introduced, thanks to my seating layout guideline provided to the illustrator
• Users are now not left stranded when errors occur or when they close the widget

Below, I will show a portion of the changes.

Before

After

Before

After

Before

After

Before

After

Mobile version of zoom

Mobile movie session selection

Of course, I also created a large UI kit and two themes

Results and lessons learned

• Conversion rate increased
• The number of exits from the seating plan page decreased
• Partners were pleased to see the adaptability and light theme in the widget
• Design work has sped up
• Everything has been documented in terms of design, so now another designer
can independently work with the files in Figma
• Our company has become the leader in cinema ticket sales in the country.

Thanks to this challenge, I've learned to see the entire project comprehensively, considering all the nuances, and to plan the entire workflow from start to finish. I have also improved my communication skills within the team, which has enabled us to work more efficiently.

Back to home