#5 BookMyShow — Addition of Offers to Android Toolbar as Action Icons (w/ Solution)
BookMyShow is the most popular app to book movie tickets in India. The app recently in December had a refresh to align towards the guidelines of Material Design.
The refresh was more than welcome the earlier app was ridiculed with ads, pop-up ads and other monetisation gimmicks throughout.
It’s a shame when the experience is compromised when a business starts doing extremely well and makes their app into a ca$h-cow. But when you’re a company that’s making profit without any worthy competitors — users have to live with that experience without a choice.
In a recent update, BMS included a new activity to their Android app which shows you the offers you can avail before booking your show. This was only accessible on the website before and was a popular ask during my days as a Chat Assistant at
The styling for the icon isn’t appropriate and should be filled instead of being an outline. I’m fairly certain the margins are messed up too here.
And, of course — if you need text to describe the icon, it clearly isn’t doing justice. If there’s clarity required, check the guidelines here: https://material.io/guidelines/layout/structure.html#structure-app-bar
While it isn’t necessary to adhere 100% to the guidelines, my point-of-view is that BMS could easily fix this if they positioned their UI elements in the app better. P.S. Offers is also present in the Navigation Drawer but it seems to be the case that BMS wanted it to appear on the Home-screen instead of being hidden in the Nav Drawer.
For example, BookMyShow uses all three elements in their app — Tabs, Navigation Drawer and a Bottom Navigation. All three of these are hardly required in apps. If you’re using all three, it’s probably due to lack of information hierarchy and could use better rearrangement.
In order to reposition Offers on the home-screen, let’s explore another problem related to User Expectation.
The Search item in the Bottom Navigation isn’t particularly necessary to appear in a “Bottom Navigation”. We can let Chat pass because it could also mean Messages. But, Search is clearly not needed in that component.
Let’s explore how the Bottom Navigation behaves when we tap on “Search”
Although the trick to transition into a Search bar and let the user type immediately is smart, the expectation of tapping on the Bottom Navigation and navigating to other elements is consistent for all 4 items in the component except Search — which makes it confusing to navigate back from Search itself.
Here’s one solution to this:
BUT, here’s the problem with this solution. It doesn’t clearly solve the search experience that was delivered in the original. This solution doesn’t work with the Keyboard since it would pop up above the Bottom Nav, hiding the navigation and putting us in the same position as we were in the original.
Thus, a better solution is to replace Offers with Search and vice versa.
Here’s how it would look like, along with explanation of why it makes a lot more sense.
With the above sketch, here are the problems we solve:
- Inappropriate position of “Offers” along with Text on the Toolbar.
- Inappropriate navigation element “Search”.
- Abrupt behaviour of Bottom Navigation when Search is tapped ruining User Expectation.
- The need to fit the text “Offers” with the offers icon.
- Search‘s accessibility and Offer’s position on the Home-screen.
