BookMyShow stands as a premier online platform for securing tickets to a vast array of entertainment options.
Catering to a diverse audience, it provides a seamless service for purchasing tickets to movies, concerts, plays, and various other events. With its user-friendly interface and extensive selection, BookMyShow ensures that access to cultural and entertainment activities is just a few clicks away, enriching the leisure experience for countless users across the region.
Challenge
As BookMyShow continues to grow, the need to enhance its app usability becomes evident. Users report difficulties due to the app's cluttered design, confusing feature sets, and poor navigational structure, which contribute to a suboptimal user experience and reduced engagement.
Solution
To address these issues, we conducted a comprehensive redesign of the BookMyShow app, focusing on simplifying the user interface, enhancing visual and textual hierarchy, and streamlining the navigation process. Key improvements were made to prioritize essential features and declutter the user interface.
Role
Wireframing, Prototyping, Heuristic Evaluation,
UI design, User Testing
Duration
2 weeks
Team
Acsah Stanley (Me)
Prakruti Desai (UI/UX)
Tools
Figma, Photoshop
Identify
Through usability testing and in-depth user interviews (n=7), we identified key frustrations and needs of the BookMyShow app users.
-
Repetitive Navigation: Tabs on top are repetitive throughout the app, hindering user navigation.
-
Cluttered Interface: The interface is too cluttered, requiring a very long scroll which diminishes user engagement.
-
Feature Prioritization: Important features like Stream are not prioritized despite being heavily promoted.
-
Hierarchical Deficiencies:
-
Textual Hierarchy: There is an absence of clear textual hierarchy, making information hard to digest.
-
Visual Hierarchy: Lack of visual hierarchy leads to a confusing user interface.
-
"What is stream here? Is it like netflix where I can subscribe and watch or do I need to rent?"
"BookMyShow is too cluttered and has too many things going on on the homepage"
"What does the scanning icon do? I did not understand the movie library icon either"
"BookMyShow also has amusement park booking? and games?"
"I always lose my tickets in a flood of messages and emails."
"I usually know what I'm looking for so I just open the app and search it."
-
Grid System: Ineffective grid system and lack of alignment make the content appear disorganized.
-
Information Segregation: All information is displayed in one long scroll without clear segregation, overwhelming users.
-
Consistency Issues: There is a lack of consistency across different sections of the app.
-
Visual Language Inconsistency: The visual
language does not match the rest of the app, creating a disjointed experience. -
Visual Treatment: Different sections of the app receive visibly different visual treatments, disrupting the aesthetic unity.
Empathise
To gain a profound understanding of user needs, we then did empathy mapping from which we further derived three distinct user personas
Empathy Mapping
.png)
We meticulously gathered and analyzed user feedback to understand the experiences of BookMyShow users. This process involved synthesizing data from user interviews to visualize how users interact with the app, focusing on what they see, hear, say, and do in relation to BookMyShow.
We, then, created detailed empathy maps to consolidate these insights.
User Personas
To personify the problem that we pinpointed within empathy maps, we created fictional archetypes which represents the needs of a larger group of users.
Define
To crystallize the challenges users face when using the BookMyShow app into specific problem statements that will direct the redesign process.
Pain points
We combined all the problems and painpoints by categories, which would help us look at the redesign more holistically
-
Navigation Issues
-
Feature Discoverability
-
Consistency and Aesthetics
-
Information Overload
-
Ticket location
Users find the app’s navigation confusing, with repetitive tabs and a cluttered interface that impedes finding content quickly
Important features like "Stream" are not easily discoverable or understood, causing frustration and under utilization.
There is a lack of consistency in visual design across different sections of the app, which creates a disjointed user experience.
Users feel overwhelmed by the amount of information presented in one long scroll without effective segmentation or prioritization.
Users find it difficult to quickly locate the tickets, which is the final customer deliverable, particularly when network range is low and tickets won't load.
HMW Statements
We then took these pain points and made subsequent problem statements that can be addressed
-
Navigation Issues
-
Feature Discoverability
-
Consistency and Aesthetics
-
Information Overload
-
Ticket location
"How might we redesign the navigation of the BookMyShow app to make it more intuitive and less repetitive, enhancing user’s ability to find content quickly?"
"How might we improve the visibility and understanding of key features like 'Stream' to ensure they are easily accessible and used by our customers?"
"How can we establish a more cohesive visual language across the BookMyShow app to provide a more unified and pleasing aesthetic experience?"
"How can we better organize content within the app to prevent information overload and make the user journey smoother?"
"How might we make it easier for the users to locate and load the correct ticket at the right time?"
Design
We translated the insights and user personas developed from our empathy mapping into actionable design solutions. This step involved crafting detailed wireframes and prototypes that addressed the key pain points identified.
Wireframes
We did a design sprint and made as many wireframe iterations as possible and tried to beat the clock. This helped with ideation and brainstorming and choosing the best viable option.
Design System
We aim to address consistency issues and improve the overall user experience by creating a cohesive system that will remain fixed for the entire interface.
Screens and testing
This is where we made the final rendition of the screens and incorporated feedback from users after low-fi testing.
Final iterations
Keeping all the previous insights and design decisions and choices in mind, we drew up a working prototype.
Quick Access to Tickets: One of the standout features of the new design is the immediate visibility of "Your Purchases" at the top of the screen. This ensures that users can quickly access their booked tickets with a QR code. Don't have a ticket? The tab won't be visible until you make a purchase.
I
Home Screen
Simplified Navigation: The new interface streamlines navigation by condensing menu options into a more intuitive layout. This allows users to find what they're looking for quickly without excessive scrolling or confusion, which was a notable issue in the old version.
Dark Mode: The adoption of a dark mode not only aligns with modern design trends but also enhances visual ergonomics by reducing eye strain in low-light conditions. The darker theme contributes to battery saving on OLED and AMOLED screens and offers a sleek, contemporary look that is visually appealing.
All options were categorized into two main sections: Movies and Events. The app opens in the All tab by default.
Browse by theatres rather than movies based on your location to get a more optimized search result.
Interactive Figma prototype
Drag and tap
II
Booking
Segmented Information: The new design employs a tabbed layout with categories such as "About," "Cast," "Reviews," and "More." This organization allows users to access specific types of information without having to scroll through a long page.
Focused Call to Action: The "Book Now" button is prominently displayed at the bottom of the screen, maintaining a fixed position to ensure it is always accessible as users switch between tabs.
Ads: Promotional content is minimized or better integrated, ensuring the user’s focus remains on the movie details and available actions.
Enhanced Trailer Viewing: The trailer section is directly accessible under the "About" tab, making it easy for users to view trailers without leaving the app or searching through external sources
.png)
Interactive Figma prototype
Drag and tap
Streamlined Booking Flow: Guides users through a logical sequence from selecting a movie time and location, choosing ticket quantity, to seat selection, culminating in the checkout process. Reduces the number of steps required to complete a booking, enhancing user efficiency and satisfaction.
Intuitive User Interactions: Simple tap gestures for selecting movie sessions and seats.
Easy-to-use plus and minus buttons for ticket quantity adjustments ensure a user-friendly experience.
Clear Visual Cues: Seats are color-coded in the seating selection screen, providing immediate understanding of available, unavailable, and selected seats.
Comprehensive Checkout Screen: Provides a detailed summary of all choices made, including movie details, session time, and total cost breakdown.
Enhanced Accessibility: The design caters to a wide range of users, including those with visual impairments, by using high contrast ratios and large interactive elements.
.png)
III
Online streaming
Refined Visual Design: With the new interface, we opted for a cleaner, more modern look with a focus on large, eye-catching thumbnails for "Latest releases" and a "Just for you" section that seems to be more personalized.
Enhanced Usability: The layout in the new design is streamlined with clearly defined sections that are easy to navigate. The separation between different categories is more distinct, improving the findability of content.
Personalisation and Recommendations: The new design emphasises on personalised recommendations more strongly, as seen in the "Just for you" section, which likely uses user data to tailor content offerings to individual preferences, enhancing user engagement.
.png)
.png)
.png)
IV
Others
Buzz: The buzz section in Book My Show is your go to for daily “chow chow”. It is an entertainment blog that keeps the user updated about what’s going on around them. The blogs have been divided into categories such as Trending, movies, events, sports etc for easy filtering.
Streamlined Search Interface: The new search interface as well as the Buzz screen includes clearly labeled tabs such as "Movies", "Events", "Stream", and "Plays", allowing users to quickly narrow down their search according to the type of content they are interested in.
Comprehensive Filters: The filtering system in the "Stream" section is notably robust, offering options to filter content by price, language, and genre. Users can adjust these filters using simple sliders for price, and checkboxes for languages and genres, making it easy to find content that fits their preferences and budget.
Takeaways
A Designer's perspective
Understanding User Needs: The redesign journey began with a deep dive into understanding our users, not just as ticket buyers but as diverse individuals looking for engaging entertainment experiences. Empathy mapping and persona development were instrumental in aligning our design decisions with real user expectations and needs.
Design Innovations: The introduction of a cleaner, more structured interface marked a significant transformation in the app’s usability. The shift to a dark mode theme across various screens wasn't just about aesthetic appeal—it was about enhancing visual comfort and creating a cinematic vibe that resonates with movie enthusiasts.
Functional Enhancements: Streamlining the search and booking process demonstrated our commitment to reducing friction and enhancing user satisfaction. Features like dynamic filtering and segmented content discovery were designed to offer users control and convenience, making their interactions not only effortless but also enjoyable.
A User's journey
Smoother Navigation: As a user, navigating through the app became an intuitive experience. The reorganized tabs and simplified booking flow significantly cut down the time and effort needed to find and book entertainment, transforming what was once a chore into a pleasant journey.
Engaging Content: The Buzz section became a daily destination not just for booking tickets but for catching up on the latest in entertainment. This personalized feed, offering trending news and tailored recommendations, enriched the user experience, making the app a hub for entertainment beyond just ticket sales.
Empowered Decisions: The enhanced filtering options empowered me to make informed decisions tailored to my preferences and budget, exemplifying how technology can cater to individual needs in a mass-market platform.