Redesigning SG-Movies movie booking app [UXDI Project 3 Retrospective]

SG-Movies is a movie booking aggregator app that allows users to view all movie listings for the different cinema chains in Singapore. The value of having such an app is to prevent users from having to research each cinema chain individually, especially as most do not have a strong preference for any. My group redesigned this app over the course of 2 weeks.

Selecting our App

Choosing the Focus

For our 3rd project we were split into groups of 3 and given the freedom to redesign an existing app of our choice. I was grouped with Risiandi Jiang and Charlotte Lee. We decided to explore movie booking apps because we knew that it has always been an unnecessary annoyance for many.

Choosing the App

We picked a movie booking aggregator app because we assumed that first of all there were a number of competitive cinema chains in SG, most people do not have a strong preference for any, and that most people do not want to have to download or search on multiple specific cinema apps/websites. The ideal would be to have an app that aggregates all of the choices in one place and make it easy for users to view all options and make a choice. We based a lot of it on assumptions, our personal preferences, and past experiences.

We started with downloading a number of existing movie apps to view our options and also to do a brief first level of competitive analysis, noting any comments on features and style. We decided to select SG-Movies because it was currently unknown and not the strongest (Popcorn is the most well-known), but at the same time it had a good enough design interface that we believed we could improve on.

User Research

User Interviews and Usability Testing

We conducted User Interviews to better understand people’s movie booking behaviours and experiences, as well as Usability Tests to see how users feel about interacting with the current SG-Movies app.

We interviewed a total of 15 people (5 each) with an age range of 17 to 40, to gather as much knowledge as possible about our potential users.

Affinity Mapping

From our interviews, we did affinity mapping to group behaviours and better notice trends. It was quite overwhelming and difficult as we had so many data points from 15 users. When we first started, the tendency was to group based on the actual behaviour rather than the motivation or ‘why’ behind the behaviour, which was the point of the affinity mapping — but we eventually were able to look past the surface, and came up with 7 groups.

Findings:

There were not too many pain points for users, the process was generally quite straightforward. The main concerns for them were always coordination amongst friends to find a convenient location and/or time, and good seats. If the seats were not good, they would rather not watch the movie. And they often compared seats for different movie showings. But it was taken as a given for the process, and they did not seem to have complaints about that.

Personas

During our discussions, we noticed that our users could be grouped generally into a few different types based on their behaviour and demographic.

We created 3 personas based on our user interviews to help us better visualize and focus on our users’ needs.

  1. Sophia is an impressionable young adult who values her friends, and has time and no money. She can be flexible on time and location depending on student discounts available. Watching movies is a social activity for her and she is not necessarily picky about the type of movies she watches.
  2. Sharon is a single ambitious career woman, who has money but no time. She is selective about the types of movies she watches, and while she will invite friends, she is okay with watching movies alone because her friends are also busy, and what she wants is the entire cinema experience.
  3. Michael is a dependable working family man who like Sharon has money but no time. Watching movies is also a social activity for him, and he spends time coordinating with his friends.

We decided to focus on Michael as our primary persona because we found that most users fall under his category, so we could widen our user base. Furthermore, since he is a social movie-goer, he could influence his friends to also use the app, again widening our user base. Finally, as he has money but no time, he would have a higher conversion rate than the student Sophia.

Customer Journey Map

We created a Customer Journey Map for Michael to help us better visualize his thought process and likely interactions with our apps, so that we could best address his needs. It starts from when he first considers watching a movie; to researching location, time, seats and deals; simultaneously coordinating with his friends; making a decision and finally purchasing the tickets.

As noted earlier, his only concerns were finding a convenient time and location, as well as good seats. Other than that, we realized that he did not have pain points but there were opportunities for us to improve his experience.

Testing and Analysis of Current App

Usability Test

From Usability Tests we understood that users did not mind being redirected to the cinema site to book tickets. It was also clear that the process of using a movie booking app was generally quick and simple for users because the flow was easy, the most time-consuming part was always from having to coordinate time and location with friends, but they never mentioned it as a pain point.

Heuristics Analysis

In further analysis of the current app to explore areas for improvement, we found that

  1. There were redundant search functions in the main bar
  2. There were overlapping buttons in some pages
  3. The overlapping dropdown menu in the search page means that users cannot make selections properly

Prototyping

Developing our Solution

Our aim in redesigning the app was to help users fulfil their main goal of selecting a movie showing and booking tickets. From our research we knew that the best way to do this was to help them find a convenient time and location, and good seats.

