Unifying Design and Engineering

Role: Product Designer & Frontend Engineer
Focus period: 2022–2025 (3 years)
Outcome: Design system and frontend infrastructure adopted across organization

Overview

A 3-year effort to remove handoffs and deliver a single system for internal operations products in Intelligy Solutions — Stockholm Exergi's energy analytics platform.

I joined Stockholm Exergi in 2018 as a UX/UI designer. By 2022, the platform had grown into multiple products with inconsistent UI and duplicated effort. The unification work below is what I led over the final three years.

What made the unification work different: our frontend team owned both product design and engineering. No handoffs between disciplines, no translation loss. The design system we built lives in code — components are the spec.

The Challenge

The platform had grown organically. Multiple products, independent codebases, inconsistent experiences.

• Fragmented UI — same functions looked different across products
• Duplicated effort — teams rebuilt similar components repeatedly
• Design-dev gap — Figma designs interpreted independently by each developer
• Slow iteration — no shared patterns meant starting from scratch
• Technical debt — legacy Django stack made frontend changes painful

This wasn't a design problem or an engineering problem. It was both.

The Unification (2022–2025)

My scope shifted from product delivery to platform-wide systems and enablement.

The Work

The unification work focused on internal applications used by operations teams. I worked directly with internal stakeholders and field users to standardize workflows, establish a shared language, and make complex energy data actionable across products.

Core design challenge: Internal users needed to make decisions quickly. The system had to surface the right context without forcing people to interpret raw data.

Principles that guided both design and engineering:

• Progressive disclosure — summary first, details on demand
• Contextual comparison — data means nothing without reference
• Action-oriented — every insight connects to something users can do
• Clear installation flows — one way to complete installations end-to-end
• Consistent naming — shared language across products and field workflows

Systems Built

Built the foundation that made consistency and speed possible across internal products — not just shared UI, but shared behavior.

Design System (STEXUI)
A comprehensive component and theming system built with React, TypeScript, Radix UI primitives, Tailwind CSS, and CVA for type-safe variants. It standardized how measurements are formatted, how loading states are rendered, and how optimistic updates behave — so the experience felt consistent everywhere.

Complex components built for real needs: data tables with TanStack integration, Mapbox-powered property maps, date range pickers with custom intervals, a Chart.js-based analytics module for custom datasets, and a composable sidebar system.

Type-Safe API Infrastructure
Connected 8+ microservices with generated TypeScript clients. OpenAPI Spec → Generated SDK → TanStack Query Hooks → UI. API integration bugs went from a recurring problem to essentially zero.Read more: Contract-First APIs at Stockholm Exergi.

Shared Infrastructure
Shared utilities for formatting, localization, and common data patterns. Reusable hooks and table tooling. A consistent frontend architecture made it easy to spin up new apps and keep behavior aligned across codebases. A shared monorepo and tooling standards kept packages, configs, and updates centralized.

Why This Worked

Owning both design and engineering removed handoffs and kept decisions consistent from UX intent through implementation. That reduced rework and made new patterns usable across teams.

Results

Adoption: Unified design language across internal products — 4 migrated to the new stack, 5 in pipeline at handover.

Velocity: New features shipped ~3x faster once teams adopted the shared component library and API tooling.

Quality: Hard-to-trace bugs became same-day fixes after implementing type-safe API clients with Zod validation on all endpoints.

Onboarding: Developer ramp-up dropped from weeks to days — same stack, same patterns across all products.

Reusability: New applications inherited the full component library from day one — no rebuilding common patterns.

Learnings

The gap between design and engineering is where quality dies.
Every handoff is lossy compression. Owning both sides eliminates the translation layer where details get lost.

Design systems are governance problems, not component problems.
Building a button is easy. Getting eight teams to use the same button — and keep using it — is the real work.

Technical Summary

Stack: React 18, TypeScript, TanStack Query, TanStack Router, Radix UI, Tailwind CSS, OpenAPI, Zod, Figma, Vite, npm workspaces

Scope: Internal operations products with a shared design system and frontend architecture

See some of the patterns in action in the JOSUI design system monorepo case study and in josui — my open source design system inspired by some of the same principles.