Case study · Web app

Crewspace

The people register for your company — every member, role, and permission, written down and auditable.

Role
Design & Development
Stack
Next.js · TypeScript · Custom design system
Year
2026
Crewspace — Directory UI screenshot
Selected screens

The interface, up close.

Crewspace — Directory UI screenshot
Directory
Crewspace — Overview UI screenshot
Overview
Crewspace — Member detail UI screenshot
Member detail
Crewspace — Roles UI screenshot
Roles
Crewspace — Role detail UI screenshot
Role detail
Crewspace — Teams UI screenshot
Teams
Crewspace — Team detail UI screenshot
Team detail
Crewspace — Invitations UI screenshot
Invitations
Crewspace — Audit log UI screenshot
Audit log
Crewspace — Plan & billing UI screenshot
Plan & billing
Overview

Who can do what — written down, in the open.

Crewspace is the administrative register for a small company: the single, authoritative record of its people and what each of them is allowed to do. Every member has a register entry, every role is spelled out permission by permission, and every change is on the record — so “who gave them access?” is a question with an answer, not an investigation.

Owners and admins run the whole lifecycle from one directory: invite people by email or bulk CSV import, place them on teams, and assign roles from an 18-permission matrix — or craft custom roles in an editor that shows the effect of every change before it is saved, with a review step before anything commits. When someone leaves, deactivation is one action and the trail remains. The audit log records privileged actions as they happen, and an offline mode keeps the directory readable when the connection drops — honest about whose information is current, and as of when.

This build is the complete Crewspace experience, designed and built end to end: the marketing site, sign-up and invitation flows, the directory, member profiles, roles and the permission editor, teams, invitations, per-seat billing, and the audit register — 26 screens in a deliberately formal “public register” design language of cool grey, white sheets, and black type, with a single seal blue reserved for the moments something is allowed.

  • People register — every member’s role, team, and status on one authoritative record
  • Roles & permissions — an 18-permission matrix, custom roles, and a review-before-commit editor
  • Teams — the company’s structure and placements at a glance
  • Invitation lifecycle — email invites and CSV bulk import, with expiry and resend handled
  • Audit register — privileged actions recorded as they happen, filterable after the fact
  • Offline directory — the register stays readable without a connection, honest about its freshness
Under the hood

Engineered like a product, not a demo.

Next.js App Router TypeScript Custom CSS design system Fixture-driven data layer Vitest Vercel

26

screens — the full product surface, from the marketing page to the audit register, built from approved designs and verified against them screen by screen.

Next case
Dealflow
All work 6