A mobile app that compares train tickets on an interactive map, with price, duration and carbon footprint side by side.
A team of three, for the Alegria Academy Demo Day (September 2025).
I owned the design: research synthesis, Figma from wireframes to hi-fi, the design system and its build in Bubble. My teammates handled architecture, database and APIs.
Figma: design
Bubble: build
Mapbox: map
Navitia and SNCF APIs: train data
Google and Facebook login
Canva: pitch deck
The problem
Booking a train trip across Europe is hard: cluttered interfaces, misleading prices, a fragmented offer.
🔍 Research
User research: a survey (57 respondents) and 3 interviews. Price comes first, then duration, comfort and CO₂.
Personas: Lysa, the eco-friendly traveller, and Marc, the pragmatic traveller.
How might we make train search simpler, show the carbon footprint and restore trust in prices?
Product and UX
Process: user flow, user story map, information architecture, wireframes, design system, interactive prototype.
Key product decisions:
Map-first comparison: price pins, routes drawn from the departure city, swipeable trip cards.
Filters and sorting: themes (City Break, Nature, Playa, Deals) and sorting by price, duration or CO₂.
Transparent trip details: legs, stations, onboard services, operators, then booking.
Booking in 3 steps to keep the flow short.
🎨 Design process
Moodboard and low-fi sketches as a team, then wireframes and hi-fi mockups that I designed in Figma.
The Figma file, with components and hi-fi mockups:
My role
Inside Figma
The whole mobile app UI (layout, visual hierarchy, interaction patterns), from wireframes to hi-fi mockups and the interactive prototype.
The design system: colours, typography, components, tags and states.
Inside Bubble
The design system rebuilt in Bubble: a dedicated page and 25+ reusable, responsive elements.
Properties on reusable elements, so one component adapts to each context.
Shared styles, 13 option sets, custom states and conditionals for every element state (hover, pressed, focused, selected, disabled).
Mapbox: destination labels, routes, map controls.
Workflows and micro-interactions: navigation, search popup, trip cards, map, with animations and show/hide transitions.
The design system page in the Bubble editor, with its reusable elements (RE)
🎤 Demo Day
Chooz was presented at the Alegria Academy Demo Day (September 2025). Below, a glimpse and an interview, published by Alegria Academy on LinkedIn.