Stefan Vögeli


I am a creative technologist interested in the intersection of design and technology. I have been working as a software engineer for more than 10 years and recently completed my studies to expand my design knowledge. My passion lies in creating spatial experiences, creative coding, visuals and drawing. I can take an idea from a sketch to something that runs on real hardware and make it run reliably.


Lachen SZ, Switzerland

Selected projects

installation

A story of personified data

A walk-in teenage bedroom that plays back a girl's video diary next to the data profile the algorithm built of her


A walk-in teenage bedroom. On one side the room is a warm, cluttered bedroom from the late 2000s. On the other side it is a cold digital space of screens and cables. A video diary plays on a CRT television in the middle, and while the girl speaks, the screens next to her show the data profile that social media has built of her. The starting point was to pick up a current social debate and look at it critically. Large technology companies and their platforms are regularly criticised for weak content moderation, addictive design and the radicalisation of users. What the installation looks at is the algorithm and the community that forms around it, one that glorifies eating disorders. Visitors follow the everyday life of a young girl and her entry into that community.


My contribution

I was responsible for the digital design, the real-time graphics and the control system that runs the installation. TouchDesigner drives everything: the screens, the LED strips and the audio. I keyframed the whole 15 minute timeline, so every change in the visuals and the LEDs sits where it does because it was placed against the narration. I also curated the content of the social media feed, which shifts over the course of the story to match the interests the algorithm is feeding her.

Year
2026
Context
HSLU Practical Bachelor Project
Team
  • Felisha Leutwiler, Visual and auditory storytelling, room setup
  • Yanis Deplazes, Technical concept and hardware, room setup, video
Disciplines
  • creative coding
  • digital design
  • real-time graphics
  • spatial design
  • storytelling
Tools
  • TouchDesigner
  • NDI
  • DMX
  • ESP32
  • WLED
  • Gemini
Links
Documentation video, which teases the whole installation and we talk about the process.
Looping shot of the two screens with the LED strip beside them cycling through the colours of the emotional data stream.
Looping shot of the two screens with the LED strip beside them cycling through the colours of the emotional data stream.
A visitor in front of the digital persona screen, with the busts of the protagonist.
A visitor in front of the digital persona screen, with the busts of the protagonist.
The bed corner of the bedroom half, with the poster wall, the leaf wall lamp and the LED strip running along the ceiling.
The bed corner of the bedroom half, with the poster wall, the leaf wall lamp and the LED strip running along the ceiling.
The CRT on the desk, with the LED strip running along the desk and up the chair.
The CRT on the desk, with the LED strip running along the desk and up the chair.
web game

Trial Period

A web experience for two people who have to steer one character together and get matched


A web experience for two people, based on the film "The Lobster". Two players are matched as a couple and then have to steer one character across a map together, one controlling the horizontal axis and the other the vertical one. On the way they answer uncomfortable questions and at the end they get a percentage that says how well they match, plus an epilogue about the rest of their relationship. The visual language is deliberately restricted and cold. Two monospace typefaces, a dark red against off-white and grey, heavy black borders and hard-edged shapes with no rounding. The map is drawn the same way, flat greys with black blocks for buildings.


My contribution

I did the full technical implementation, frontend and backend, and set up the hosting. I was also the designer on the project, did the poster, and took on the process management. Web design and storytelling were shared across the three of us, and the map was drawn by Sebastian and Ardit.

Year
2024
Context
HSLU Digital Design Module
Team
  • Sebastian Borter, Storytelling, web design, map design
  • Ardit Stojkaj, Storytelling, web design, map design, documentation
Disciplines
  • creative coding
  • web design
  • interaction design
  • storytelling
  • graphic design
Tools
  • Vite
  • HTML
  • CSS
  • JavaScript
  • C#
  • ASP.NET SignalR
  • Adobe InDesign
  • GitHub Copilot
  • ChatGPT
Links
Project video showing a side by side view of how the game is played.
A ranking challenge. Physical appearance, sense of humor and intelligence, dragged into order of importance for a partner.
A ranking challenge. Physical appearance, sense of humor and intelligence, dragged into order of importance for a partner.
A rating challenge. A still from the film with a one to ten slider under it, asking the player to rate their level of discomfort.
A rating challenge. A still from the film with a one to ten slider under it, asking the player to rate their level of discomfort.
The project poster. Inspired by the film poster, showing the match results of our game.
The project poster. Inspired by the film poster, showing the match results of our game.
The map which you navigate in the game.
The map which you navigate in the game.
virtual production

