04 / 06 · Simjo

Simjo - A construction PM tool, rebuilt around the three pillars that matter on site.

SaaS · Construction Design system PLG fundamentals App + website
Client
Simjo
Role
Lead UX Designer
Freelance, full hand-off
Period
~6 months
2025
Output
App + design system + website
A → Z redesign
Simjo dashboard - Goedemorgen Martijn overview
01 · Context

Construction PMs have software older than half their team. Simjo wanted to change that.

The Dutch construction sector runs on tools built in the early 2000s. They work. They're stable. They also can't connect the three things every project manager actually juggles in their head: scope, time and money. When one changes, the others should respond. In legacy tools, they don't.

Simjo's founders had decades in the industry. They knew the shape of the gap. A first concept was built outside, with a different team. After a year of using it themselves, the verdict was unanimous: the technical foundation didn't hold, and the UX was a chaos. They decided to redesign and rebuild.

A first designer was brought in to make the initial direction. When she moved on, I picked up where she left off - with a clear remit: bring it home. Build out the design system on Material 3, finish every screen of the app, and design the new marketing site to match.

02 · The brief

Three pillars. One connected app.

Everything in Simjo - every screen, every table, every report - hangs off three concepts. The product's job is to keep them in sync, so a change in one is visible in the other two before it becomes a problem on site.

S

Pillar 01Scope

Work breakdown, structures, deliverables. The WBS table is the spine of the app - every other view rolls up from here.

T

Pillar 02Tijd

Schedules, durations, dependencies. Gantt views, milestones, baselines. Time is shown both as plan and as actual, always.

Pillar 03Geld

Money flows - in and out. Budgets, expenditure, geldstromen overview. Tied to scope items so cost lives where the work lives.

03 · Approach

Finish the foundation. Then draw fast.

Six months is a tight window for a full app + design system + website. I split it into four runs and committed to one happy path per pillar before exploring edges.

Block 01

Design system
on Material 3

Picked up the existing direction and built out tokens, components, typography. Standardised on Material 3 patterns.

Block 02

Information
architecture

Sitemap with pages, actions and wizards. Eight project sections - Overzicht, Scope, Tijd, Uitgaven, Geld, Snapshots, Rapportages, Meer.

Block 03

Screens, end
to end

Dashboard, WBS structures, Gantt views, geldstromen. Empty states, side panels, right-click context menus.

Block 04

Marketing
site

New site to match the app. Same design system, same brand. Hand-off package for the build team.

04 · IA

Pages, actions, wizards - three primitives.

Every part of the app is a page, an action or a wizard. Three primitives, used consistently, kept the IA legible at any zoom level.

Portfolio Projecten Project detail
Pages
Overzicht Scope Tijd Uitgaven Geld Snapshots Rapportages
Actions
+ Activiteit toevoegen Snapshot maken Geldstroom boeken Rapport exporteren
Wizards
Nieuw project › WBS importeren › Begroting opstellen › Baseline opslaan ›
05 · The screens

What I drew, in production.

A walkthrough of the core surfaces - Projecten overview, Project dashboard (Overzicht), the WBS Scope view, Tijd as a Gantt, and Geld as a connected cost overview. Real exports from the working application.

Projects overview list
01
Projects · the entry pointActive and archived projects, each row showing budget, result, end date, owner.
Project dashboard
02
Dashboard · the project at a glanceBudget, schatting and resultaat side by side, baseline deltas, upcoming milestones, running activities.
Scope WBS view
03
Scope · the WBS structureHoofdstructuur at the top, nested Programmafase children, inline edit on a subitem.
Tijd Gantt view
04
Tijd · Gantt per kwartaalSame WBS rows as Scope, now on a timeline. Dependency arrows, milestone diamonds.
Geld cost overview
05
Geld · cost chart + the matrixThe chart on top, the matrix below: budget, gemaakte kosten, openstaand, verwacht, prognose, resultaat - per WBS line.
Per-row context menu
06
Per-row context menuEvery row exposes Bewerken / Verwijderen via the kebab.
Empty project state
07
First-day empty stateA pre-seeded demo project and the persistent Start met Simjo progress pill.
06 · Onboarding

A first-week experience designed like a real PLG funnel.

Construction PMs are not signing up at 11pm and exploring the product alone. But the same PLG fundamentals still apply - qualify, demo, activate, retain. Click through the actual flow below.

1 / 9 Registration · Maak jouw Simjo account
Step 1 - Registration Step 2 - About you Step 3 - Team size Step 4 - Goal Step 5 - Invite team Step 6 - Progress pill Step 7 - Welcome dialog Step 8 - Feature tour Step 9 - Release note Click to advance →
07 · Beneath the surface

First-time users and power users - on the same screen.

Construction PMs run the gamut from "first day on the tool" to "I've been doing this for thirty years." The interface had to read clearly for both.

For first-time users

Empty states with intent.

Every section starts with an empty-state that tells the user what this view is for and what the first action should be.

For power users

Right-click everywhere.

Every WBS row, every activity exposes a context menu with the most-used actions and keyboard shortcuts.

For everyone

Side panels for detail.

Click any row to slide a detail panel in from the right - context, dates, money, files. Stays open while you work the table.

For first-time users

Wizards for the heavy lifts.

New project, new WBS, new baseline - the moves that have ten fields and three decisions sit behind a four-step wizard.

For power users

Bulk select & edit.

Shift-click to select a range. Action bar appears at the bottom with bulk operations: move, reassign, set dates, delete.

For everyone

Density toggles.

Three view modes per table: comfortable, default, compact. Same data, different breathing room.

08 · Design system

Built on Material 3, made for Simjo.

The previous designer had set Material 3 as the foundation. I extended it: tokens, components, naming, variants.

M3
Material Design 3 foundation
Tokens for type, colour, elevation, motion. Component variants generated through Figma's variant system.
8
Project section primitives
Overzicht, Scope, Tijd, Uitgaven, Geld, Snapshots, Rapportages, Meer.
3
IA building blocks
Pages, actions, wizards. Used everywhere. Anything new in the product fits one of the three.
5
Button variants documented
Filled, tonal, outlined, text, plus icon-leading variants. State table for every one.
09 · Reflection

What I'd tell you as a client.

This is the only one I took all the way.

Six months. Start with a design system already in motion. End with a complete app design, a hand-off package and a marketing site that matches. Simjo went into build the moment I stepped off, and the team kept moving without losing pace.

What I'm proud of: that the three pillars - scope, tijd, geld - actually feel connected in the app. A change in scope shows up in tijd. A change in tijd shows up in geld. The product reads like one product, not three modules sharing a logo.

What I'd do differently: invest one more week in the empty states, up front. The first-time user experience is where a SaaS lives or dies, and we kept polishing those right up to the deadline.

Up next · Case 05 of 06

TAGGRS.