BookMyShow Redesign
Classroom Project
DESCRIPTION
Redesigning the BookMyShow app by incorporating a more efficient design system
DURATION
2 weeks
ROLE
Wireframing, Prototyping, Heuristic Evaluation,
UI design, User Testing
Step 1
Identifying the
problems
In order to precisely pinpoint the problems, we had to study information architecture and analyse each screen’s flow.
UI ANALYSIS
Tabs on top are repetitive throughout the app
Too cluttered and a very long scroll
Features like Stream weren’t prioritised although promoted
Lack of visual and textual hierarchy
No textual hierarchy (again)
Lack of alignment and effective grid system
All info displyed in one long scroll with no segregation
Visual language doesn’t match the rest of the app
Lack of consistency
across different sections
Visibly diff. visual treatment from the rest of the app
HEURISTIC EVALUATION
After doing a heuristic evaluation, we noted that there were issues with the visibility of system status, consistency and user freedom. The aesthetics, flexibility, efficiency and recognition could be worked on.
USER RESEARCH
We did a quick pre-testing on the users to determine the primary pain points.
What does the scanning icon do? I did not understand the movie library icon either.
I usually always know what I am looking for so I just open the application and search it.
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.
I always lose my ticket in the flood of messages and E- mails.
BookMyShow also has stream? And amusment park bookings?
Step 2
Developing the
design system
Starting off with a moodboard for inspiration, we dived right into creating a cohesive design system with appropriate elements and grid systems.
MOODBOARD
DESIGN SYSTEM
Step 3
All
wired up
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.
Dekho, dekho vo aa gaya
Improved textual hierarchy
All options were categorized into two main sections: Movies and Events. The app opens in the All tab by default.
A quick
comparison
Purchased tickets are readily available on the go, making them more user-friendly.
Dark mode to incorporate the feel of a cinema/night event better.
Don’t have a ticket? The tab wont be visible unless you make a purchase.
The Sliding tab would be swooped up once you start scrolling which serves as the main UI element.
Swipe Right. and Left. Till you find your match
Homepage Tabs
Browse by theatres rather than movies based on your location to get a more optimized search result.
Categories mentioned in the All tab, keeping the interface minimal.
Picture toh abhi baaki hai mere dost
A quick
comparison
Any unnecessary information was scraped off.
Better categorization where information can be accessed from the left vertical tab instead of one long scroll.
A cleaner and improved look
Starring your favourites
Movie Trivia time
What's everyone thinking?
Find more
How many passengers?
Pick your slot
Choose your seats
Time to pay!
Let's checkout.
.png)
A quick
comparison
.png)
Any unnecessary information was scraped off.
More room for visuals
This would get the audience to be more engrossed in the browsing experience
A more personalised scroll.
Let's browse
Movie Trivia time
.png)
Filter out the noise
.png)
Tera Buzz mujhe jeene na de
.png)