Design Lab study
Bus Ticket
An interactive ticket component study that turns a static mobile UI concept into coded motion, status patterns, ticket variants, and reusable travel-interface pieces.
March 21, 2026
Hämeenlinna
Helsinki
7:23
8:45
bus
E58
seat
41A Window
type
Comfort
Passenger
Adult
Additional services
Present to driver for scanning
Context
Story and motivation
This ticket started as a static mobile UI concept, then moved into code so the interaction could be tested instead of only imagined. The prototype explores how travel details, ticket status, QR information, and motion can support a small but believable transit interface.
The coded version gave the design a more useful evaluation surface: the ticket can flip, tilt, expose alternate variants, and reuse the same status language across different layouts.
Original visual direction: Concept on Dribbble.
Stack
Tools
Astro, React, Tailwind CSS, Motion, Figma for ticket design and SVG assets, GitHub Copilot, Claude, and OpenAI DALL-E 3.
Variant
Alternative ticket
The one-sided ticket explores a simpler card-like structure with an animated logo and QR area. It keeps the same travel data but changes the reading rhythm and interaction surface.
October 16, 2025
Maxton
Trevorstad
21:01
00:15
bus
E58
seat
11B Window
type
Economy
Passenger
Senior
Additional services
Palette
Color-coded days
The animated logo uses a unique color for each day of the week, generated from an HSL palette. The goal is a small repeatable system for quickly distinguishing ticket days while keeping the graphic language consistent.
Color Palette Controls
Angle shift between weekdays
Color intensity
Brightness level
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Inactive
Status language
Pattern variants
The ticket status indicator supports multiple animated pattern variants. Each pattern creates a distinct visual identity while keeping the status area recognizable across the ticket family.
Diagonal Lines
Geometric
Star Swing
Tire Swing
Grid
Variant
Tear-off ticket
The tear-off version separates journey information from proof-of-travel details. The top portion carries the trip, while the lower section holds the QR code and status indicator.
October 18, 2025
New Cruz
Makennaport
11:33
15:48
coach
G77
seat
23A Window
type
Economy
Passenger
Senior
Additional services
Complimentary journey perk:
1x Free Coffee or Tea
Standard selection only
e74bc764-fef2-4124-bfa6-1a129f9af917
Redeem at Restaurant Car, Coach 3 or wait for Trolley Service
Takeaway
Learning
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.
History
Timeline
The idea originated as a Figma UI concept 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, and the first released version was published in February 2026.