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.
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.
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.
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.
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:
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.
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.
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.
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’.
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.
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:
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:
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.
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.
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.
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:
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:
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:
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
Selected Works
ZipHR Mobile Check-InUX + UI Design
Perx Loyalty Reward AppUX + UI Design
SG-MoviesUX + UI Design
NTUInformation Architecture + UX + UI Design