Our solution was to introduce two new main features

  1. The option to preview seats even as they were looking at their different options, rather than forcing them to click into the movie booking page
  2. The option to shortlist a few movie showings so that they can compare time, location, and seats in one page before making a choice — especially since we know that they often take some time to coordinate with friends before deciding

Sketch/Wireframe/Prototype

We started sketching based on the current app design, while thinking about how we could solve the current issues we found in heuristics analysis and also how to incorporate our new features.

We then moved on to create the wireframes in Axure because at first we wanted to use Axure for our prototype to create the micro-interactions. However, we soon realized that there were limitations to using Axure especially for a mobile app, and it was also too complicated given the time limitations. So we quickly did a crisis management re-assessment, deciding to use Marvel for our prototyping. We were able to export our wireframes and prototype pages from Axure to create the interactions in Marvel.

User Flow

We knew from our user interviews open the app with different intentions and interact with the app in many different functions so we wanted to account for these. We create a User Flow while developing our prototype to clearly note the different steps:

  1. In browsing movies, they had 2 options — either to view through the Now Showing Page, or the Search Function if they had specific criteria
  2. Then they could preview seats for the specific showing they are contemplating
  3. If they decide on it, they can directly click book movie and be directed to the cinema’s website to pay. If not, they can add it to their shortlist, and compare different movie showings in the My Shortlist page before making a decision

Usability Test and Reiteration

We did a series of Usability Tests on our prototype with 6 users and found that:

  1. In general they 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 really liked the My Shortlist function, because they no longer had to go to individual cinema websites to consolidate and compare their options
  3. They liked the layout and design of the app

The only issue to note was that the font size was too small, so we quickly changed that for the final prototype. Other than that, there were other suggestions that users made:

  1. To have more flexibility in the selection of location in the Search Function — the ability to select multiple options for location, or to select an area e.g. Central instead of having to specify Orchard
  2. Similarly more flexibility in the selection of time in the Search Function — instead of being boxed into selecting predetermined one hour slots, they could define their own time. Our solution to this is to create a slider filter option, so that users can select a movie that starts at 7.30 to 8.15pm instead of having to choose 7 to 8pm
  3. Users would like to share a common platform for the My Shortlist function with their friends so that others could also make edits to it

Digital Prototype:

Presentation Link:

Future Steps

Feature Prioritisation

While designing our solutions and coming up with features we would like to implement, we had a lot of ideas based on our user interviews and competitive analysis, however we had to prioritise these features in order to ensure that we fully develop each idea to the best of our abilities, and also taking into consideration time and manpower limitations.

For our prototype, we focused on the seat preview and My Shortlist function because that was users’ main concern, but we made a timeline for the next features we would like to develop and launch in the future.

  1. Polling Function
    We knew that users spent time coordinating with their friends, so we wanted to bring it directly into our app because it goes along with the My Shortlist function. So we wanted users to be able to vote directly on the Shortlisted options, this of course means that they would have to have accounts linked to their social media accounts, but we would still allow the usage of our app without account creation
  2. Movie Recommendations
    Using artificial intelligence, we would give movie recommendations based on past user behaviour on the app. This could also increase the movies that users potentially watch, as we cater to their tastes and help them become more interested in options
  3. Reviews & Ratings
    We knew that users value reviews and ratings when they look at movies, so we decide to bring in reviews and ratings from IMDB and Rotten Tomatoes which are amongst the more well-known and respected movie review sites
  4. Referral System
    At this point, we believe that we have enough attractive features, so we would like to further increase our user base by giving discount coupons/free movie tickets to our users after a certain number of successful referrals
  5. Booking & Payment System
    Now that we have a large user base, we would like to bring the booking and payment system to become a native feature of our app. To do this well, we would have to cooperate with the cinema brands, so we would pitch our platform to cinema brands. 
    It is attractive for them because they would not have to waste time developing and maintaining their own apps if they outsource the booking system to us. Furthermore, besides our user base, we could also sell them our user data to help them understand user behaviour as well.
  6. Verify Student Identity
    Finally once we have the payment system in our app, we would like to allow student identity verification with their student IDs to allow students to apply discounts and promos. Currently many students have to go to the movie counter physically in order to get these discounts even though they would prefer to book online. This is especially since they have limited finances.
Show your support

Clapping shows how much you appreciated Suetning Wong’s story.