← back to desktop
Code Runners — details
Code Runners cover
role UI/UX Designer
year 2024
tools Figma, Photoshop, Illustrator
[ view live ]

Overview

Code Runners is a workshop-booking experience created around an unusual combination: programming and freerunning.

The workshop invites programmers and gamers to step away from their screens and take on a physical urban challenge, combining movement with small problem-solving and coding-inspired tasks.

The goal was not simply to design a booking form, but to make the booking process feel like the beginning of the experience itself.

Code Runners booking experience

The concept

The original workshop brief focused on freerunning, adrenaline and exploring the city of Kortrijk.

I reinterpreted it for a tech-oriented audience through the idea of Code Runners — participants moving through the city while combining physical challenges with the mindset of problem solving.

The booking flow adapts the workshop to the user by collecting information such as:

  • number of participants
  • preferred date and duration
  • fitness and experience level
  • occasion
  • food and drink extras
  • personal information

Each decision becomes part of one continuous interactive journey rather than a conventional checkout form.

Finding the visual direction

The concept went through several visual directions before reaching the final result.

My early exploration was heavily influenced by gaming and Mirror’s Edge. After feedback, I moved away from that direction and began exploring Bauhaus graphics, urban architecture and editorial collage.

Code Runners styleboard

The final system combines black-and-white archival imagery with orange accents, geometric lines and monospace typography inspired by programming interfaces.

This gave the project a visual language that connects technology, architecture and movement without relying too heavily on gaming references.

Booking as interaction

A key part of the brief was continuous feedback during the booking process.

I introduced a vertical progress indicator that moves with the user through each stage, making it clear where they are and how much of the experience remains.

Code Runners booking flow

Inputs are integrated directly into the visual composition — from participant selection and skill levels to occasions and extras — so the interface feels less like filling in a form and more like configuring your own workshop.

Code Runners booking configuration

Pricing and selections remain visible throughout the flow, keeping the experience playful without sacrificing clarity.

Visual system

The interface uses a deliberately limited palette of orange, black, white and grey, allowing photography and typography to carry most of the personality.

I combined:

  • architectural photography
  • archival computer imagery
  • collage
  • geometric line work
  • programming-inspired typography
  • minimal UI controls
Code Runners UI detail

Reducing the amount of color compared with my earlier concepts helped the final design feel more focused while keeping its urban energy.

Outcome

Code Runners turned a functional booking task into an extension of the workshop itself.

The project taught me how much concept, visual identity and interaction design need to support the same experience — and how simplifying an early idea can often make the final direction much stronger.

Instead of designing a form around the workshop, I designed the booking journey to already make the user feel like they were entering the world of Code Runners.