We have built quite a number of apps over the years at Flexnode and Showtimes.my is one of our favourites. It is also quite popular with around 200k hits monthly. Unfortunately, the 5 year old app broke and stop working recently, so John and I decided it is about time to rebuild it.
Since we are rebuilding the app, it is the perfect time to do some work on the dated design. Having used the app for years, we are quite familiar with the shortcomings. In this post, I'm going to walk you through some of our initial thought process we had when building the original app and what we are changing in the redesign.
Showtimes done right
For those who are not familiar with Showtimes.my, it is a movie showtimes site. The idea is pretty simple. We looked around and discovered that most if not all movie showtimes sites and apps makes it pretty hard to get to the information you want. A typical site flow would be something like
Select Location -> Select Cinema -> Select Date -> Select Movie
If you want to compare the showtimes between 2 movies, you have to open another tab and select a different movie. And if you want to compare movies in different cinemas? Good luck.
We wanted to reduce the amount of steps to reach the desired showtimes and allow users to compare showtimes between different movies and cinemas. So this what we came up with.
Original design of Showtimes.my
We grouped showtimes by movie and also list those from different cinemas in close proximity. This makes it easier to compare showtimes between different cinemas.
And to improve readability, we grouped the individual time into boxes and color coded them. Grey for those in the past, Black for the next show and the rest of them in Dark Grey.
Then we sprinkle extra movie information like genre, movie length and Rotten Tomatoes to help user decide which movie to watch.
Improving Navigation
In our pursuit to reduce the number of steps to view your desired showtimes, we added 3 select dropdowns (Date, City, Cinema) on the page. The site also remembers your last selected location and defaults to today's date when you visit the site.
This means that in most scenarios, if the user have visited the site once and selected the right location, he/she only needs to select the date and cinema. For cities like Kota Kinabalu where there's only 4 cinemas, most users don't even bother to filter by cinema. This effectively made the whole affair a matter of selecting the right date.
Pick your favourite
Initially, we were pretty happy with what we have built. You could check movie showtimes in a few minutes and to us, it was a huge improvement from what's out there. But when John travelled to another city with a lot more cinemas than our hometown, we realized the list of showtimes under each movie was a bit too long.
We tested the idea of grouping cinemas into sub-locations but soon ran into a problem when the user wants to compare showtimes for cinemas in 2 different sub-locations. Having to switch between 2 sub-locations isn't desirable.
Ideally, we would want the user to see only the cinemas that interest them. So we decided to introduce a feature where users can choose their favourite cinemas and have that as a "location". This allows users to tailor the list of cinemas they see on the page.
We did all these without requiring users to create account as we consider that more friction to use the site. So we saved user favourites and locations on a cookie. This does mean that it is only persistent on a single device.
Showtimes.my Reborn
For the redesign, the main rule is to not change what's working. We figured in terms of displaying showtimes, we pretty much nailed it. The focus was again on the flow of getting to the showtimes. So this time, we turned the date selector from a dropdown to links that you can access directly. This reduces the action from 2 clicks/taps (click on the dropdown then click on the date) to just a single tap on the desired date.
New Showtimes.my design
This works well for the dates because the nature of showtimes. At any one time you can access up to 7 days of movie showtimes. They are updated every week on Thursday. However, we had to revert back to a dropdown on smaller screens due to space constraints.
We chose to display the dates horizontally instead of vertically so that user don't have to scroll to see all the dates. We also removed the cinema filter on the premise that showing a single cinema at a time makes it harder to compare showtimes between them. We want to encourage users to set their favourite cinemas instead so we set it as the first option in the list to promote usage.
Setting your favourite cinemas
Lessons learned
- Don't change what works for the sake of redesign. We resisted the temptation to mess with how we display showtimes.
- Take the context into consideration to improve the flow and design of the site. We were able to change the date dropdown to links because of the nature of showtimes.
- Make sure your design works well on smaller screens. We had to convert the date links back to dropdown for smaller screens.
- Guide your user to use certain feature by making it more prominent. Previously, favourites wasn't used much by our users. We are hoping by putting it front and center, there will be more people using it.
Of course, nothing beats real users' feedbacks and usage. We'll be keeping an eye on how well this new design performs and will revisit as we learn more. If you have not tried the site, go to http://showtimes.my or play with the demo version.