Johan Raes johan@johanraes.be

Product design, from
research to release.

For complex organisations, and for my own projects:

A Fluo session: a highlighted quote in the transcript, and answers that cite it.

Fluo.

Product design | macOS

2026

A macOS app for interview research. Highlight the quotes that matter, and use them as the sources for your analysis.

View case
The Side B map of Berlin, with record stores pinned across the city.

Side B.

Product design | iOS

2026

Find your next favourite record store with this iOS app.

View case
Infrabel design system: button states.

Infrabel

UX/UI design

2019, 2024

A design system that started in one small project and ended up across all of Infrabel's tools.

View case
ArcelorMittal: the order screen with its production flow.

ArcelorMittal

UX lead

2020–2021

One production-planning application for European plants that each ran their own. I led the UX team and set up a shared design language across the plants.

CPH Banque: the chatbot onboarding screen.

CPH Banque

UX/UI design

2018 – 2019

A banking app for iOS and Android. App Store rating from 2.3 to 4.7.

View case

Also worked with

  • KBC
  • Microsoft
  • Proximus
  • Telenet
  • NMBS
  • Belfius
  • TVH
  • Niko
  • iO
  • Hudson

Shipped.

Scoped, designed, built.

Pebble iOS, watchOS

Pin it. Forget it. Find it.

App Store

Album of the Day iOS

One record, every day.

App Store

Luno Web

Scattered user feedback, gathered in one place.

getluno.app

Side B iOS

Record stores worth the trip, on a map.

sideb.cc

Markdown macOS

Markdown viewer with one-click export to Word and PDF.

Mac App Store

Fluo macOS | in review

Interview transcription and AI chat over your research.

fluoresearch.com

james macOS | coming soon

Menu-bar launcher for local dev servers.

jamesknows.app

The messier the problem,
the more interested I get.

Sometimes that means designing a new product. Sometimes it means untangling workflows, aligning teams, or finding patterns hidden in hundreds of customer conversations. The output might be a prototype, a design system, or production-ready software. The goal is always the same: turning ambiguity into something people can build on.

Over the past 20+ years, I've worked with startups, scale-ups, and large organizations across a wide range of industries. While the contexts differ, the underlying challenge is usually the same: too much complexity, too many assumptions, and not enough shared understanding. Often the answer is one design language that many teams, brands or sites can share.

My work combines product design, research, and systems thinking, with accessibility built in from the start. I enjoy moving between strategy and execution, from facilitating discovery workshops and mapping end-to-end experiences to designing interfaces and working closely with engineers to ship them. I've led a UX team and coached designers along the way. I don't see any of this as separate disciplines, just different tools for solving the same problem.

I also build products of my own. Taking software from idea to launch keeps me close to what building really costs.

Outside of design you'll find me digging through record stores, on my bike, or hosting my weekly radio show.

Get in touch.

← Work

Side B.

A map of record stores worth the trip, designed for iOS in light and dark.

Product design
iOS, web
2025 –
sideb.cc

Side B finds record stores worth the trip. The iOS app is one screen: a map that fills the display, a search field fixed at the bottom, a row of stores above it and genre filters above that. No drawer, no detents.

Every state is decided, from an empty search to a city with no matches. Below: the map in light and dark, the full flow, what was dropped and why, and how it holds at the largest text size.

01

The map

One map style, two themes. The map stays quiet so the pins and the stores carry the colour.

The map in lightThe map in dark
Pin and cluster scale: single pin, favourite, clusters of 2–9, 10–49 and 50+, selected states
02

The flow

Every state in one flow, from rest to a city with no matches. Scroll sideways to follow it.

The full flow from rest to a city with no matches
03

Dropped and replaced

A line explaining why a store fits you was cut twice: the data behind it does not exist yet, and a match would promise something before it is true. Search with the keyboard took its place.

Two rejected versions of the store row and the search state that replaced them
04

Everything scales

Standard text size next to the largest accessibility size. Nothing truncates, nothing overlaps.

Standard text sizeLargest accessibility text size
05

A store

The detail sheet, before and after you save it.

A store, not savedA store, saved
06

Before the look settled

Four early directions on the same screens: warm, editorial, crate and cartographic. None of them shipped.

WarmEditorialCrateCartographic
← Work

Infrabel.

An internal webshop where railway staff order devices and services, and the design system it started.

UX/UI design
Internal platform
[?] years

[?] Ordering a laptop, software or access used to run through separate forms and mailboxes. The Service Catalog puts it in one place: browse, order for yourself or a colleague, approve, and follow every item until it arrives.

I designed the MVP: wireframes, prototype, UI and a first version of the design system. An agency later used that system as the base for Infrabel's other internal applications.

The catalogue

Search, quick starts, what waits for your approval and what you already own, on one page.

Service Catalog homepage

Orders and approvals

Every item carries its own approver and status, so one blocked item doesn't hold up the rest of the order.

My orders with per-item approval status

Track and trace

Where an order stands, next to what still waits for you to approve.

Track and trace panel and approval panel

The basket

Order for yourself and a colleague in one go. Limits show at the field, before you send.

Basket with an order for a colleague and an inline quantity error

Components

Text input, stepper, dropdown and text area, each in default, hover, focus, validated, error and disabled.

Form components in all states