A UX Redesign Challenge to Improve the Movie Booking Experience on SG-Movies

A UX Redesign Challenge to Improve the Movie Booking Experience on SG-Movies

Responsibilities

Responsibilities

UX Techniques

UX Techniques

Market Research | Competitive Analysis | Heuristic Analysis | User Interviews | Usability Testing | Affinity Mapping | Persona | Customer Journey Mapping | Feature Prioritisation | User Flows | Wireframing | UI Design | Rapid Prototyping

Market Research | Competitive Analysis | Heuristic Analysis | User Interviews | Usability Testing | Affinity Mapping | Persona | Customer Journey Mapping | Feature Prioritisation | User Flows | Wireframing | UI Design | Rapid Prototyping

Tools

Tools

Google Docs | Google Slides | Video & Microphone | Adobe Illustrator | Axure | Marvel

Video & Microphone | Axure | Marvel

Team Members

Team Members

Risiandi Jiang | Suet Ning Wong | Charlotte Lee

Risiandi Jiang | Suet Ning Wong | Charlotte Lee

There are many cinemas in Singapore and the major ones like Shaw and Golden Village have their own movie booking app. However, based on the user interviews we conducted, most cinema patrons prefer movie booking apps such as Popcorn and Showtimezz.SG etc. That is because, apps like these provide cinema patrons with an overview of all the movies that are showing and all the cinemas that are screening them. SG-Movies is one such app. Unfortunately, the app itself doesn't perform as it should and pales in comparison to its direct competitors mentioned above due to UX and UI issues. We'll discuss that in a bit, but this shortcomings created the prefect opportunity to improve the product.

There are many cinemas in Singapore and the major ones like Shaw and Golden Village have their own movie booking app. However, based on the user interviews we conducted, most cinema patrons prefer movie booking apps such as Popcorn and Showtimezz.SG etc. That is because, apps like these provide cinema patrons with an overview of all the movies that are showing and all the cinemas that are screening them. SG-Movies is one such app. Unfortunately, the app itself doesn't perform as it should and pales in comparison to its direct competitors mentioned above, due to UX and UI issues. We'll discuss that in a bit, but this shortcomings create the prefect opporutnity to improve on the product.

Overview of the Cinema Market

Overview of the Cinema Market

We began by researching the cinema market in Singapore and discovered that there are 5 major cinema organisations controling the market. We also found out that the annual revenue was estimated at a grand total of SGD 201,197,448 in 2016 alone.

We began by researching the cinema market in Singapore and discovered that there are 5 major cinema organisations controling the market. We also found out that the annual revenue was estimated at a grand total of SGD 201,197,448 in 2016 alone.

That is a huge market that SG-Movies is missing out from due to its low user base which could be attributed to the app's poor UX and usability issues. I will elaborate on this initial assumption in the heuristic evaluation and validate it through a series of user tests later.

That is a huge market that SG-Movies is missing out from due to its low user base which could be attributed to the app's poor UX and usability issues. I will elaborate on this initial assumption in the heuristic evaluation and validate it through a series of user tests later.

Understanding the Problem with the Current App

Understanding the Problem with the Current App

We employed Jakob Nielsen's heuristic standards to conduct usability evaluation and analysis in order to understand the core issues plaguing the SG-Movies app. 

We employed Jakob Nielsen's heuristic standards to conduct usability evaluation and analysis in order to understand the core issues plaguing the SG-Movies app. 

User Interviews and Usability Testings to Gain Deeper Insights

User Interviews and Usability Testings to Gain Deeper Insights

Once the heuristic evaluation was done, we began to make our way to Shaw cinema and conducted our preliminary user research by interviewing cinema patrons to understand the psychology behind their needs and behaviours. We interviewed five users each and managed to gather fifteen users between the three of us.

Once the heuristic evaluation was done, we began to make our way to Shaw cinema and conducted our preliminary user research by interviewing cinema patrons to understand the psychology behind their needs and behaviour. We interviewed five users each and managed to gather fifteen users between the three of us.

A sample of user interview which was conducted at a neutral location (Shaw Lido Cinema at Orchard).

A sample of user interview which was conducted at a neutral location (Shaw Lido Cinema at Orchard).

When the interview session was concluded, we asked each participant if they would be willing to help us further by performing a usability test on the current SG-Movies app.

When the interview session was concluded, I asked each participant if they would be willing to help me further by performing a usability test on the current SG-Movies app.

We discovered that most of the users we tested shared similar sentiments towards the current SGMovies app:

