Spotlight (In progress)

As part of Google's UX Design Certificate, I am working on Spotlight, a conceptual app designed to make booking cinema tickets a seamless and rewarding experience. Through user research, I identified key frustrations with current systems, including complex interfaces, limited time for completing bookings, and minimal incentives to switch from in-person to digital platforms. My goal with Spotlight is to address these pain points by focusing on personalisation, simplicity, and rewards, creating a user-centered design that prioritises ease, transparency, and engagement."

My role: UX design, UX researcher, Visual designer

Tools used: Figma

UX ⟶ Visual design⟶ UX research ⟶

UX ⟶ Visual design⟶ UX research ⟶

The Challenge

The challenge was to create a cinema booking app that simplifies the user journey, enhances personalisation, and offers clear incentives for digital bookings. Existing solutions often lack intuitive design and fail to reward user loyalty, leading to frustration and preference for in-person purchases.

The Process

To address this challenge, I followed the Empathize, Define, Ideate, Prototype, Test strategy. I wanted to tackle this by developing user flows which enabled users to book tickets as well as have an incentive to use the app.

  • conducting extensive primary & secondary research
    and competitive analysis.

  • creating a clear style guide and component libraries

  • seeking continuous user feedback which helped enhance usability.

What We Learned from the Audience

User research

Target Audience

I defined the target audience as people aged 18-55 , who lived in suburban areas but only go to the cinema a few times a year. All of them like going to the movies with someone else maybe friends or family.

User Survey

I began with a short screener survey to identify users to interview. I received a variety of responses. of those responses, I could see that there were a number of features users would like to see. For example, easy seat selection, fast checkout, loyalty rewards/discounts and also group booking.

User Interviews

I then selected five survey respondents to participate in a brief  interview to learn more about their thoughts, feelings, and behaviours around going to the cinema or using cinema ticketing apps and identify pain points. This was useful as it triggered potential accessibility requirements. One of my users suffers from epilepsy and this can sometimes make the idea of going to the cinema quite nerve racking. I heard from users things like.…

‘‘I would love a personalised feature for a cinema ticket app! I hate it when it shows me horrors and I hate horrors!’’

‘‘I don’t want something overly complicated. If the app is simple and easy to use, I’m more likely to use it regularly.’’

‘‘I think a point system would be good. It would make purchasing tickets worth it. I’m not overly bothered about going to the cinema as I can use apps like Netflix or whatever and watch from home. But introducing a reward/point system would more likely encourage me to go, if I know I’m getting more out of the experience.”

Major pain points

Lack of personalisation

Over complicated to use (interface, UX)

Time constraints (can be long winded solving problems e.g ordering tickets)

Lack of incentive to use a cinema ticketing app

User Personas: Maicey & Hardeep

Maicey is a 24-year-old insurance broker who leads a busy lifestyle, seeking a cinema ticket app that’s both quick and rewarding, with a focus on features like preference filters for a personalised experience. Hardeep, an IT technician with a family, also values a fast ticket-booking process but is especially drawn to the idea of earning rewards, which would motivate him to use the app for family movie outings. Together, they both prioritise efficiency and the ability to gain benefits from their ticket purchases, making convenience and rewards the key drivers in their app usage.

Empathy maps

Using FigJam, I created empathy maps for Maicey’s persona, focusing on the full range of the user experience she would experience when ordering through a cinema ticketing app, to further empathise with my persona

Defining the Vision

User Journey Maps & Problem Statement

I then created user journey maps for each persona and developed problem statements for each.

Maicey, a busy 24-year-old insurance broker, loves socialising with friends and going to the cinema. She needs a fast, user-friendly app to book tickets quickly, along with a preferences filter to avoid films that don’t interest her. Additionally, she would appreciate an incentive to use the app regularly, such as a rewards system.

Hardeep, a busy IT technician and family man, needs an app that lets him book cinema tickets quickly and efficiently for family movie outings. He’s especially motivated by the ability to earn rewards, which would cause regular use of the app. Convenience and a seamless reward system are key to making the experience worthwhile for him and his family.

Goal statement

Our Spotlight app, will let users book films seamlessly and efficiently, whilst being able to earn & redeem rewards. By offering personalised incentives, we provide users with a compelling reason to choose our app, enhancing their overall cinema experience.

UX storyboard

This storyboard reflects my user persona, who wants a quick and easy way to book a cinema ticket for last-minute plans with friends. It combines both a big-picture view of her journey and close-up details of her interactions within the app.

