Back

Cinema Web Interface

Star
★

Context & Challenge

Cinema Park ( kinoteatr.ru ) is one of CIS's largest cinema chains. Its digital interface suffers from systemic usability failures that frustrate users and hinder ticket sales.


Halfway through this project, the live site began rolling out updates that mirrored my audit findings.

Goal: Transform a cluttered legacy interface into a high-end, editorial experience that serves cinema enthusiasts without sacrificing accessibility or operational simplicity.


Strategy & Research

I performed a systematic UX audit using Nielsen's 10 Usability Heuristics, benchmarked against two competitors: Пионер ( pioner-cinema.ru ) and Karo ( karofilm.ru ). Cinema Park failed on nearly every heuristic assessed; only Recognition over Recall passed.

By mapping target user behavior against this findings, I identified the primary friction points in the booking flow and designed around them. I prioritized Cinema Events and engineered a high-speed booking flow with clear, real-time options filtered by date and time.

Persona Card

Image
Star

Design System &

WCAG AA Compliance

Rather than cosmetic changes, I built a production-grade design system that enforces both UX and UI decisions at the token level. Then I used Claude to cross-check WCAG compliance and token logic against the specifications.

AreaLegacyUpdated
Seat Selected StatePurple #9747FF - 3.2:1 contrast, fails WCAG AA, colour alone conveys stateCyan #00DFF0 - 6.1:1 contrast, passes WCAG AA + ARIA labels
Text ContrastNo defined token, inconsistent across screensCream on Navy - 12.6:1, exceeds WCAG AAA
Focus StatesNo visible focus ring on interactive elements2px cyan outline on every interactive element
NavigationNo breadcrumb, no back linksBreadcrumb on film detail + back links inside modals
Film SearchNo search: browse full catalogue or Google externallyExpandable real-time search in nav, filters by title & genre
Ticket TypeLocked after selection, wrong choice means abandoning cartEditable inline before payment
Session Button StateNo active state: unclear if tap registeredCyan fill + label on selected pill
Keyboard NavigationMouse only, seat grid inaccessibleArrow keys for pills, seat grid, carousel; focus trap in modals

With the audit mapped, I moved into wireframing, resolving the structural problems before touching colour or detail.

Wireframe

Image

Result

The wireframes resolved structure and flow. To validate the full experience, I built a functional HTML prototype with Claude, going beyond what a static mockup could test.

Check the Interactive Prototype →

Image 1Image 2Image 3

For the user:

  • WCAG-Friendly Design: Implemented inclusive design standards to prioritize legibility, contrast, and navigation for all users.

  • Clearer Information Architecture: Redesigned the site hierarchy to surface previously obscured schedule and film data, eliminating navigation ambiguity.

  • Faster Discovery: Real-time search. Special events surfaced immediately.

  • Error Recovery: Ticket type editable and seat change available without losing progress.

For the business:

  • Market Validation: Cinema Park shipped 4+ updates during my design process that directly mirrored audit findings. The diagnosis was accurate, the fixes are commercially viable.

  • Execution-ready Handoff: Responsive prototype, .md spec, token documentation. Dev can implement the full system independently.

  • Reduced Cart Abandonment.

  • Inclusive Design = Larger Market: WCAG AA opens the product to low-vision, vestibular, motor-impaired, and cognitively diverse users.