Yannick Röösli
Yannick Röösli

Redesigned the HSCL sports website using student insights and Figma, delivering a mobile-first experience for fast booking and clear availability.

All projects  ←

Context

01 – Challenge

02 – What DID I Do

03 – Learnings

Student project

With a large course catalogue, the HSCL sports website makes it hard to search, filter and quickly understand availability on mobile. Our redesign focused on Search, Favourites and Navigation, designed mobile-first.

I worked across UX and UI, turning research insights into flows, interaction patterns and a consistent Figma system. I designed key screens, including the discovery landing page and course cards with clear availability states.

Less debating, more testing, user feedback guided decisions. Team coordination was my biggest challenge, clear tasks, daily check-ins and communication kept us aligned on progress and next steps.

Yannick Röösli

04 – Current State

Desktop-first design

Missing clarity

Existing Experience

The existing HSCL sports website was mainly designed for desktop and felt difficult to use on mobile-devices.

Search and filters were not intuitive, availability was hard to spot, and there was no quick overview of relevant courses.

Yannick Röösli

05 – Process

Student inputs

Iterative prototyping

How did we tackle
the problem?

Feedback sessions were used to capture student needs and questions around course discovery and availability.

Findings were translated into sketches and low-fi prototypes, then refined through testing and rapid iteration in Figma.

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

06 – Insights

KEY PAIN POINT

Mobile clarity

What actually
mattered?

Search, filtering and navigation mattered most. Students had trouble discovering relevant courses quickly and efficiently.

Users needed faster paths and clearer availability. These insights drove the main structure and interaction decisions.

Yannick Röösli

07 – Solution

Improved core structure

Visual system

New Experience

 

Redesigned around three pillars, Search, Favourites and Navigation. Designed mobile-first for fast student access.

A reduced dark-based UI paired with the Geist typeface improves clarity and highlights availability states.

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

08 – Outcome

Final prototype

Why it matters

Final prototype

A refined mobile-first prototype that simplifies browsing and improves overall discoverability.

Students can scan options faster and navigate the offering with less effort on mobile.

←  All projects

Next project  →

In just nine days, we redesigned the HSCL sports website using student insights, prototyping and rapid iteration, creating a mobile-first experience for quick booking, clear availability and easy discovery.

PROJECT TYPE

Disciplines

  • 9-day sprint
  • Team project (6)
  • UX / UI Design
  • Visual Design
Yannick Röösli

OVERVIEW

Fixing key pain points, defining roles and capturing what we learned.

01 – CHALLENGE

With a large course catalogue, the HSCL sports website makes it hard to search, filter and quickly understand availability on mobile.

02 – MY ROLE

I worked across UX and UI, turning research insights into flows, interaction patterns and a consistent Figma system. I designed key screens, including the discovery landing page and course cards with clear availability states.

03 – LEARNINGS

Less debating, more testing, user feedback guided decisions. Team coordination was my biggest challenge, clear tasks, daily check-ins and communication kept us aligned on progress and next steps.

Existing Experience

The existing HSCL sports website was mainly designed for desktop and felt difficult to use on mobile-devices.

How did we tackle the problem?

We followed a rapid, iterative UX process with a strong focus on real student input. Insights from surveys and feedback sessions were quickly translated into sketches and low-fidelity prototypes, then continuously refined through testing and iteration in Figma.

What actually mattered?

User feedback highlighted search, filtering and navigation as the most critical parts of the experience. Students struggled to find relevant courses, understand availability and navigate the platform efficiently on mobile. These insights guided all major design decisions.

new Design system

A reduced visual system with a dark base and bold accent colours, set in the Vercel Geist font, enhances clarity and highlights availability states.

New experience

We redesigned the experience around three pillars: Search, Favourites, and Navigation, built mobile-first for fast scanning and quick booking.

Visual cues

We designed the colours to communicate course status at a glance: green for courses you’re signed up for, blue for available sessions, and greyed out for fully booked ones.

Outcome

The final result is a high-fidelity mobile-first prototype that improves clarity, discoverability, and speed compared to the original website. The concept demonstrates how a large sports catalogue can feel approachable and easy to use on mobile.

/ 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 ]