This portfolio was coded by me and is currently being recoded for responsiveness

Cinemate App

A Movie Ticket Booking App designed with accessibility features for wheelchair users. Cinemate is a movie buddy for an inclusive cinematic experience.

QUICK LINKS

Wheelchair users

The target user are wheelchair customers (permanent & temporary), who love watching movies on the big screen. Yes, I know these users might not be the majority, but accessibility matters! Let's see how other customers can also benefit from these special features designed for our friends in wheels.

stakeholder map & article

EMPATHIZE PHASE:

Empathy map

This is an aggregated map, created from data collected after interviewing two users, one of whom was a temporary wheelchair user. Due to time constraints, I conducted fewer interviews. I hope to do more user interviews soon.

empathy map

User persona

A fictional Mai was selected as the ideal candidate for prototyping, guiding the project through design and testing phases.

persona

Customer journey

The CJM helps visualize the steps Mai takes when interacting with the app before and during her movie-going experience, as well as the pain points she encounters along the way.

customer journey map

DEFINE PHASE:

Problem statement

This helps guide me through the entire design process, avoiding rambling thoughts and creating benchmarks for success.

problem statement

How might we...?

Keep asking 'how' helped me brainstorm solutions to assist Mai. Actually, I've tried 'Crazy Eights' first, but it seemed like it didn't work for me.

how might we

IDEATE PHASE:

Ideas

    In a nutshell, I would:
  • Replace the seat icon with wheelchair icon for more identifiable and visually present seating information.
  • Integrate “AR Direction” feature for customers to easily navigate to cinema’s facilities.
  • Integrate “Live-Support” feature for customers to request assistance before or during their cinema visit.
ideas of hmw1 ideas of hmw2 ideas of hmw3

Competitive audit

    In a nutshell:
  • I audited 4 competitors: CGV and Cinestar as direct competitors, and Momo and AMC as indirect competitors.
  • None of the apps (except AMC) offer wheelchair accessibility or in-app live assistance. This is a major opportunity for improvement.
general information interaction first impressions + visual design + content

Audit report

I summarized the competitive audit to identify gaps in the market and opportunities when building Cinemate.

audit report

PROTOTYPE PHASE:

User flow

A main user flow has been developed to provide users with a clear path through the Cinemate app. However, it reflects an ideal scenario. I still need to create more flows to better optimize the app.

main user flow

Information architecture

The overall structure of the Cinemate app.

information architecture

Storyboard

The big picture storyboard primarily focuses on the user’s needs and emotions, while the close-up storyboard concentrates on the product.

storyboards

Lo-fi prototype

This prototype has been created in preparation for the upcoming usability test. Its primary focus is on the app's functionality rather than its visuals.

TEST PHASE:

Research plan

Oops, another long text, but it’s super helpful for me to conduct smooth usability testing.

research plan

Usability note

I observed a friend, who is also the target user for this project, interact within the app to study her behaviors. I then took notes for further investigation.

usability note system usability scale

Insight

  • Users need a more intuitive way to find the information of the wheelchair area within the seat selection page.
  • Users need an easier way to access the direction feature within the home page.
Adjustment 1:Whenever users click on a wheelchair icon, popup information will appear, allowing them to review the details before deciding whether to reserve the seat or not. Additionally, I have attached a seating layout for users to view their actual seats before making a decision.


Adjustment 2:Add an extra menu-tab using the accessibility icon, which is widely recognized by individuals with disabilities. Users can quickly identify and access available assistive options.

VISUALS

showcase

01 / Empathize

02 / Define

03 / Ideate

04 / Prototype

05 / Test

Visuals