Virtual Production at SRF

Building a working virtual production setup for broadcast on a small budget


An internship at SRF spent building a virtual production setup that actually works on a small budget. Virtual sets built in Unreal Engine, camera tracking calibrated to the millimetre, and tests run first against a greenscreen and then in a studio against two projector walls, to prove that the technique is usable without an LED volume. Virtual production had not really arrived at SRF. A small team was putting together a test setup with a small budget and I joined that. The work laid the groundwork so that concrete use cases can be developed and virtual production can become a fixed part of a modern SRF studio.


My contribution

I taught myself Unreal Engine with a focus on virtual production, then built the sets, set up and calibrated the tracking, and ran the tests. Most of the tests we ran in pairs.

Year
2025
Context
HSLU internship at SRF as part of studies
Team
  • Christian Stoffel, Technical work on the virtual production setup
  • Christoph Flüeler, Conceptual level, pushing the topic at SRF
Disciplines
  • real-time graphics
  • 3d
  • virtual production
  • broadcast technology
Tools
  • Unreal Engine 5
  • Blender
  • Vive Mars Camtrack
  • Meta Quest
Test setup for a virtual production setup with dynamic lighting.
Test setup for a virtual production setup with dynamic lighting.
While filming test shots.
While filming test shots.
Setup for another test shot, inspired by an existing studio setup.
Setup for another test shot, inspired by an existing studio setup.
Test stage using fast moving niagara effects in the background.
Test stage using fast moving niagara effects in the background.
Shot showing the test setup and the studio.
Shot showing the test setup and the studio.
creative coding

Wheel Wave

A scrollytelling page about my skateboard


A page about the skateboard I use to get around, told by scrolling. The board is drawn entirely in HTML and CSS, and scrolling rides it down a pavement through five short statements about what it is like to own it, ending in the lake it once fell into.

Year
2024
Context
HSLU Kickstart Webdevelopment Module
Disciplines
  • creative coding
  • web design
  • motion
  • storytelling
Tools
  • HTML
  • CSS
  • JavaScript
Links
A video showing the whole scrollytelling flow from start to finish.
digital publication

Welkom en NL - A story on Dutch design by Studio Dumbar

A digital publication about Studio Dumbar's identity work for Dutch public institutions


A digital publication about Studio Dumbar, built as a Figma prototype for a tablet. It covers their identity work for Dutch public institutions, and instead of a menu you navigate by clicking the things themselves. Click the police car and it drives into frame, then dissolves into the page. Click the train and it pulls you into the railways chapter. The publication shows Studio Dumbar's strategy when creating a visual identity, highlights the main elements, shows how each identity is applied across different media, and where they have worked on a brand more than once, shows how the design evolved.

Year
2023
Context
HSLU Visual Design Module
Disciplines
  • editorial design
  • graphic design
  • interaction design
  • illustration
Tools
  • Figma
Full run through the prototype. Shows all transitions.
The start page of the design for dutch police, fire departement and ambulance.
The start page of the design for dutch police, fire departement and ambulance.
The section which covers the design for dutch railways where you drive through a landscape.
The section which covers the design for dutch railways where you drive through a landscape.
A hand holding a phone with the most recent PostNL identity, and a laptop screen showing the refreshed identity and its new elements.
A hand holding a phone with the most recent PostNL identity, and a laptop screen showing the refreshed identity and its new elements.
Introduction to NPO and the goal of the identity design.
Introduction to NPO and the goal of the identity design.
web

The Undertone Collective

A fictional music review collective where 18 invented critics each read your song lyrics their own way


A web application that takes a song and hands it to a fictional music critic to read. You log in with Spotify, pick a track, pick one of eighteen invented critics, and get their commentary on selected lines of the lyrics, written in that critic's voice. The starting question was whether song lyrics can be analysed with a large language model, what stories that analysis can tell, and how to present it to a reader.


My contribution

I led the development of the idea, did the UI design, and wrote a large part of the frontend.

Year
2024
Context
HSLU Studio Web & Mobile 1 Module
Team
  • Yanis Deplazes, Development
  • Marco Burkhardt, Development
  • Dominika Degtyareva, UI Design
