Yannick Röösli
Yannick Röösli

University mobility platform for campus switching, where students can compare trains and shared rides within one flow.

All projects

Context

01 – Challenge

02 – What DID I Do

03 – Learnings

Student project

Collaboration with Mike De Bastiani, Dario Foti, Marin Hirschi and Marco Burkhardt

How can a university mobility platform make campus switching easier, more social and more sustainable by combining train connections and shared rides in one experience?

I contributed to the UX/UI design, visual direction, prototyping and design system, while the development team translated the concept into a functional MVP web app.

I learned how important clear roles, shared flows and component-based thinking are when a product moves from concept to prototype and into implementation.

ride-sharing-app-ui-components

HSLU students and lecturers regularly switch campuses for modules and cross-department collaboration.

→

Penda helps users coordinate recurring campus switches by comparing train connections, ride shares, and available car seats in one mobile-first platform.

How it works
3 steps
SHARED MOBILITY 01

Campus switching becomes a shared mobility experience, where train travel and ride sharing are part of the same decision.

FLEXIBLE CHOICES 02

Users can choose their destination, compare available options, join or request a ride, or offer seats as a driver.

PREDICTABLE FLOWS 03

Clear status feedback, role-based flows and reusable UI components help make the experience predictable and easy to repeat.

A university that moves across campuses, without a shared way to travel together.

→

Campus switches happen regularly, but they are rarely coordinated. Students and lecturers move between locations by train or car, often without knowing who else is taking a similar route. Penda turns this recurring movement into a shared mobility experience.

Yannick Röösli

Insights emerged through journeys, scenarios and early validation.

→

We treated the given brief as a hypothesis and made our assumptions visible through proto-personas, user journeys and role-based flows. This helped us understand the different needs of riders and drivers before moving into prototyping.

Key insights
4 insights
BEHAVIOUR 01

Users do not think in fixed transport modes. They choose what works best in the moment.

ROLE SPLIT 02

Riders compare options and timing. Drivers manage seats, meeting points and ride details.

TRUST 03

Users need context, feedback and visible next steps before committing.

REUSE 04

Because campus switching happens regularly, the flow must stay fast and predictable.

Narrowing a broad mobility problem into a solvable MVP.

→

The challenge was not to design separate features for trains and carpooling, but to support one recurring task: switching campuses under real constraints.

Design Challenge

How might we simplify the organisation of ride sharing and campus switching for university students, so they can travel faster, more affordably and more sustainably?

Success criteria
6 criteria
CLEAR PLANNING 01

Users can plan a campus switch without unnecessary steps.

COMPARABLE OPTIONS 02

Train connections and ride shares can be compared as part of the same task.

RIDER FLOW 03

Users know what happens after joining or requesting a ride.

RIDE CREATION 04

Drivers can offer a ride with only the essential information.

REPEAT USE 05

Consistent patterns and clear feedback support repeated campus switching.

SYSTEM CLARITY 06

Distinct rider and driver roles eliminate user confusion.

From sketches to a shared understanding of tasks and decisions.

→

We started with low-fidelity sketches to explore entry points and role logic. From there, we created an end-to-end user flow that mapped tasks, decisions and system states across both rider and driver journeys.

This flow became the blueprint for the product structure, from screen grouping to popup logic and feedback states.

early-sketches

Testing the flow before scaling the interface visually.

→

Based on the user flow, we built an interactive mid-fidelity prototype with conditional states. The interface was kept grayscale, so we could test the interaction logic before focusing on visual design.

We tested whether users could compare train and ride share options, understand their role, and interpret key states such as seat availability, ride requests and confirmation.

Yannick Röösli
What we learned
3 learnings
UNCLEAR ROLES 01

Users hesitated when it was not obvious whether they were acting as rider or driver.

UNCLEAR STATES 02

Seat availability and request status had to be more explicit and predictable.

TRUST CUES 03

Icons, labels and feedback messages strongly influenced whether users felt ready for a ride.

Turning testing feedback into clear components and scalable UI patterns.

→

In high fidelity, we refined the most important decision points: role entry, ride selection, vehicle identification, seat availability and date/time selection. These improvements were consolidated into a shared design system.

