Skip to case study
All portfolio workWebsite concept · Public transitOpen experience
Independent concept projectPublic transitReference measured · review required

Loopline Metro

An accessible civic travel service covering planning, departures, routes, alerts, fares, access, stations, projects, and feedback.

Launch interactive experience Browse all 20 pages
Project type
Independent concept
Format
Responsive website
Experience scope
20 connected pages
Industry
Public transit
Fidelity status
Reference measured · review required
01 · Design rationale

A product direction built around a complete journey.

An accessible civic travel service covering planning, departures, routes, alerts, fares, access, stations, projects, and feedback. The case study exposes the project’s structure and delivery boundaries so visitors can assess the visual system, route coverage, and intended interactions without mistaking a concept for commissioned client work.

  1. 01

    City journey planning and live service information

    The route architecture is organised around city journey planning and live service information, with each named screen assigned a specific interaction role.

  2. 02

    Project-specific visual direction

    Cream civic wayfinding with distinctive route colours, universally legible typography, live-map motion, and strong status semantics.

  3. 03

    Original asset plan

    Original transit maps, fictional schedules, CSS wayfinding icons, and licensed city textures.

02 · Experience architecture

Navigate the complete site map.

Every named page opens directly, making the concept’s scope inspectable and shareable without loading every experience route on this page.

20Connected pages

Routes describe the frontend experience. A visible route does not by itself claim a live backend integration or native store release.

03 · Evidence and boundaries

Original presentation, documented provenance.

Reference research and implementation status are stated separately. Third-party screenshots, logos, and branded assets are not used in this presentation.

Miro reference study

Reference record

The Miro links below document private clean-room measurement. They do not imply affiliation, endorsement, human approval, or permission to republish source screens.

System
W22 · web
Studied
2026-08-13
Entry family
annotated-board-stage
Status
reference-measured · human review required

Automated targets: structural changed pixels ≤ 2.0%, full changed pixels ≤ 8.0%, MAE ≤ 0.015, RMSE ≤ 0.035. These are measurement targets, not pixel-perfect certification.

Asset record: Original transit maps, fictional schedules, CSS wayfinding icons, and licensed city textures. Reference imagery is research-only. Public experiences ship original or licensed assets with source records.

  • Miro web section 1

    Alternating story modules

    • 768px capture uses a 48px compact white navigation bar
    • centered two-line 31px headline precedes a 50/50 photo-and-copy story
    • story media begins near x85 and copy begins near x410
  • Miro web section 2

    Sticky-board proof

    • 236px signup copy and 326px board preview share a 598px inner grid
    • board has a slim left tool rail, faint square grid, and grouped sticky notes
    • trust statement and five proof marks occupy the final 110px of the crop

Explore Loopline Metro from its first page.

Open the browser experience, then use its connected navigation to inspect the complete concept route by route.

Launch Loopline Metro