Bus Ticket
A static 2021 ticket concept, returned to years later as a working flip, a system of active-ticket marks, and a detachable journey voucher.
January 05, 2026
Hämeenlinna
Helsinki
7:23
8:45
bus
F66
seat
26A Aisle
type
Comfort
Passenger
Adult
Additional services
The interaction existed in the design before I had the frontend skills to make it work.
I published the first work-in-progress screens on Dribbble in 2021 as Day #1[1]. The next day I revised them in Day #2[2]. Three later studies explored the app overview[3], ticket states[4], and booking flow[5]. The visual direction became clearer, but the ticket itself was still static.
The intended behavior was already there: journey information on one side, a scannable code on the other, and a card-like transition between them. I could draw both states in Figma; I could not yet build the transition well.
Years later, the first goal was simple: finish the interaction already present in the old design.
The coded ticket keeps the travel summary readable until it is needed for boarding. “Show ticket” rotates the card to a dedicated QR surface; “Trip details” brings the journey information back. The interaction completes the old design without expanding it into a larger booking product.
- 01Trip details. The front keeps the route, times, coach, seat, passenger, and onboard services together.
- 02Show ticket. The primary action flips the card instead of opening a separate screen or overlay.
- 03Scan and return. The back gives the QR code the full surface, then returns to the trip details with one action.
Once the original interaction worked, the ticket became a playground for making an active state visibly alive.
A later experiment placed the QR code and journey details on one surface, then added an animated validity mark. Its color changes with the weekday and its pattern can change independently. The written date and status remain the source of meaning; motion is a supporting signal.
The ticket as an artifact
The journey, QR code, and active mark share one self-contained surface. Pattern generation is explored separately below.
August 17, 2025
Schinnerbury
New Muhammadbury
04:57
04:13
bus
E58
seat
20A Window
type
Premium
Passenger
Adult
Additional services
Weekday palette
Choose a motion pattern, tune the weekday colors, and compare all seven active states. The inactive state keeps the same pattern but pauses its motion and stays neutral, so status never depends on color alone. Geometric was inspired by the HSL app[6]; Diagonal lines by the ticket in the VR app[7].
Palette controls
Choose a pattern, then tune the weekday colors.
Applied to all eight states
Angle between consecutive weekday colors
Color intensity across the palette
Brightness shared by every weekday
Generated marks
Seven active days and one paused, neutral state.
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
- Inactive
A second physical interaction, finished as a detachable journey voucher.
The second interaction uses another physical metaphor: detaching part of the ticket instead of turning the whole card over. The journey and voucher share one ticket surface, while the perforation, QR code, and motion make the detachable part clear. Its QR contains a small message for anyone curious enough to scan it.
The ticket is separated from its controls, following the same stage-and-control model as theCar Dashboard study. The artifact stays visually self-contained, while its state and available action remain explicit in a stable control bar above it.
Voucher controls
The voucher is attached and ready to detach.
Helsinki
18:01
Tampere
19:52
- Service
- IC 187
- Seat
- 25A
- Fare
- Flex
Passenger
Adult
- Wi-Fi
- Café service
- Luggage included
Journey perk
Free coffee or tea
One standard drink · Service IC 187 · Seat 25A
NR-0316-187-25A
An old idea can remain useful when the skills needed to finish it arrive later.
The original ticket did not need a new story or a larger product around it. It needed the interaction I had already imagined but could not yet build. Returning to it turned a static portfolio image into something a visitor can inspect and use.
Once it existed as code, it also became a practical base for new questions: how an active ticket signals validity, how variants can share a system, and whether a second physical metaphor can support a complete interaction of its own.
The working flip was published before the complete portfolio study.
I published the working flip on Dribbble on 20 May 2025 as Bus Ticket Flip Animation[8]. As of 14 July 2026, the shot had 18,156 views, 12 saves, and 15 likes.
Version 1 is the first formal release of this study.
Complete Bus Ticket study
The flip, active-ticket marks, and tear-off voucher now read as one finished Design Lab study.
- Finished the detachable journey voucher with deliberate data, hierarchy, states, and motion.
- Added live controls for comparing weekday colors, motion patterns, and the neutral inactive state.
- Kept the 2021 concept, the working flip, and the later experiments connected as one project history.
Five original Dribbble studies, the published flip, and two transit-app references.
- Ticket Booking App — Day #1The first work-in-progress screens, published in 2021.
- Ticket Booking App — Day #2The next-day revision of the original concept.
- Bus Ticket Booking — app overviewA wider mobile-app pass across search, booking, and tickets.
- Bus Ticket Booking — ticket statesA focused pass on the ticket list, active state, and ticket detail.
- Bus Ticket Booking — booking flowSearch, journey selection, and seat selection screens.
- HSL appThe active-ticket reference behind the Geometric pattern.
- VR appThe ticket reference behind the Diagonal lines pattern.
- Bus Ticket Flip AnimationThe working flip published on Dribbble on 20 May 2025.