ShowStop

ShowStop

ShowStop

Movies, TV Shows, and Community-Shaped Experiences

Movies, TV Shows, and Community-Shaped Experiences

Movies, TV Shows, and Community-Shaped Experiences

ShowStop's 3 Mobile UI Screens

ROLES

ROLES

This is a solo project where

I assumed the following roles:

UX Designer & Researcher

UI & Interaction Designer
Product Designer

This is a solo project where

I assumed the following roles:

UX Designer & Researcher

UI & Interaction Designer
Product Designer

DELIVERABLES

DELIVERABLES

Interaction Design:

High Fidelity Interactive

Prototypes


UX & UI Design:
Research Studies Findings

High Fidelity Mockups

Design System

Interaction Design:

High Fidelity Interactive

Prototypes


UX & UI Design:
Research Studies Findings

High Fidelity Mockups

Design System

TOOLS

TOOLS

Figma

Maze

UXArmy

Google Forms

Photoshop

Figma

Maze

UXArmy

Google Forms

Photoshop

DESIGNED FOR

DESIGNED FOR

Mobile
Tablet

Desktop

Mobile
Tablet

Desktop

Challenge

Challenge

Challenge

The idea for a feature that lets people watch their favorite movies in theaters with an audience surfaced when my friends and I were discussing re-released movies in my hometown, Hyderabad, not available where I attended college (Gwalior). No apps offered a feature to request movie screenings. I noticed, similar to me, all my cinephile friends juggled multiple apps to complete basic tasks related to movies/TV shows, like tracking shows or sharing watchlists.

The idea for a feature that lets people watch their favorite movies in theaters with an audience surfaced when my friends and I were discussing re-released movies in my hometown, Hyderabad, not available where I attended college (Gwalior). No apps offered a feature to request movie screenings. I noticed, similar to me, all my cinephile friends juggled multiple apps to complete basic tasks related to movies/TV shows, like tracking shows or sharing watchlists.

How might we empower people to watch their favorite movies in theaters with an audience?

How might we empower people to watch their favorite movies in theaters with an audience?

Objectives

Objectives

Objectives

  • Design a digital experience that enables movie fans to watch their favorite movies in theaters.

  • Design a feature-rich platform that makes it easier to complete tasks related to movies/TV shows.

  • Design a digital experience that enables movie fans to watch their favorite movies in theaters.

  • Design a feature-rich platform that makes it easier to complete tasks related to movies/TV shows.

Researching the problem space

Researching the problem space

Researching the problem space

Scroll inside table to reveal more content

Is the idea novel?

Is the idea novel?

I will be referring to my idea as ‘Re-Watch’ from here.

Only BookMyShow and PVR INOX offered private booking for corporates ( not for public ).

None of the competitors offers a user-driven feature like ‘Re-Watch’.

Why Re-watch in theaters?

Why Re-watch in theaters?

Audiences wanting to

  • Relive the theater experience for nostalgia or

  • Catch missed original releases.


100+

Movies re-released in India in the last three years.

What other problems users face?

What other problems users face?

Google Playstore reviews of competitors revealed some key issues like:

  • Poor search options

  • Theater screen details not shown beforehand

  • Rigid rating options

  • Poor privacy options and more


One funny thing was seeing hundreds of people rating the apps poorly because they offered no discounts.

Validating Re-Watch

Validating Re-Watch

Validating Re-Watch

Is Re-Watch feasible for theaters?

Is Re-Watch feasible for theaters?

“ This idea(Re-Watch) is good. I think it will be helpful to us to attract customers during less show ups due to no big films or flops. ”

“ All types of movies can be screened given that they are from a reputed production company. ”


- INOX Theater Manager

Do moviegoers want Re-Watch?

Do moviegoers want Re-Watch?

“If price is not an issue why not.”


“Is it available now? I would like to watch Taylor Swift Eras Tour”


- Interview participants

90%
of user interview participants and

65%

of survey participants see themselves using the 'Re-Watch' concept.

Zoomable image

Hover over image to zoom

Tap over image to zoom

Tap over image to zoom

Uncovering Pain Points

Uncovering Pain Points

Uncovering Pain Points

What are users’ biggest challenges?

What are users’ biggest challenges?

Hover over image to zoom

Pinch to zoom

Swipe to view more / Pinch to zoom

Go to the next image to view the sorted affinity map with problem groups listed. Glance at the headings like Navigation and Search for a quick overview of problem areas.

Defining the Personas

Defining the Personas

Defining the Personas

Who are ShowStop’s users?

Who are ShowStop’s users?

Swipe to view more

Pinch to zoom

Swipe to view more / Pinch to zoom

The Aakash and Maya personas, based on research findings, represent movie and TV show audiences. Explore their profiles to understand their goals and frustrations. View the next image for Maya’s persona.

