A UX Redesign Challenge to Improve the Movie Booking Experience on SGMovies

UXDi7 Project 3: A Retrospective Into a Two-Week Sprint and Areas That Require Improvements.

UPDATE: Now that I’ve graduated from General Assembly’s UX Design Immersive course and re-read my retrospectives, I realised how naive I was when I first started. I am keeping my ALL my entries unedited to remind me of the growth I have gone through and that growth is an important part of a UX designer.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

So I am half way through the UX Design Immersive course at General Assembly and have just completed the third project. This time, it was a team project, and my teammates were randomly decided by drawing lots.

We were given the opportunity to select our own project. The only restriction was that this had to be an existing mobile app and we had to improve its user experience.

The team decided to work on a movie booking portal called SGMovies based on the following factors:

  1. It is an underdog compared to Popcorn and other movie booking portals, it allowed us the opportunity to assess it as a start-up and plan our business strategy for monetisation around that premise.
  2. It has a lot of room for improvements when it comes to user experience.
  3. The challenge to increase its user base and adoption rate by capitalising on the huge movie-going market in Singapore was just too irresistible.
A snapshot of the Singapore movie-going market in 2016.

Planning is Everything!

We started out with a rough plan detailing the milestones we needed to achieve everyday within the two-week sprint.

A rough plan detailing the tasks that needed to be completed everyday.

We gave ourselves a one-day buffer, incase we experience some unforeseen circumstances. The first rule about planning a plan, is to expect the unexpected; because even the best laid plan never goes according to plan.

Roles and Responsibilities

Next, we discussed roles and responsibilities. I was going to suggest that I would take the lead on the wireframes and UI design for the sake of efficiency. However, one of my teammates wanted to take the lead instead, because she wanted to practice wireframing on Axure, so I conceded and agreed to provide support and advice instead. Another teammate wanted to take on the role of the UX Researcher. So I took on the role of a UX Strategist and suggested that we supported each other at all time because it was important to learn every aspect of the UX process. The team agreed.

Our team hard at work!

Heuristic Evaluation of the Current SGMovies App

We began by evaluating the usability of the existing SGMovies app, employing Jakob Nielsen’s ten heuristic standards.

A sample page of the Heuristic Evaluation I conducted. For a more detailed documentation please click on the inline text link (“evaluating the usability of the existing SGMovies app”).

User Interviews and User Testing on the Current SGMovie App

Once the heuristic evaluation was done, we began to make our way to Shaw cinema and conducted our preliminary user research by interviewing movie-goers 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).

After each interviews, I asked if the participants were willing to help me further by testing the usability of the current SGMovies app. All of them agreed.

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:

  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

Now that we have found some qualitative data from the user interview and user testings, it was time to synthesise them into an affinity diagram and analyse the groupings to identify pain points and opportunities.

A snapshot of data capture through Affinity Diagram reveals deeper insights which helped us identify pain points and opportunities.

Once we had completed the affinity diagram, we proceeded by developing our personas. The personas came into being from all 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 needs etc. We had to keep in mind that these personas are real people and should be relatable to actual the 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 3: A reliable family man who enjoys watching movies with friends as a regular social activity. He has money but no time.

Based on our research, we discovered that Michael represents the majority of the movie-going population and we decided to focus on him during this two-week sprint.

Developing Our Customer Journey Map Based on Michael

We began developing Michael’s customer journey map by defining the process that he had to go through starting from discovering a new blockbuster movie, to the considerations that would affect his decision making 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 develops 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 helps our business 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.

Creating User Flow and Adding Three New Features

Before we started developing our prototypes, we created a user flow. Creating user flow helped us visualise the path the user would take through our SGMovies app and how we could enhance the 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 the user flow was done, we proceeded with lo-fi wireframing with sketches to ideate the content flow of the new features we added to ensure that it made sense for the users. 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.
Lo-fi wireframe sketches helps us visualise content flow as we ideate new features.

Hi-Fi Wireframes and Prototyping

We proceeded to create hi-fi wireframes in Axure once we have completed our lo-fi version. However, our teammate found a few difficulties creating the flow and I had to step in and worked on the hi-fi wireframes and UI design because we were running out of time. To exacerbate the matter, no one in the team were confident enough to work on the conditional logic required for mobile interactions on Axure. However, we managed this minor crisis by opting to use Marvel which is a simpler prototyping tool although it has its limitations.

To click here to view our working prototype.

User Testing and Reiteration

Once our 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 reiterated immediately in our final prototype.

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:

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.

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 they 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.
Prioritisation Matrix to align user needs and business impact.