We discovered that most of the users we tested shared similar sentiments towards the current SGMovies app:

1. The landing page looks too complicated.
2. The fonts are too dark and small.
3. Search and Theatre function is confusing and don’t function as they should.
4. When asked about how they felt about being redirected out of the app to the cinema website, they didn’t have an issue, even though it would occasionally hang during the payment process. They accepted that it would happen even if they were to book it directly through the cinema’s website from a laptop/desktop.
5. Users find it annoying that they couldn’t preview the seats availability without being redirected to the cinema website and had to start the whole booking process from the beginning when they couldn’t find the seats they like.

1. The landing page looks too complicated.
2. The fonts are too dark and small.
3. Search and Theatre function is confusing and don’t function as they should.
4. When asked about how they felt about being redirected out of the app to the cinema website, they didn’t have an issue, even though it would occasionally hang during the payment process. They accepted that it would happen even if they were to book it directly through the cinema’s website from a laptop/desktop.
5. Users find it annoying that they couldn’t preview the seats availability without being redirected to the cinema website and had to start the whole booking process from the beginning when they couldn’t find the seats they like.

Affinity Mapping and Developing Personas

Affinity Mapping and Developing Personas

We proceeded to extract data points from our user research into an affinity diagram and analyse the patterns to identify pain points and opportunities.

We proceeded to extract data points from our user research into an affinity diagram and analyse the patterns to identify pain points and opportunities.

We identified three personas from the patterns that emerged from the affinity diagram. The personas came into being from the earlier user research which were synthesised to form clusters of data points defined by common patterns in areas such as behaviours, motivation, pain points and pleasure etc. We were mindful to ensure that these personas create empathy and were relatable to the actual people whom they represent.

We identified three personas from the patterns that emerged from the affinity diagram. The personas came into being from the earlier user research which were synthesised to form clusters of data points defined by common patterns in areas such as behaviours, motivation, pain points and pleasure etc. We were mindful to ensure that these personas create empathy and were relatable to the actual people whom they represent.

Developing Our Customer Journey Map Based on Michael

Developing Our Customer Journey Map Based on Michael

We began developing Michael’s customer journey map by defining the processes that he had to go through starting from discovering a new blockbuster movie, to the considerations that would affect his decision-making process before proceeding to purchasing movie tickets.

Within each stage of the journey, we also defined sub-stages that impacts the main categories, eg. under “Discovery”, there are three stages that Michael has to go through based on our data points found in our affinity diagram; they are when he initially developed awareness, interest and finally, when he shares with friends. We also listed his key activities as he goes through each stage of his customer journey.

Michael’s customer journey map helped us to gain insights into his behaviour, emotional states through the journey, as well as, identify opportunities where we can help his process and improve his experience through different touchpoints as he interacts with our SGMovies app. Michael’s customer journey map ultimately helped us to better understand the essence of the whole experience from the customer’s perspective, not the business’.

We began developing Michael’s customer journey map by defining the processes that he had to go through starting from discovering a new blockbuster movie, to the considerations that would affect his decision-making process before proceeding to purchasing movie tickets.

Within each stage of the journey, we also defined sub-stages that impacts the main categories, eg. under “Discovery”, there are three stages that Michael has to go through based on our data points found in our affinity diagram; they are when he initially developed awareness, interest and finally, when he shares with friends. We also listed his key activities as he goes through each stage of his customer journey.

Michael’s customer journey map helped us to gain insights into his behaviour, emotional states through the journey, as well as, identify opportunities where we can help his process and improve his experience through different touchpoints as he interacts with our SGMovies app. Michael’s customer journey map ultimately helped us to better understand the essence of the whole experience from the customer’s perspective, not the business’.

Prioritising the New Features

Prioritising the New Features

We prioritised our new features by addressing the top two user needs based on Michael’s customer journey map, keeping in mind that SGMovies does not have a large user base. So the priority was to add the features that would help increase adoption rate among users, which in turn would help us increase conversion rate from browsing for movies to making the actual purchase using our app as a movie booking portal.

We prioritised our new features by addressing the top two user needs based on Michael’s customer journey map, keeping in mind that SGMovies does not have a large user base. So the priority was to add the features that would help increase adoption rate among users, which in turn would help us increase conversion rate from browsing for movies to making the actual purchase using our app as a movie booking portal.

Based on our earlier research we learned that our persona wants an app that allowed him to book movies at convenient locations and be able to check for seats availability without being redirected to the cinema site. In addition, he wants the ability to compare search results based on movie, time, and location for the best option when organising with his friends.

