Prototypes

Railmonitor — a B2B SaaS platform for railway track monitoring through physical sensor data — needed to explore design possibilities for a completely new product generation.

In just a matter of weeks, I created a comprehensive, realistic concept prototype using AI-assisted design and frontend coding — leveraging my hands-on UX and code experience to use AI efficiently.

Through workshops and user testing, the concept showed great potential, providing a promising path ahead for the platform's next generation and serving as a powerful alignment and communication tool for stakeholders.

This small project has been a revelation in using AI as a powerful co-designer — in this case, the AI “vibe coding” platform Henosia. Building a simple shopping list app is a classic design exercise, and it turned out to be a great training ground for experimenting with AI-assisted co(ding)-design.
I’ve always missed a few features in my go-to shopping list app, Google Keep — especially the ability to search through all previously added items and quickly re-add them. Another missing piece is a fixed input field for adding new items, rather than having to scroll to find the next empty slot.
Through my prompts, the AI suggested implementations I could test right away. From there, I was able to iterate rapidly in tandem with the AI, making for a truly powerful, efficient, and satisfying design process — despite the occasional hiccup along the way.

I have a passion for bicycles, and I spend quite some time contemplating what gearing I should have on my bikes. While there are definitely existing, useful tools for comparing derailleur gear drivetrains, none I could find were as mobile- and user-friendly as I'd like – even including native mobile apps. So I decided to design and code my own from scratch. The goal was a straightforward, to-the-point little web app which is nice to use on a phone – with a target audience of bike geeks like myself. To build it, I used Bootstrap 5 and the small, powerful Alpine.js library.

As part of this blog post I proposed a redesign for a rather standard publicly available employee directory for finding contact info of specific individuals. The original design featured three independent dropdowns for filtering on employee by different attributes. In the blog post I discuss why the design has an inefficient interaction flow and I explore how the design can be improved by reorganizing and changing UI widgets. I created this interactive, responsive prototype using Vue.js JavaScript framework to illustrate my points.

This fully functional responsive prototype helps employees at KMD headquarters find their way to conference rooms – as an 'MVP' alternative to separate PDF ground plans buried deep inside the intranet. It's a collaboration between myself and a few UX colleagues of mine, in particular Jakob V. Christoffersen who had the original idea and contributed some of the maps and general input throughout the process. I programmed the prototype in HTML/CSS/JS and elaborated on the idea and added features such as search and deep-linking to individual conference rooms for easy sharing.

Building upon the general idea and prototype work of a UX colleague of mine, I extended his work and created this prototype for locating conference/meeting rooms in my office building.
The maps are created as SVGs in Affinity Designer and the 'web app' is created using the Zurb Foundation frontend framework and Panini flat file compiler.

When working within UX, there are a lot of tools, methods, pattern libraries and stuff to keep track of. The existing resource repositories didn't provide a to-the-point listing of resources, so I decided to create my own.
It is organized with a few general categories and a tag system. Users can suggest edits and additions via a simple FormSpree.io integration.

The original schedule of this music festival was good-looking yet somewhat cumbersome to navigate and get an overview of. So, in as an unsolicited exercise, how could the design be improved in terms of at-a-glance information and efficient navigation – especially on mobile.

The original version of this music festival schedule sported an inefficient dropdown navigation and 'dead ends' at the bottom of pages. Thus, I've tried to make a new version improving on those shortcomings.

Playing around with a bicycle manufacturer´s website, I crafted an unsolicited HTML prototype with improved information architecture and navigation design compared to the original design.