Yannick Röösli
Yannick Röösli

A prototype Chrome extension that improves myCampus for HSLU students, with a dashboard for total ECTS and semester progress.

All projects  ←

Context

01 – Challenge

02 – What DID I Do

03 – Learnings

Student project
Collaboration with Mike De Bastiani

myCampus doesn’t show a clear ECTS total. Students must add credits manually from “My Registrations”, which is slow and error-prone. We built a browser extension that visualises total and per-semester ECTS for clearer planning.

I worked across UI defining the dashboard layout and core components. Alongside Figma, I ran small code experiments to prototype and style key elements directly in HTML/CSS, so the design would translate cleanly into the extension.

A great first look into building a browser extension from start to finish. Working with Mike was a smooth collaboration, and our clear goal plus a well-structured Figma file kept the process focused and efficient.

Yannick Röösli

04 – Visual Design

LOOK AND FEEL

DESIGN SYSTEM

Core Elements

Clean, functional UI aligned with myCampus, showing ECTS totals, semester progress, deadlines, and quick links at a glance.

We explored light and dark modes, selected light mode to match the myCampus style, and structured components in Figma for Dev Mode.

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

05 – BUILD

DATA PARSING

SYNC ACROSS PAGES

Technical Challenges

Parsing ECTS from the “My Registrations” HTML was tricky, especially with nested semester structures and inconsistent status labels.

Because myCampus spreads data across multiple pages, we added two refresh actions to update and keep values in sync while navigating.

Yannick Röösli

06 – outcome

PROOF OF CONCEPT

TAKEAWAYS

Final prototype

After testing and iterating in VS Code, we delivered a working prototype that demonstrates the full ECTS overview and dashboard flow.

The project strengthened our understanding of how to build a Chrome extension, and improved our collaboration and workflow.

Yannick Röösli

←  All projects

Next project  →

We developed a prototype Chrome extension that enhances the myCampus experience for students at the HSLU. It provides a clear dashboard showing total ECTS credits and semester progress at a glance.

Project type

Disciplines

Collaboration with
Mike De Bastiani

  • Visual Design
  • UX / UI Design
Yannick Röösli

01 – Problem & Goal

myCampus contains the needed information, but there’s no simple overview of accumulated ECTS. Students currently have to manually add credits from “My Registrations”, which is slow and error-prone.

Yannick Röösli

02 – Dashboard Features

We designed the extension to be functional, clean, and aligned with the myCampus visual style. It surfaces key info at a glance, including total and current ECTS, a clear semester breakdown, and upcoming deadlines, plus personal details and quick links for fast navigation.

Yannick Röösli

03 – Design Process

We explored light and dark modes in Figma but opted for a light theme to match myCampus. The layout was carefully structured to enable direct implementation via Figma Dev Mode.

Yannick Röösli

04 – Technical Challenges

Building the extension was a valuable learning experience. The main challenge was parsing ECTS data from the “My Registrations” HTML, including nested semesters and inconsistent status labels. Since myCampus data is spread across multiple pages, we added two refresh buttons to keep everything synced while navigating.

Yannick Röösli

05 – Outcome

After extensive testing and iteration in VS Code, we successfully launched the extension, along with a user-friendly installation PDF. This project deepened our knowledge of JavaScript and browser extension development and served as a meaningful step in our studies and collaboration.

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