So we introduced three new features to allow:

1. users to preview seats within the app, without being redirected to the cinema site and going through the whole booking process.
2. users to find the cinema closest to them in terms of proximity by searching based on current location or search by areas, if distance is not an issue.
3. users to shortlist a few movie showtimes so that they can compare time, location, and seats in one page before deciding on which movie or cinema they want to watch at.

Based on our earlier research we learned that our persona wants an app that allowed him to book movies at convenient locations and be able to check for seats availability without being redirected to the cinema site. In addition, he wants the ability to compare search results based on movie, time, and location for the best option when organising with his friends.

So we introduced three new features to allow:

1. users to preview seats within the app, without being redirected to the cinema site and going through the whole booking process.
2. users to find the cinema closest to them in terms of proximity by searching based on current location or search by areas, if distance is not an issue.
3. users to shortlist a few movie showtimes so that they can compare time, location, and seats in one page before deciding on which movie or cinema they want to watch at.

Creating a Task-Driven User Flow

Creating a Task-Driven User Flow

We began working on the user flow with a single-minded focus – to create a seamless movie booking user experience.  

We began working on the user flow with a single-minded focus – to create a seamless movie booking user experience.  

Once we were satisfied with the flow, and understood where the features would be best implemented within the flow, we began sketching out the lo-fi wireframes.

Once we were satisfied with the flow, and understood where the features would be best implemented within the flow, we began sketching out the lo-fi wireframes.

Hi-Fi Wireframes and Prototyping

Hi-Fi Wireframes and Prototyping

We proceeded to create hi-fi wireframes in Axure and began prototyping in Marvel once we had completed our lo-fi version. 

We proceeded to create hi-fi wireframes in Axure and began prototyping in Marvel once we had completed our lo-fi version. 

User Testing and Iterations

User Testing and Iterations

Once our hi-fi prototype was done and we have tested its usability internally, we let it out into the wild by doing user testing at neutral locations.

We did a series of usability tests on our prototype with six users and found that:

1. users found the app easy to understand. Labels were clear and navigation was intuitive. It was easy for first-time users to learn how to use the app
2. users loved the My Shortlist function, because it allows them to compare their options within the app without having to check individual cinemas, especially for seats availability
3. they liked the overall UI design of the app
   

The only issue raised during the user testing was the font size being too small and users had difficulty reading, which we iterated immediately in our final prototype.

Once our hi-fi prototype was done and we have tested its usability internally, we let it out into the wild by doing user testing at neutral locations.

We did a series of usability tests on our prototype with six users and found that:

1. users found the app easy to understand. Labels were clear and navigation was intuitive. It was easy for first-time users to learn how to use the app
2. users loved the My Shortlist function, because it allows them to compare their options within the app without having to check individual cinemas, especially for seats availability
3. they liked the overall UI design of the app

The only issue raised during the user testing was the font size being too small and users had difficulty reading, which we iterated immediately in our final prototype.

Next Steps

Next Steps

For our next steps, we planned to add additional features which were identified as opportunities based on Michael’s customer journey map as well as the other two personas. However, with our limited time and resources, we had to prioritise the features that would help SGMovies to increase adoption rate and capture the most user base. In this case, the features that would resonate most for Michael who represents the majority of the movie-goers. We have created a rough timeline for the feature launches which we would break into a series of sprints as shown below:

For our next steps, we planned to add additional features which were identified as opportunities based on Michael’s customer journey map as well as the other two personas. However, with our limited time and resources, we had to prioritise the features that would help SGMovies to increase adoption rate and capture the most user base. In this case, the features that would resonate most for Michael who represents the majority of the movie-goers. We have created a rough timeline for the feature launches which we would break into a series of sprints as shown below:

Learnings

Learning Curves

1. Planning is everything! Plan for everything!
2. Presenting the prioritisation matrix is important and helpful to explain to clients why certain features are deemed more important than others. This is especially true, when it comes to showing how certain features would positively impact their business. In SGMovie’s case, because we do not have a large number of user base, we needed to focus on features that users need first to increase adoption rate of the app before we can monetise the business.

1. Planning is everything! Plan for everything!
2. Presenting the prioritisation matrix is important and helpful to explain to clients why certain features are deemed more important than others. This is especially true, when it comes to showing how certain features would positively impact their business. In SGMovie’s case, because we do not have a large number of user base, we needed to focus on features that users need first to increase adoption rate of the app before we can monetise the business.