Yannick Röösli


Clear vehicle identification
A license plate field and flexible car information make rides easier to recognise.

Yannick Röösli


Predictable role entry
The start screen separates destination selection from the “Offer a ride” action.

Yannick Röösli


Clear action icons
We replaced ambiguous icons with more explicit symbols for actions like viewing passengers or sharing a ride.

Yannick Röösli


Explicit seat availability
A dot-based indicator was replaced with a clearer “x of y seats available” label.

Yannick Röösli


Visible current location
The active campus location is shown more clearly to help users check their starting point.

Yannick Röösli


Consistent time selection
Date and time pickers were unified with clearer arrival and departure logic.

State-Driven Design System

A state-driven design system ensures that high-fidelity improvements remain consistent across the product. Components such as cards, list items, buttons, and status indicators follow shared rules.

States like browsing, pending, confirmed, and inactive resolve clarity issues at component level and scale reliably across flows. This keeps the interface consistent, while making handoff and future extension manageable.

Yannick Röösli
Yannick Röösli
Yannick Röösli

Component tree as a shared handoff reference

→

To support design-to-code handoff, we documented the product as a component tree aligned with atomic design principles. This helped clarify component responsibilities, naming conventions, and reuse boundaries, and created a shared structure for planning and implementation between design and development.

Yannick Röösli

A validated high-fidelity product concept with a functional MVP.

→

The final outcome is a mobile-first product concept for campus switching, covering both rider and driver roles. Users can select a destination, compare train connections and ride offers, request or join a ride, and understand system states such as availability, confirmation and timing. Together with the development team, the concept was translated into a functional MVP web app.

Yannick Röösli
User testing
3 findings
MAIN FLOW 01

Users understood the core journey from destination selection to comparing mobility options and joining or offering a ride.

CLEAR STATES 02

Seat indicators, confirmation states and consistent time selection helped users understand what was available.

REFINEMENT 03

Remaining feedback focused mainly on wording, status messages and meeting point details, rather than the overall structure.

What this project taught me about product design and collaboration.

→

This project showed me how important structure is in interdisciplinary work. Clear flows, component logic and shared artefacts helped the team make decisions faster and move from concept to implementation more confidently.

Learnings
5 insights
ALIGNMENT 01

Shared artefacts such as user flows, component trees and prototypes helped reduce assumptions between designers and developers.

ENTRY POINTS 02

Role-based user experience needs clear entry points, especially when different users arrive with different intentions.

DETAILS 03

Icons, labels and feedback states can strongly affect how confident users feel when moving through an interface.

SYSTEM LOGIC 04

A good component system is not only visual. It also defines behaviour, states and implementation logic.

HANDOFF 05

The quality of a product depends not only on screens, but also on decisions, responsibilities and team handoffs.

←  All projects

Next project  →

University mobility platform for campus switching, where students can compare trains and shared rides within one flow.

Collaboration

Disciplines

Collaboration with Mike De Bastiani, Dario Foti, Marin Hirschi and Marco Burkhardt

  • Concept
  • UX / UI Design
penda-ride-connect-repeat-hero

Concept

Penda helps users coordinate recurring campus switches by comparing train connections, ride shares, and available car seats in one mobile-first platform.

CHALLENGE

How can a university mobility platform make campus switching easier, more social and more sustainable by combining train connections and shared rides in one experience?

MY ROLE

I contributed to the UX/UI design, visual direction, prototyping and design system, while the development team translated the concept into a functional MVP web app.

LEARNINGS

I learned how important clear roles, shared flows and component-based thinking are when a product moves from concept to prototype and into implementation.

The final outcome is a mobile-first product concept for campus switching, covering both rider and driver roles. Users can select a destination, compare train connections and ride offers, request or join a ride, and understand system states such as availability, confirmation and timing. Together with the development team, the concept was translated into a functional MVP web app.

Yannick Röösli

Note: The full case study is designed for web and is best viewed on desktop. This mobile version shows a condensed overview.

/ Menu

About me, curated work, and ongoing experiments that explore how visual communication and usability can create meaningful digital experiences.

About

Selected Work

Playground

Impressum

[ close ]
[ menu ]