Competitive Analysis

Competitive Analysis: Process

The next step in my process was to conduct a competitive analysis, focusing on both direct and indirect competitors for my cinema ticketing rewards app. For direct competitors, I selected Vue, Cineworld, and AMC; for indirect competitors, I chose O2 Priority and Dice. To thoroughly understand each app, I downloaded and tested them myself, applying a problem scenario similar to that of my user persona to evaluate how each app addressed user needs relative to my own.

For each competitor, I examined and documented key aspects such as the desktop and mobile experience, accessibility, user flow, navigation, features, tone of voice, brand identity, and the feedback in positive and negative reviews. This analysis revealed several gaps and opportunities, providing valuable insights to better inform my app design.

Findings

  • The cinema apps I researched didn’t include filters that let you select genre for films, or if they do offer this It’s not easy to find this feature.

  • Although the cinema apps (direct competitors) provided a rewards feature, they didn’t have any gamification features which I felt is a missed opportunity.

  • I feel like purchasing a ticket is quite a long winded process which could be simplified to one screen. For example, if a customer is bothered what seats they are in, then a feature could be added which automatically gives you seats. By doing this in the app, you can go straight to checkout.

  • While analyzing my indirect competitors, I noticed that accessibility settings in apps like O2 Priority were somewhat difficult to locate. For instance, to access these settings, users had to navigate through their profile, then go to settings, which may not be immediately intuitive. Simplifying access to accessibility features would improve the user experience by making these settings more visible and easier to reach.

  • Some users have experienced issues with e-tickets disappearing after being viewed (direct competitors), creating inconvenience and potential problems at the cinema.

My cinema ticketing/rewards app user flow

As a user, I want to able to quickly book cinema tickets but also browse any rewards/offers

I created a sample user flow that outlines the journey of a first-time user exploring the cinema ticketing app. The user navigates through the app's various features, including membership options, available rewards, and cinema listings. The flow showcases how the app introduces its key functionalities, guiding the user from initial discovery to making informed decisions about membership and rewards while also learning how to book tickets.

Hub & Spoke style information architecture

After reviewing my user flow, I found that adopting a Hub & Spoke style IA would be a great fit for my app. I wanted the home screen to serve as the central hub, offering users easy access to key areas like viewing rewards and browsing films.

Wireframes

Sketch wireframes

I started by sketching my app screens with pencil and paper, allowing me to quickly experiment with layouts and visualizing features. I continued using this technique throughout the prototyping phase, even when transitioning to digital wireframes. This hands-on approach helped me instantly assess whether certain ideas worked, and it encouraged me to explore new concepts as they came up.

Low fidelity prototype (In progress)

Transitioning to Digital Wireframes

After creating the initial sketch wireframes, I transitioned them into digital wireframes using Figma to refine the design of my cinema ticketing and rewards app. I adopted a hub-and-spoke style architecture with hierarchal elements , which allowed me to organise the main navigation and sub-sections in a way that felt intuitive for users. This approach ensured that all key features like movie browsing, ticket booking, and rewards were easily accessible while maintaining a clean, structured layout.

During the low-fidelity phase, I took the opportunity to experiment with various UI components, testing out different styles and interactions to see how they would work in a real-world scenario. This stage was crucial for iterating on design elements like buttons, carousels, and toggle switches to find the most user-friendly versions before committing to high-fidelity visuals. By building the foundation of the app’s functionality early on, I was able to establish a solid base for the user experience, making it easier to evolve the design as the project progressed.

Experimenting with interactive components such as card payment, carousels etc, enabled me to figure out potential design systems early on.

Usability Study: Findings

For my usability studies, I conducted both moderated and unmoderated sessions to minimize potential bias in my findings. In the unmoderated sessions, participants navigated through my low-fidelity prototype independently, using it as they would any other cinema or rewards app. For the moderated sessions, I provided participants with specific tasks and recorded their interactions (with permission) to gain detailed insights into their experience.

Unmoderated study

User feedback #1 - ‘‘Looks good! Just a heads up, the ‘See all’ link brings users to a dead end. Otherwise this feels pretty awesome. Nice work.’’

Users encountered a dead-end on the ‘see all’ links, which could cause frustration or confusion. This indicates a gap in the navigation flow that needs addressing.

User feedback #2 - ‘‘I suggest adding padding and time at the top, but I like it’’

Aesthetic improvements, such as padding and a time indicator, could enhance the design’s polish and usability.

To record these studies I used miro and also google sheets.