Bus Ticket Case Study

Story and motivation

Tell about initial design concept, idea to make ticket interactive and explore possibilities on how this might be implemented. Concept on Dribbble.

Tools

Astro, React, TailwindCSS, Motion, Figma (Ticket Design and SVG assets creation), Github Copilot (Claude Sonnet 3.7 / 4.5), OpenAI Dall-e 3

Learnings

Designing this ticket highlighted the importance of clear hierarchy, responsive layout, and real-time status feedback. Building it as an interactive component also informed future patterns for animating state changes while keeping the interface accessible and easy to scan.

References and inspiration

VR app, HSL

Timeline

The idea for this ticket originated as a UI concept in Figma, published on Dribbble in June 2021. A revised static version followed in 2022. Development of the interactive prototype began in May 2025, producing the first flippable ticket component. The tiltable one-sided ticket was added in December 2025. The first released version (v1.0) was published in February 2026.

Alternative Designs

One-sided ticket design with animated logo and QR code

June 27, 2025

Aubreeport

Lake Scotty

17:17

04:11

bus

F66

seat

25A Aisle

type

Comfort

Passenger

Adult

Additional services

Pattern:Diagonal LinesGeometricDiamondConcentric CirclesStar SwingTire SwingGrid

Color-Coded Days of the Week

The animated logo uses a unique color for each day of the week, generated using an HSL color palette. This visual system helps users quickly identify tickets by day at a glance. The palette uses a 51° hue rotation with 75% saturation and 55% lightness, creating a harmonious rainbow effect across the week.

Pattern Variants

The ticket status indicator supports multiple animated pattern variants. Each pattern creates a unique visual identity while maintaining consistency with the ticket's color scheme.

Tear-Off Ticket Design

A practical ticket design with a detachable section. The top portion contains journey information while the bottom features a QR code and status indicator. The perforated tear line allows the bottom section to be kept as proof of travel while the top can be torn off and discarded after the journey.