Steps Rundown

Steps Rundown

Steps Rundown

These steps are summarized below for brevity due to their detailed nature.

See my full work here:

for details.

  • User Journey Mapping: Created 6 journey maps (3 current, 3 future state) to identify pain points and envision ShowStop’s experience.

  • Problem Statements: Developed 8 problem statements from affinity mapping, with 1-3 “How Might We” statements each to guide solutions.

  • Competitors’ Heuristic Analysis: Evaluated 100 UI screens of competitor apps using Nielsen’s 10 heuristics to inform ShowStop’s design.

  • Brainstorming: Generated unbiased solution ideas for each “How Might We” statement to tackle 8 problem areas.

  • Prioritization: Selected top ideas based on feasibility, viability, and desirability for ShowStop.

  • Content Analysis: Reviewed competitors’ UI screenshots for fonts, text styles, and sitemaps to shape ShowStop’s information architecture.

  • Preliminary Sitemap: Grouped pages and information to create a preliminary sitemap to envision ShowStop’s information flow.

Validating Navigation

Validating Navigation

Validating Navigation

Zoomable image

Hover over image to zoom

Tap over image to zoom

Tap over image to zoom

Can users find what they need?

Can users find what they need?

Taking reference from the preliminary sitemap, I created a tree structure to test the information architecture.


The first tree test (18 participants) had a 30.56% success rate, revealing unclear labels.

Zoomable image

Hover over image to zoom

Tap over image to zoom

Tap over image to zoom

After adjusting labels, the second tree test (100 participants) achieved an

80%
Success Rate

confirming clear navigation.

View the updated sitemap below.

ShowStop's Information Architecture Sitemap

Scroll down to view full image

Shaping the App

Shaping the App

Shaping the App

How did ShowStop take shape?

How did ShowStop take shape?

  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe
  • Low fidelity paper wireframe

I sketched low-fidelity wireframes for regular pages and unique ones like Request Screenings, Now Watching, and Lists to visualize ShowStop’s core features. These drafts set the stage for mid-fidelity prototyping.

Can users navigate without visual cues?

Can users navigate without visual cues?

  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen
  • Mid fidelity mobile UI screen

I created a mid-fidelity prototype of 32 screens, using minimal colors (white, black, greys) and a single font weight to eliminate reliance on visual cues, with real copy and interactive navigation.

Moderated usability test (5 participants, 5 tasks) at the food court opposite AMB Cinemas


90%

Overall task success rate

Refined the prototype based on insights, then ran an unmoderated usability test (50 completions) with 4 tasks.

Task results were decent despite drop-offs and mobile use challenges, as seen in the slideshow.


55%

Average Success Rate


Noted real issues for high-fidelity improvements.

Hover over image to zoom

Tap over image to zoom

Tap over image to zoom

Building ShowStop’s Design Language

Building ShowStop’s Design Language

Building ShowStop’s Design Language

How does ShowStop come to life?

How does ShowStop come to life?

  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component

Ticket Design System

Ticket Design System

Ticket Design System

  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component
  • UI component

I developed Ticket Design System, ShowStop’s official design language, adapting Google Material Design 3. It includes foundations (Color, Typography, Spacing, Elevation, Corner Radius, Breakpoints, Grids, Motion) and a UI library with 500 tokens and 400 components, built using an atomic approach (Atoms to Pages).

Polishing the Experience

Polishing the Experience

Polishing the Experience

Is ShowStop ready for users?

Is ShowStop ready for users?

I designed ~300 high-fidelity screens across mobile, tablet, and desktop using Ticket Design System, with a fully interactive prototype.

Moderated usability test (10 participants, 15 tasks) at the food court opposite AMB Cinemas.

99.23%
Success Rate

Ran an unmoderated usability test (56 completions, 241 attempts).

High drop-offs occurred due to a resource-heavy prototype causing lag or failure to open, though users with capable devices achieved decent results, as seen in the slideshow.

63%
Average Success Rate

Screens

High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen
High fidelity mobile UI screen

Scroll horizontally or verticllay to view all designs

Flows

Scroll horizontally to view all UI videos

ShowStop’s journey pauses here, usable, engaging, and brimming with potential for future refinements.

Gentlemen, it is with great pleasure to inform you that you’ve conquered the ShowStop case study. Thank you for exploring this journey!

Gentlemen, it is with great pleasure to inform you that you’ve conquered the ShowStop case study. Thank you for exploring this journey!

Gentlemen, it is with great pleasure to inform you that you’ve conquered the ShowStop case study. Thank you for exploring this journey!

You can follow my creative experiments and connect with me on

You can follow my creative experiments and connect with me on

You can follow my creative experiments and connect with me on