Popcorn
Rediscovering the magic of movie with Popcorn
Project scope
3 weeks
Tools
Trello
Mural
Octopus.do
Lucidchart
Invision
Figma
Role
UX Research
Business analysis
Competitive Analysis
Branding
Design system
Usability testing
Overview
Popcorn, founded in 2012 is a movie app which collates movie timings across all Singapore cinemas. It aims to be a one-stop platform for all movie-related information from synopsis, trailers, news and reviews to showtime options. However, their online ratings and reviews started falling in recent years as more users have started using the Movie’s provider site to check for movie information.
In this project, we redesigned Popcorn's desktop and mobile sites in view of enhancing the user experience when browsing and selecting movies and showtimes.
The Problem
Based on our research findings, users find the browsing experience to be a hassle as they are not able to efficiently utilize Popcorn's service as a one stop information provider of cinemas to search for different timings across different cinema provider efficiently.
Our Solution
We redesigned Popcorn's desktop and mobile sites and proposed to add a new feature to enhance user experience when browsing and selecting movies and showtimes across all Singapore cinemas. This will allow users to rediscover the value of Popcorn as a one stop cinema service provider can provide to the user’s movie browsing experience.
Design Process Model
For this project, we first did a business analysis and user research to understand both the business and user goals. We then carried out a heuristics evaluation to examine the core functionality of Popcorn before carrying out a usability test on the existing desktop and mobile sites.
After collating our research information, we started sketching and wireframing for our redesign before prototyping. We then carried out two rounds of usability tests with iteration on both desktop and mobile sites. Each step of the project is further detailed below.
Heuristics Evaluation
We did a Heuristics Evaluation to examine the core functionalities of the existing Popcorn website from browsing and selecting movies and movie time slots across all Singapore cinemas.
We used Jakob Nielsen’s 10 usability heuristics for this test
User Research
We did user interviews to understand user behaviours and preferences when deciding to watch a movie.
Our Objective
What are their movie habits
What consideration they have when choosing where to watch a movie
What consideration they have when choosing to watch a particular movie
How do they purchase their tickets
Our Findings
Users care about the date and time before making a ticket purchase.
Proximity is a key factor in choosing a cinema.
Reviews, trailers and ratings matter in deciding if a movie is worth watching.
Prefers desktop browser over mobile to book tickets
The Competition is all about efficiency
Usability testing for Existing site
We did an existing usability test with 10 users to see if they face the same issues we discovered in the Heuristics Evaluation. We tested 5 users each for Desktop and mobile site. Below are the deltas that we found across both platforms.
3/10 users found it a hassle to scroll through the whole page to search for cinema and showtime details
3/10 users unable to remember the showtimes of interest even after multiple tries
3/10 users found the "Latest Release" not in order of the release date.
Persona and Problem Statement
"Melvin feels overwhelmed about recalling movie availability and needs an efficient way to find the most suitable movie time slot for him and his friends."
Customer Journey Map
Sketches
From our research analysis we started to generate ideas to find an appropriate solution to our user's needs and started to sketch the design before drawing up our Mid Fi wireframes.
As users had issues remembering the different movie timings of different cinema providers, we came up with a compare feature for users to easily compare timings.
This would allow users to pick the movie timing and the cinema quickly as it will be saved in a compare feature. Users would not need to scroll through the page to check the timings again which can be a hassle.
User Flows
After deciding on the solution and drawing up the sketches, we created a user flow to understand how a user would navigate through the structure of the desktop and mobile site with the compare feature fitted into the ticket purchase user flow.
Initial User Flow
New User Flow with the added Compare Feature
Features after 2 rounds of usability testing
Homepage
Having gone through 2 rounds of iterations we decided to design the Homepage with a quick search feature, which allows users to search their movie more efficiently by entering the movie, cinema, date and timing options .
Desktop
Mobile
Collapsable/ Expandable feature on Movie Detail Page
Based on the usability testing feedback, users found it a hassle to scroll down the entire page to search for the cinema and timing of the movie. We designed a collapsable function where users will be able to collapse and expand the chosen cinema operator and choose the cinema location with the movie timings.
We added lines between cinemas on the Desktop site and added arrows on the mobile site to make it obvious and intuitive to users that cinemas location can be expendable.
This enables the user to search for their chosen cinema and movie timings more efficiently and the layout of the page will have a much cleaner look as the information is organised well.
Desktop
Mobile
Compare Feature
We designed a compare function for users to be able to easily add as many timings from different cinema operators and cinema locations. Users are able to easily access this information and will aid them in deciding the movie timing.
The biggest challenge we faced was to figure out how to introduce this feature into the platforms as this is a new feature that users have not used on any movie booking website before.
Based on the 2 rounds of usability testing, users did not noticed this compare function. As such, we wanted users to be aware of its' existence. To capture our users' attention, when users click on the movie description page, the compare feature will slide in from the right side of the screen to catch users' attention and it will move down as users scroll down to view the movie timings.
Likewise for the mobile site, once users enter into the movie description page, the compare feature will appear at the bottom of the screen and would stick to the bottom of the screen as the user scrolls down the page to the movie timings. This will cause the users to easily notice that there is a compare feature available for them to compare movie timings.
In addition to introducing the compare function, users also have the option of sharing their list of movie timings to their friends. Talking to the users, it became apparent that they appreciated this feature as it will aid them in deciding on the movie timing with their group of friends in a more efficient way.
Desktop
Mobile
Desktop
Mobile
Next Steps
-
Perform another round of testing to test the effectiveness of our second iteration and further enhance user experience.
-
We also want to do more user research exploring how users would share the movie timings and information with their friends and how can we implement it into the desktop and mobile site.
-
Carry out research and testing on how to make it even easier for users to compare movie timings. (e.g Allow drag and drop time slots on desktop)
My takeaway
-
Designing a new feature that is simple and intuitive is a challenge and must be done through numerous testing and affirmation. What our team thought was an intuitive design might not be intuitive enough for our users as evidenced in the 2 rounds of usability testing.
-
Working in a team where there will be many ideas and working styles has taught me that effective communication is essential in progressing ahead in our project. This includes listening more to others' opinions and reaching a consensus by accommodating to each other.