Disciplines
  • ui design
  • design systems
  • frontend development
  • interaction design
Tools
  • Figma
  • Nuxt
  • Vue
  • Node.js
  • Express
  • Gemini
Links
Screenrecording of the web application showing it in interaction with the Spotify API, Genius web scraping and Gemini API.
Mockup of the start page on desktop and mobile
Mockup of the start page on desktop and mobile

Further projects

7 projects

Collections

Symmetry drawings

Invented creatures drawn on a mirror axis


An ongoing series of digital drawings, each one a symmetric creature or face. Drawn digitally and further edited using TouchDesigner and Affinity. The drawings don't follow a concept and are rather a continuous practice of going with the flow and evolving my personal drawing style.

Year
2020-today
Context
personal
Disciplines
  • illustration
  • graphic design
Tools
  • Affinity
  • TouchDesigner
Aneth
Aneth
Eboade
Eboade
Ocibru
Ocibru
Roorek
Roorek
Aigomi
Aigomi
Chubuss
Chubuss
Cluza
Cluza
Geensta
Geensta
Phiras
Phiras
Prosic
Prosic
Skido
Skido
Imusca
Imusca
Isona
Isona
Krata
Krata
Puye
Puye
Tainka
Tainka
Erutu
Erutu
A horned fantasy creature
Flanau A horned fantasy creature
Kizi
Kizi
Islahu
Islahu

Visuals

Real-time motion graphics


A collection of visuals created with TouchDesigner using procedural animation, point clouds, music synchronization and various image processing techniques.

Year
2023-today
Context
personal
Disciplines
  • motion design
  • graphic design
Tools
  • TouchDesigner
  • TIXL
Eye grid Procedurally generated eyes arranged as a grid which can display patterns.
Industrial techno room Mask based off of one of my digital drawing, put in a club inspired room and synced to music.
Pattern play Composition of simple shapes with procedural animation
Looking eye Procedurally generated eyes with procedural animation
Orchid attractor 3D scan of an orchid with procedural attractor animation
Mask visuals synced to audio Mask based off of one of my digital drawings, animated in different scenes and synced to music.
Point blending Blending multiple layers of points mimicing disco lighting

Creative coding

p5.js sketches


An ongoing set of p5.js sketches written in TypeScript.

Year
2024-today
Context
personal
Disciplines
  • creative coding
  • generative graphics
Tools
  • p5.js
  • TypeScript
  • Vite
Links
Blades
Sin Cos Subtractive Color
Neon Stick

Work & Education

Education

HSLU

Bachelor Digital Ideation @ HSLU

2023-2026
Bachelor of Arts Hochschule Luzern in Visual Communication with Specialisation in Digital Ideation

Employment

SRF

Software Engineer @ SRF

2021-today
SRF Schweizer Radio und Fernsehen

I have been a software engineer at SRF since April 2021. I build internal tools for broadcast production: web applications, services and APIs in the .NET stack. I take them from the first conversation with the department that will use them through to running them in production.

Responsibilities
  • — Planning, leading and building internal projects on my own
  • — Requirements engineering and solution concepts with the departments that use the tools
  • — Web applications, Windows services and APIs
  • — Running and maintaining existing systems
Stack
  • C#
  • .NET
  • .NET Core
  • MVC
  • SQL Server
  • TypeScript
  • HTML
  • CSS
Zühlke

Professional DevOps Engineer @ Zühlke

2017-2021
Zühlke Engineering AG

Four years at Zühlke as a DevOps engineer, working on several client projects. On most of them I was the system owner or the deputy, which included gathering requirements, building in frontend, backend and database, maintaining the CI/CD setup, shipping releases, and handling incidents and change requests with the client directly.

Projects
  • — Traffic monitoring application, deputy system owner
  • — Global flight integration and handling web portal, system owner in a distributed team, I led the handover to a new service provider
  • — Mobile application for vending machine technicians, deputy system owner
  • — Web application for checking service bookings, frontend development
  • — Building permit administration application, deputy system owner
  • — Building permit integration platform, deputy system owner
  • — Managed hosting of the Atlassian tools, Jira, Bitbucket and Confluence
Stack
  • C#
  • .NET
  • .NET Core
  • MVC
  • SQL Server
  • TypeScript
  • HTML
  • CSS