UX Design: Cinematix App

I have recently added User Experience to my skill set, and I'm excited to utilize my background in visual and animation experience as I focus into UX design. My strong aesthetics and user engagement foundation, combined with UX principles, will help me create effective designs. As a versatile designer, I excel in fast-paced environments and enjoy solving challenges with creative solutions. I thrive in fast-paced environments and enjoy solving challenges creatively. I'm a collaborative team player who is always looking for innovative solutions.

The Project

CinemaTix simplifies the moviegoing experience from start to finish. This user-friendly app streamlines ticketing, allowing effortless browsing of showtimes, seat selection, and secure in-app purchases, including movie tickets and concessions.

Role

Lead UI/UX designer doing  the following tasks

  • Ideation and User Research

  • Sketching and Wireframing

  • Prototyping with Figma

  • Usability Testing

Duration

June 2024

Personas

Black-and-white photo of a young woman with three children, possibly her kids, in a living room. The woman looks serious. Text overlay reads 'Mom Alicia' with additional phrases about staying at home and being a mother to three young kids, and a quote about getting tickets and snacks for movies.
A young woman with glasses sitting outdoors on stairs, looking at her phone and holding a coffee cup, with a backpack beside her, in a park-like setting with trees and sunlight.

USER RESEARCH

Painpoints

Outline of two tickets with star shapes on them, gradient pink to purple color.
Outline illustration of a ticket booth with a sign reading 'TICKET' on top.

Ticket Costs
Easily find special
offers and discounts
to save you money

Long Lines
Having booked online but still needs to line up for the ticket

Line drawing of a hand holding a smartphone with a purple and pink gradient.
Stylized purple and pink gradient sad face with question mark on the head, indicating confusion or uncertainty.

Limited Tech Knowledge
Having a hard time using and booking tickets via the app

Confusing Apps
Need to be intuitive
and easy to book

Sketched mobile app wireframes on a sheet of paper showing screens for login, sign-up, home, adding items, ticket summary, and event details.

Wireframing

Flowchart illustrating a user flow for a movie booking app, starting from app open, user login or sign-up, navigating through home, search, tickets, bookmark, profile, selecting movies, watching trailers, selecting seats, payment, and final ticket download.

User Flow

A person viewing a laptop screen displaying wireframe sketches for a mobile app design.

Prototyping in Figma

Wireframe displaying a series of screens for a movie booking app, including welcome, movie selection, seat selection, add-ons, checkout, and confirmation pages.

Lo-Fi Wireframe

Brand style guide featuring a logo with a film reel triangle icon, color palette with nine shades including black, blue, purple, pink, and teal, Open Sans font examples, and icons and buttons for website design such as home, shopping cart, user profile, notifications, film clapper, target, search, and heart, along with various button styles.

Design System

USABILITY STUDY :

Findings

Round 1

  • Needed an add-to-cart feature to review before purchase

  • Add ticket price variations for Adults, Kids and Family Deals

  • Add Trailer button and coming soon category

Round 2

  • Confirmation Checkout

  • Add an option to add ticket to e-wallet

  • Opt-out or proceed to checkout while on add-on page.

A series of mobile app screens showing a cinema booking process, including app login, movie selection, seat selection, add-ons, checkout, and ticket confirmation.

USER RESEARCH

Accessibility considerations

Colorful icon of a paint color palette and color swatches on a black background.
Neon icon of a hand touching a touchscreen with concentric circles.

Color Contrast
Ensure all text has a high contrast ratio with the background (at least 4.5:1 for small text, 3:1 for large text) to be readable for users with visual impairments

Gestures
Keep gestures simple (tap, swipe) and offer alternative ways to perform actions for users who have difficulty with specific gestures

Icon of a speaker with a plus sign, indicating volume increase.
Outline of a document connected to three database icons, symbolizing data management or integration.

Audio
Optional haptics and sound-on-button interactions

Logical Structure
Maintain a consistent and logical layout for the app's interface

TAKEAWAY

Impact

The impact of an app that's easy to use with a smooth checkout process can be significant for both users and the business. Here's a breakdown of the positive effects:

For Users:

  • Increased Satisfaction: An easy-to-use app reduces frustration and confusion, leading to a more enjoyable experience.

  • Improved Efficiency: A smooth checkout process allows users to complete tasks quickly and easily, saving them time and effort.

  • Higher Engagement: A positive user experience encourages users to spend more time in the app and come back for repeat use.

  • Greater Trust: A well-designed app fosters trust with users because it demonstrates a focus on their needs and ease of use.

My learnings

Incorporating usability testing throughout the design process is an essential strategy for creating a user-centred product. Testing with real users after each design iteration can continuously identify and address any pain points that arise. This iterative approach enables me to refine the design at each stage, ensuring a smooth and intuitive experience for the final product. This not only eliminates frustrating obstacles for users but also fosters a sense of satisfaction and loyalty by demonstrating that their needs are being prioritized.