P3-Mockup2

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

A Proposal to Help Users Search, Plan and Book Their Movies Seamlessly Through SG-Movies.

A Proposal to Help Users Search, Plan and Book Their Movies Seamlessly Through SG-Movies.

A Proposal to Help Users Search, Plan and Book Their Movies Seamlessly Through SG-Movies.

Responsibilities

Responsibilities

UX Design | UI Design

UX Research | Product Design | UX Strategy | Content Strategy | UX Design | UI Design

UX Design | UI Design

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.

P3_MarketResearch

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. 

P3_HeuristicEval

Click here to view the heuristic analysis documentation example

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.

P3_UserInterview1

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.

P3_UserTestVideo

Most of the users find the UI of the landing page a bit too complex.

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.

P3_Persona3

Persona 1: An impressionable student who enjoys watching movies with friends. She keeps an eye out for student deals. She has time but no money.

P3_Persona2

Persona 2: A career driven professional who is selective of her movie choices. She has money but no time.

Persona 2: A career driven professional who is selective of her movie choices. She has money but no time.

P3_Persona1

Persona 3: A reliable family man who enjoys watching movies with friends as a regular social activity. He has money but no time.

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’.

CJM

Michael’s Customer Journey Map helped us to gain honest insights into from his perspective during his movie booking journey which would in turn help us identify areas of opportunities where we could improve his experience through the process.

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.

P3_PrioritisationMatrix

We created the prioritisation matrix to identify and prioritise the features that would align the user needs and that of the business.

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.  

P3_Userflow

We took into considerations that users might have different ways of using our SGMovies app, depending on the situation, when developing the User Flow for our persona, Michael.

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.

P3_Wireframe2

Lo-fi wireframe sketches helps us visualise content flow as we ideate new features.

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. 

P3-Mockup1

To click here to view our prototype.

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:

P3_NextSteps

Certain features such as Booking & Payment System, as well as, Student ID verification system would be launched once we have managed to acquire enough user base so we could pitch our app as a movie booking platform to cinema organisations.

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.

Selected Works

ZipHR Mobile Check-InUX + UI Design

Perx Loyalty Reward AppUX + UI Design

SG-MoviesUX + UI Design

NTUInformation Architecture + UX + UI Design