Discover
What is on?
Case study / Interaction design / Viirus Theatre
The hard part was not the homepage. It was the state between “what's on?” and “I have a ticket.”
Viirus is a theatre, but its website behaves like a time-sensitive public service. A visitor has to discover a production, choose a date, understand language and accessibility context, resolve whether that performance is actually available, and then cross into an external ticket system without losing confidence.
- Client
- Viirus Theatre
- Role
- Product strategy, interaction design, frontend implementation
- Primary surface
- Mobile repertoire, calendar, search, ticket paths
- Constraint
- Multilingual cultural content plus external ticketing
Interaction model
A theatre visit begins as a chain of uncertainty.
The useful unit was not a page. It was the transition from vague interest to one actionable performance. Each step had to answer a different question without making the visitor reconstruct the theatre's internal content structure.
Choose
Which performance?
Resolve state
Available, selected, sold out, focused
Understand
Date, language, access context
Handoff
Continue to external ticketing
Decision 01 / State
Make the performance state explicit before asking for a ticket decision.
A date is not enough. The same calendar has to communicate which performance is available, which one is selected, which one is sold out, and where keyboard focus currently sits. Those states are part of the information architecture because they change what the visitor can do next.
Design rule: do not make hover carry information that touch and keyboard users also need.
- Touch has no persistent hover state.
- Keyboard focus has to remain visible through dense calendar navigation.
- Sold-out performances still need context instead of becoming dead ends.
- The external ticket handoff should happen only after the date and state are clear.
Decision 02 / Control
Turn accessibility requirements into controls and feedback people can actually use.
Accessibility was treated as behavior, not a compliance paragraph. Text size, spacing, contrast, motion, focus styling, target size, readable links, status messages, and keyboard-safe overlays all change the way the interface responds to a person.
Design rule: accessibility settings should alter the interface immediately and predictably.
- Search needs loading, empty, and result feedback that is perceivable beyond the screen.
- Overlays need a complete keyboard path, including a reliable way out.
- Reduced motion should change transitions rather than merely hide animation after it starts.
- Reading preferences belong in the product surface, not in a hidden help page.
Decision 03 / Latency
Performance is interaction design when every next action waits for the page.
Large cultural imagery was kept, but the critical path was made lighter with modern image delivery, responsive sizing, caching, and less blocking work. The point was not a better benchmark screenshot by itself. Faster rendering shortens the gap between intention and feedback, especially on phones and slower connections.
Decision 04 / Trust
Third-party media should not silently become part of the interaction contract.
Expensive external embeds were replaced or held behind consent. A custom social gallery preserved the theatre's visual presence while reducing third-party loading. Privacy, performance, and sustainability became the same interaction question: what should the system do before the visitor has asked for it?
Design rule: defer external work until it is necessary or explicitly permitted.
Receipts
Evidence trail, not vibes.
This version separates observation, design decision, implementation evidence, and measured result. The finished screenshot is still here, but it is no longer doing all the work.
The live service exposes the real journey
Repertoire, Calendar, Tickets, language switching, search, and the external Fienta ticket handoff are all visible in the public site. The interaction problem is not a hypothetical portfolio exercise; it sits in the everyday service structure.
The project record names the friction
The internal evidence trail records mobile performance audits, accessibility requirements, repertoire and calendar tasks, ticket journeys, privacy constraints, and daily editorial use as the material that shaped the redesign.
The interaction states were captured
The project archive contains dedicated captures for calendar interactions, search, accessibility controls, performance, privacy, and before/after PageSpeed evidence. The case study can show behavior instead of asking the reader to trust a sentence about it.