BookMyShow Confirmation Screen
Re-designing the confirmation screen of India's biggest Movie and Event ticket booking platform
My role
- User Researcher
- Usability Tester
- UI/UX Designer
Skills used
- User research
- Usability Testing
- Visual Design
- Mockups
- UX Strategy
Tools used
- GIMP
- Adobe XD
Deliverables
- Hifi mockups
- Strategy
Duration
4 days
The Problem
As far as the post-booking experience goes, the booking confirmation page is one of the key user touch points and we’d like to improve the design of this page.
The user sees the movie booking confirmation screen after his payment has been processed and the tickets have been booked. We want to up-sell / cross-sell several relevant things here—the challenge is how to do it effectively and keep the visual noise limited.
Business objective: up-sell / cross-sell relevant things
INTRODUCTION
The post-movie booking experience has a lot of scope for keeping the user engaged with the Product. In the diagram above, a few ways to do the same are shown. We will cover some of them in this case study.
The goal is to design a more personable and intuitive movie ticket confirmation screen using the principles of user centered design.
Understanding the company
BookMyShow is a event ticket booking platform for users to book tickets for movies, events, plays and more online. Since it’s debut in 1999, BookMyShow’s user base has grown to over 30 million, allowing people from (primarily) all over India to book tickets for any of the 5000+ screens that they’ve partnered with. An average of 15 million tickets are sold on the platform per month, and to keep with its ever growing presence, BookMyShow is constantly innovating creatively to push its mission forward.
Research
User Research Interviews
Before I began the redesign, I conducted interviews with 30 users to get a better understanding of who I am designing for.
What does a typical BookMyShow user look like? What are their reasons for using BookMyShow and what keeps them coming back?
These interviews were conducted via a Google form, and for some users who had the time, the conversation extended till WhatsApp chats and phone calls.
Target audience demographics
Among the 30 BookMyShow-ers that I interviewed, there were 22 males and 8 females. The average age ranged from 21 to 44, with most concentration around 27. Almost all of them are employed and have a steady source of income.
To make this even more interesting, 66% them did payments online more than 5 times per week! That’s a hell lot of transactions.
Most of them use the BMS mobile app and 67% use the platform for checking prices and booking tickets for themselves and groups of people. Only 13% use BMS on a desktop.
I asked the 30 BookMyShow-ers I interviewed to describe BookMyShow using 3 adjectives. What do they think about BMS? How does it make them feel?
A total of 54 adjectives was collected.
Top 3 adjectives used: Easy, Convenient, and Fast.
I also asked a few subjective questions on how frequently they paid online, and what do they do in case a transaction did not go as they had intended. Majority of the people responded that they look for the “https” secure sign before they make any payments.
In case the transaction did not went through due to some issue with the product/service, users ended up feeling frustrated and irritated. But they were willing to re-try the transaction if it was a connectivity issue on their end.
What people do right after booking tickets:
- For successful transactions, they just wait till showtime. Most of them download their tickets right then-and-there, and also forward it to accompanying persons.
- For unsuccessful transaction, they retry the payment by going through the whole long process again. This was a pain point that I discovered.
What people do when they reach the venue of the event:
- Show the ticket SMS or QR code and get entry. 95% of the times, this is done via their smart-phone. It is a fair assumption to make that the user will have a smart-phone and use the same to show ticket info at the venue.
- For users who have lost or deleted the SMS or WhatsApp message, they either reopen the BMS app and show the details from there, or search & show it from their email. Most users did not know exactly what they would do and reported that they will search Google for the same.
- To solve the above point, we can use great design to onboard users to use the newly developed Movie Mode.
Design
Part 1 of 3:
Confirmation screen visual design
Let’s take a quick look at BookMyShow’s existing movie booking confirmation screen.
The layout presents what is required for a user at this stage, but there were a few problems that I noticed.
Problem #1: Proper use of screen real estate
On a desktop, we have tons of real estate (viewable screen area) which can be used to present an experience which delights the user. The confirmation screen is a touchpoint where the feeling of “delight” can go a long way.
Think about this – you go through the whole process of movie booking, with your whole concentration, and in the end you get something that does not delight you. 🙁 Sad, right?
The existing confirmation screen has a very basic and a bit outdated layout when compared to other screens in the BookMyShow platform. The layout is left aligned, which leaves a lot of whitespace towards the right.
In the redesign, all content is center aligned to even the visual experience out. A huge ticket is shown in the middle, which keeps the standard BookMyShow type branded background layout. The edges of the ticket are same as the ones in BookMyShow’s logo.
The payment success thank you message is displayed on top in green color. Aiming towards minimalism, the old card type green box has been discarded. A green shadow has been added to the ticket which subtly adds to the payment success vibe.
The amount charged is mentioned where it already was (updated with the new Indian Rupee symbol), but the “Amount Paid” label and the “Payment mode” text has been brought close to the amount. As before, it will show amount breakdown when clicked.
The Audi and Seat numbers are closer together and shown in a big bold font, because this is one of the key things the user would need to know.
The best brands make a bold statement in all areas of their business. Keeping that in mind, the bar-code for booking ID has been redesigned with BookMyShow’s brand logo in the center. This is similar to the ones WhatsApp uses for their business.
Problem #2: No user contact info & CTA to user profile
The existing confirmation success message is a green box at the top of the screen. Use of green is good – denotes success, but the body text of the message adds no real value to the user.
In the redesign, the word “profile” will be a link to the user’s BookMyShow profile page, where they can further interact with the product and offers. The word be underlined and will be clickable on mouse hover.
Similarly, to add more personalization, the email and phone number which the user entered before the payment can also be displayed as shown above. This serves two purposes – one, it makes the user verify their entered details, and second, it allows the user to make amends if they accidentally entered the wrong information.
Right below this, we have options to resend the ticket information or to edit the contact information. The edit option can also be a way to onboard a guest user to create a BookMyShow account.
Problem #3: Main buttons should look "main"
While designing buttons, a common UI pattern is to have a grey text color on white background – which means that the button is in “disabled” state.
The existing buttons on the page look like disabled buttons. They have color differences between the button icon and button text. They also do not lead the user to perform any of the action, since all are of the same style and color. A primary call to action should be of a different color than the rest of the buttons. (Which will be primary will depend on business priorities)
In the redesign, I took inspiration from what BookMyShow is currently doing in Movie Mode and used the same button styles and colors. The blue color is heavily used throughout the booking flow as well, so it would be a familiar color for the users.
I took care to have a primary button (colored blue) for each use case. For example, as shown above, assuming correct contact details were entered by the user, the primary action that they would want to perform would be to re-send the booking confirmation details to them.
Buttons used elsewhere on the page also follow the same principle. (Which will be primary can change depending on business priorities.)
Part 2 of 3:
Handle Payment Failure Case
Points of failure in the system are the points where the real test of our user’s patience comes in. A common point of failure is the payment feature – where due to a truck load of reasons like connectivity, bank errors, etc – the payment might fail. The existing failure screen is just put in for the sake of it and leads to poor overall user experience. (The research data confirms this – users are frustrated when failure occur.)
In the redesigned failure screen, there is a minimal illustration of a broken ticket (which adds to delight, even though the situation is not so delightful), and only relevant call to action buttons.
To increase customer experience, it would be great to include links to customer support options like phone number support or a live chat support (intercom, talk, etc can be used).
Feature: Continue booking where you left off
In case of a failed payment or connectivity issue, this feature can come in handy for increasing user satisfaction. The way this may work is by saving the booking state in the browser. When the user comes back to the site, a small prompt at the bottom will hint the user to resume the process. This will be really helpful for failed payment issues.
Part 3 of 3:
Secondary Actions
This is the existing offers section that shows up below the ticket. It has no order associated with it, does not look engaging, and does not have a clear flow or call to action.
The secondary actions show up right below the movie ticket. They are listed in form of modern cards that help the user to go through them in an easy flow. There can be multiple cards, and each card can have a set of primary and secondary actions, and the cards will be ordered according to business priorities. A card can be replaced by a sponsored advertisement as well.
Suggestion #1: Onboard on the new Movie Mode
In the research I did, I found out that there is a new Movie Mode feature introduced in the BookMyShow app that aims to significantly improve the movie watching user experience. I feel that onboarding new users and guests to the mobile app would be a good business strategy, and therefore the first card in the secondary actions is of the Movie Mode. It gives a small summary, combined with an illustration and a clear call to action to send the app link to the users already entered mobile phone number.
Suggestion #2: Promote SuperStar program
A card gives a teaser of the Superstar program. The aim here is to get users to do multiple bookings for them to be considered for an invite to the program. Thus, the call to action here is to lead the user to go and do one more booking. There is a secondary “Know More” button that will show he benefits of the program in a popup.
Suggestion #3: Invite friends and split booking
The last card in the flow helps the user to share the booking details with accompanying persons (friends/fam). There is only one call to action here, and it will open a popup which will ask for names contact details of the people.
This card is palced last, because in my opinion it would be better to send a new user to download the app from where the same functionality is already inbuilt in Movie Mode.
These were my observations and solutions.
Conclusion
Next Steps
Next steps would be to test and see how these concepts fare in the hands of more users. Testing for success and efficiency would be a usability test of a prototype, which could measure how long it would take for Clients to complete the whole booking process.
Next iterations would also work through more edge cases. Some examples:
- UI tweaks. Refining the colors, fonts and layouts of elements.
- Better analysis based on bigger user research. Finding out more pain points during the last steps of an online transaction and formulating solutions.
Lastly, a collaboration with UI developers will make this design a reality.
Thank you for patiently reading!