Prototype focused on movie and theater discovery, seat selection, and ticket purchase. Some supporting features are intentionally partial. Live in-browser.
— 01
Overview
What ReelView is, and how it came together from interviews through a live, interactive prototype.
ReelView is a movie theater reservation booking app concept that I designed from user interviews through two rounds of a live, interactive high-fidelity prototype. The booking experience covers discovering movies and theaters, selecting seats, applying rewards, completing checkout, and ordering concessions.
— 02
Problem & goal
Theater apps add avoidable friction. The goal was to build intuitive seat reservation and ticket purchasing for users, starting with research.
The problem
Movie theater apps add friction to what should be a simple task. Fees appear only at the final checkout screen. Rewards sit behind separate menus instead of being integrated into the purchase flow. Seat maps lack exit markers and do not communicate the actual size of the room. Session timeouts can still occur whenever checkout is interrupted, even by screens unrelated to the purchase. Users are then forced to start over, and their previous seats are locked out for an undisclosed period of time.
The goal
Design intuitive, user-centered flows for the full booking experience, including movie and theater discovery, seat selection, rewards, checkout, and concessions (experimental). Ground each flow in research and validate through usability testing.
— 03
User research
Interviews with moviegoers, and three personas pointing to the same themes across very different lives.
User interviews revealed how people book movie tickets and reserve seats, and what frustrates them about existing apps. Sessions were transcribed with Granola and synthesized in NotebookLM.
Three archetypal personas emerged from patterns across those conversations, each a distinct type of moviegoer with a distinct set of frustrations.
Marcus28
Visual Designer
I almost always prefer going to commercial theaters over the local ones.”
Goals
Secure advance IMAX 3D or 4DX seats for big franchise movies
See transparent final pricing (base, fees) immediately
Preview the screen size and distance from any chosen seat
Frustrations
Session timeouts during interrupted checkout flow that lock chosen seats for 45+ minutes
Tiered “classist” pricing systems based on seat location in a theater
Third-party payment redirects that require extra identity verification
Linda58
Retail Manager
The only thing is that the convenience fees are pretty ridiculous.”
Goals
Use a digital “split the price” feature so friends pay for their own tickets
Identify exit locations on seat maps to pick seats near the doors
Book group seating early to ensure everyone sits together
Frustrations
High convenience fees that feel like a punishment for booking online
Dark, small interfaces for time selection that are hard to read
Unclear where floor seating ends and balcony begins
Elena34
4th Grade Teacher
With bringing a child, it’s really a hit or miss.”
Goals
Minimize financial risk by attending discounted days
Redeem reward points easily at checkout for popcorn or tickets
Identify large vs. small auditoriums on seat maps
Frustrations
Buried reward systems that require navigating multiple screens outside the checkout flow
Technical glitches that lock chosen seats once the reservation timer expires
Lack of theater size indicators and exit locations on seat maps
— 04
Define
Problem, hypothesis, and goal statements that anchored every design decision in research.
For each persona I wrote a problem, hypothesis, and goal statement to keep design decisions accountable to the interviews. Elena’s set:
For Elena
ProblemElena is a budget-conscious parent who needs integrated rewards and theater size indicators because she wants to minimize financial burden and ensure her daughter has a quality viewing experience.
HypothesisIf Elena can redeem rewards on a single checkout page and see clear showroom labels, she’ll book more confidently.
GoalReelView will let users apply reward points directly at checkout and clearly communicate the size of each showroom, which will affect parents like Elena by reducing the financial stress and theater size ambiguity of a “hit or miss” outing.
The statements for Marcus and Linda pointed at the same underlying themes: upfront pricing, rewards integrated into checkout, and seat maps with enough detail to support reservation decisions.
— 05
Competitive audit
Seven apps audited. Four consistent gaps in the market and the matching opportunities for ReelView.
I audited seven apps: five direct competitors (AMC, Regal, Cinemark, Fandango, Atom) and two indirect (SeatGeek, TickPick). The audit focused on ticket purchasing, seat reservation, and checkout.
Gaps in the market
Exit visibility.A consistent lack of exit location markers on seat maps.
Price transparency.Most direct competitors fail to show full prices including fees early in the flow.
Checkout efficiency.Mandatory concession pop-ups interrupt and extend ticket purchasing while the seat-hold timer is running.
Physical scale.No context for showroom size or screen distance.
Opportunities for ReelView
Rewards integrated at checkout.Place rewards redemption and the full total (fees, rewards, and all items purchased) directly on the checkout page.
Enhanced seat maps.Include exit markers and showroom size labels to aid in seat selection.
Reliable seat holds.Visible hold timers and a checkout flow that isn't interrupted by concessions or other screens.
Immersive previews for chosen seats.Integrate 3D panoramic views from the selected seat to set realistic expectations.
— 06
Design
User flows and sitemap created first, then a v1 prototype built in the browser. Six features highlighted, each tied back to research.
User flows and a sitemap came first in Figma, before any building. The structural work kept the design consistent once the prototype came together.
User flow — landing screen entrySitemap — full app
The prototype is a live, interactive browser build, developed with Claude Code. Producing a functioning prototype from the start gave me a realistic demo for usability testing. The design decisions (flows, hierarchy, feature choices, component behavior) came out of the research and competitive audit. After the build, I used Claude Code and the Figma MCP to extract and document a design system from the prototype as a reference.
Dual navigation
Two paths through the app: Movies-first, which starts with choosing a film, and Theaters-first, which starts with choosing a location. Both lead to the same seat reservation and checkout flow.
Movies-first
Theaters-first
Shared seat reservation and checkout flow
Pricing transparency
Base price, matinee discount, and service fee are all visible at the showtime selection step. The Before You Buy screen acts as a final summary before the user confirms the purchase.
Seat map
Distinct zones for front, center, and rear sections. Exit markers so users can pick seats near or far from the doors. Accessible seats shown in blue with a wheelchair icon. Each showroom labeled by size to give context about the auditorium.
Tapping a seat opens a simulated 3D POV from that position, with the distance to the screen in feet. This helps users set realistic expectations before committing.
10-minute seat hold timer
A visible 10-minute countdown runs during seat reservation and checkout. Competitors typically hold seats for 7 minutes. ReelView holds seats for longer so users have time to finish.
Rewards at checkout
In competitor apps, users typically have to redeem rewards as a code on a separate screen. In ReelView, rewards redeem directly at checkout as a points-to-cash conversion (5,000 pts = $5), without codes or additional screens.
Post-purchase hub
Concessions ordering and Invite a Friend live on the ticket confirmation screen and in My ReelView, not inside checkout. This keeps checkout focused on purchasing tickets and makes the most common post-purchase actions available as soon as the ticket is confirmed. Invite a Friend sends a message with the movie, theater, and seat details so friends can choose their own seats without the back-and-forth of coordinating over text. Because concessions aren’t included in the flow, users have more time to finish checkout and invite a friend before showtime.
— 07
Usability testing
Moderated remote sessions surfaced 96 observations across 10 clusters, sorted into 26 priority items.
Moderated remote usability sessions ran 45–60 minutes each. They covered the full seat reservation and ticket purchasing flow, plus an exploratory walkthrough of concessions since that feature wasn’t fully built out yet. Sessions were transcribed with Granola and synthesized using NotebookLM and Claude.
A colleague with color blindness walked through the app in an informal accessibility review. It wasn’t a formal usability study, but it shaped several v2 decisions around color contrast and seat-map textures.
96Observations54 pain points · 42 delights
10Clustersacross the booking flow
26Priorities4 P0 · 12 P1 · 10 P2
P0
Critical fixesMust address before another usability round.
Invite a Friend opens an in-app screen instead of the native share sheet
Participants expected the Invite a Friend button to open a native share sheet. Instead, it opened an in-app message sharing feature. Participants also validated the pre-filled message content (movie, theater, row, seat numbers) as correct. The issue was the delivery mechanism, not the message.
Accessible seats not distinctly labeled in POV, icon missing from legend
Accessible seats were shown in blue with a wheelchair icon on the seat map, but the icon was missing from the legend. In the 3D POV, accessible seats weren't distinctly marked either, creating a risk of non-eligible users booking them.
P1
Important improvementsShould address in the next iteration.
Group purchases produce one combined e-ticket
When multiple tickets were purchased together, the app produced a single combined e-ticket held by the purchaser. Participants wanted a way to split the tickets and send them to friends so everyone could arrive separately without relying on screenshots.
All seat maps look identical regardless of theater size
An intimate auditorium and a large-format IMAX auditorium rendered the same way, making theater size impossible to judge visually. Seat counts and theater sizes were shown as text but were often overlooked.
210 seats was meaningless. I can't imagine it in my head. Is it big or small?”
P2
RefinementsWorth addressing once the critical fixes land.
All-or-nothing rewards redemption
The slide-to-redeem mechanic applied the user's full rewards balance. Participants wanted to apply only a portion of their rewards points instead of redeeming everything at once.
What if I only wanted to use half of them?”
Child and senior prices not visible on the Showtimes screen
Only the adult price was shown at the earliest pricing stage. Participants didn't see discounted pricing for children or seniors until later in the flow when selecting tickets.
— 08
ReelView v2 iteration
Every P0, P1, and P2 finding addressed, plus an accessibility pass and a simplicity rework across every screen.
v2 addresses every P0, P1, and P2 finding from the usability study, plus accessibility and simplicity improvements driven by an informal color-blindness walkthrough and a WCAG AA guidelines audit. Changes are grouped by theme below.
Seat map
Answers P1Theater size
Seat maps are now proportional, unlike the single seat map reused across every theater in v1. A large IMAX auditorium renders visibly larger than a smaller, standard auditorium, so theater size communicates itself at a glance instead of relying on text descriptors people missed.
Before
After
Accessibility pass
Answers P0Accessible seats
The wheelchair icon is now present in the seat map legend, and accessible seats are distinctly marked in the 3D POV view. I used a web accessibility skill to check WCAG AA standards for screen reader support and color contrast across every screen.
The color-coded zones from v1 (Center rendered in a different color than Front and Rear) were removed, but text labels remained. The colors were redundant with the labels, and worse, they made Center seats look visually preferable when all three zones cost the same. Removing the color hierarchy lets pricing speak for itself.
Both changes are visible in the seat map screens above.
Tell a Friend and Split and Share Tickets
Answers P0Invite a FriendAnswers P1Group ticket
Invite a Friend was renamed Tell a Friend to make its purpose unambiguous: the recipient is being notified so they can buy their own ticket, not being gifted a ticket. It now opens the device’s native share sheet with the pre-filled message carried over.
Split and Share Tickets was added as a separate feature. This lets the purchaser send individual tickets from a multi-ticket purchase to each friend, so everyone can arrive on their own schedule without relying on screenshots. The two features live side by side on the confirmation screen and in My ReelView.
Before
After
New in v2: Split and Share Tickets
Rewards
Answers P2Rewards redemption
The slide-to-redeem mechanic was replaced with a stepper that applies rewards in $5 increments. The conversion rate (5,000 pts = $5), total points, and total cash value sit beside the stepper.
Before
After
Concessions rebuild
Because it was an exploratory feature, concessions was the least developed area of v1, generating 2 P1 and 5 P2 findings of its own. For v2, concessions was rebuilt to match the rest of the app and addressed those findings.
Rewards integrated into concessions checkout, using the same stepper as tickets.
A dedicated Concessions section in My ReelView so past orders are persistent.
Concessions orders linked to their associated ticket purchase in the Tickets section of My ReelView.
Beverage size options (S, M, L) and a clearer order-in-progress state when users add items.
Before
After
Pricing clarity
Answers P2Showtimes pricing
Ticket prices on the Showtimes screen now include an “i” icon next to the adult price, clarifying that discounted child and senior pricing is available.
Before
After
Ticket confirmation
Answers P1Auditorium number
The auditorium number is now displayed on both the confirmation screen and the ticket view in My ReelView. Row and seat alone aren’t enough in a multi-screen theater.
Before
After
Simplicity and visual hierarchy
Every screen got a pass to strip redundant or unneeded details at each step. The goal: cleaner screens with stronger visual hierarchy, so the most relevant information stands out first.
— 09
Impact
What ReelView proved: this app concept can meaningfully reduce the friction users currently tolerate in existing apps.
The design. Optimizing the flows that matter to users made ticket reservation noticeably easier and more efficient: a quicker path to inviting friends, no interruptions in checkout, and all fees shown upfront.
Other features that landed with participants. Integrated rewards at checkout, seat maps with exit markers and size context, longer visible hold timers, and 3D panoramic seat previews all registered as genuine improvements.
v2 extension. v2 addressed every priority tier, plus an accessibility pass and a simplicity rework across every screen.
— 10
Takeaways
Why research mattered, where AI helped, and what's coming in the next round.
Research-led design proved out. Interviews and competitive audit shaped every decision. The quality of the research showed up directly in the quality of the prototype.
AI as a design collaborator was game-changing. Claude Code produced a functioning prototype from the start, so participants interacted with a real build during usability testing instead of a static mockup. Other AI tools handled data synthesis and worked as a brainstorming partner.
Iteration speed compounded. Addressing every priority tier sequentially was only possible because the prototype was real and quickly editable via AI.
Practical sense of where AI fits. Quick iterations, audits, synthesis, and answers to hard questions paid off. Costs, usage limits, and the need to explain every change in a prompt were tedious at times.
What’s next
A second round of usability testing on v2.
An onboarding flow and the implementation of the search feature.
A guest checkout flow for users who do not want to create an account before purchasing tickets.
