Real-Time Collaboration UI
Product design and frontend build for a collaborative workspace tool — from zero to a functioning product used by 3,000 teams.
Starting Point
The client had an engineering team, a list of features, and no design system. They had been building in Figma ad-hoc for two years. The product worked but felt assembled rather than designed.
They needed two things simultaneously: a design system they could build into going forward, and a redesigned core product they could ship within a quarter. The typical advice is to do these sequentially. We did them in parallel.
The Design System First Approach
The usual mistake in this situation is to design the product first and extract the system after. This produces a system that is a documentation exercise — not a building tool.
Instead: I spent the first two weeks establishing the atomic layer only. Type scale. Spacing scale. Colour tokens. Elevation model. Four component primitives: Button, Input, Surface, Icon. Nothing else.
With those four primitives, we built the first product screens. Every design decision above the atomic layer was constrained to use what existed. When a new pattern emerged three times, it became a component. Never before.
Real-Time Complexity
The collaboration features introduced interface states that standard design systems don't address well: multiple cursors, simultaneous edits, presence indicators, conflict resolution UI. These required a new vocabulary — presence components that live alongside content rather than replacing it.
The presence system used a dot-notation visual language: each collaborator is a coloured circle with initials. The circles cluster near the content they are editing, with gentle physics that prevents overlap. The implementation used React Spring for the physics and WebSocket state for the positions.
Outcome
The redesigned product launched seven months after engagement start. 3,000 teams onboarded in the first three months. Churn in the quarter following launch dropped 22%. The design system has been maintained internally by their team since handoff, with quarterly additions documented in a Notion workspace I set up as part of the process.