UX Case Study

Opera Ticketing Experience — Evaluation & Redesign

Originally designed in 2021 for an opera ticketing platform.

Role

UX Designer

Scope

Information Architecture,
Decision Mapping

Context

This project was part of a 0‑to‑1 brand identity and visual system development – the website needed to reflect consistent brand language (logo, colour, typography).

Now revisited to evaluate usability gaps and propose a more structured UX approach.

Goal

→ Improve findability
→ Reduce cognitive load

2022

Key UX Issues

01. Weak Content Hierarchy

Event cards carry equal visual weight

Users must process information linearly, increasing cognitive load.

02. Poor Time-Based Discoverability

Schedule information is embedded within individual event cards

No quick way to scan “what’s upcoming shows now”

03. Unclear Action Path

Primary actions lack visual priority

Ticket purchase actions compete with descriptive content.

Direction

The redesign focuses on restructuring information to support faster scanning and clearer user decision-making.

Surface time-sensitive information early
Introduce modular content hierarchy
Strengthen primary action visibility

Before UI

Redesign Wireframe

2026

Decisions

1. Live Schedule Strip

Why:Users need immediate access to time‑sensitive events.

What:A horizontal module below hero, showing upcoming shows with time + quick actions.

Result:Enables instant scanning of relevant events.

2. Modular Event Grid

Why:Original layout lacked grouping and hierarchy.

What:Standardized card structure (Image, Category, Title, Description, CTA).

Result:Improves scanning efficiency and readability.

3. Strengthened Primary Action Visibility

Why:Purchase action was visually diluted.

What:Elevated “Buy Ticket” to a consistent, visible position.

Result:Clarifies user flow: Browse → Select → Purchase.

4.Added QR Code for Local WeChat Integration

Bridges the gap between web browsing and WeChat‑based booking/support.

5. Added Calendar Navigation

Shows performances in date order, complementing the event grid.

Before vs After

Initial State (Before)

Flat layout without hierarchy
Hidden event time information
Visually diluted CTA (Weak action)
No local WeChat integration

Redesign Outcome (After)

Structured modular components
Time-first visibility for scanning
Clear primary action elevation
Direct QR code to WeChat public account

Reflection

“From layout-driven design to decision-driven design.”

Confidentiality Note:

Selected visuals are intentionally simplified and partially abstracted for portfolio presentation purposes. This case study focuses on information architecture, interaction rationale, and behavioural experience structure rather than proprietary implementation details. All trademarks and intellectual property belong to their respective owners.