KMD Elements. Making design part of how the team delivered.

A national infrastructure project under real time pressure, where design could easily end up as an afterthought. I was one of four designers embedded in a large team that moved fast.

My roleUX Designer, one of four designers
Team100 developers and 18 product owners
ClientVISUE, network companies with 1.78 million connection points
Time1 year
4 designersfor 100 developers and 18 product owners
100+components documented in one tree, in Danish
3 roundsof the date-time picker, tested with real users
01

The problem: a component library nobody used as intended

KMD built Elements for a consortium of Danish energy infrastructure providers, with high government focus. The library behind it was rarely used as intended, didn't fit real needs and had no clear owner.

Before · 2020The old Elements interface
After · editing a connection pointDetails on the left, the command log on the right
SituationResult
Rarely used as intended→Slower development and design
Not fit for real-world needs→Weaker general usability
Inconsistencies across the library→Uneven implementation quality
No clear owner→Harder to keep UX and UI consistent
Design not yet part of planning→Bottlenecks for delivery
Both return on investment and end-user adoption were at risk.
02

My part: the bridge between the client and the design team

Four designers, each on our own flows. As the only Danish-speaking designer, I bridged the client and a multinational design team. My focus was the edit flows and the date-time picker, shaped with the other designers and the product owners. I documented components where people worked: Storybook for interaction, the wiki for behaviour.

AssessUnderstand the current state

Desk research and interviews with product owners and architects.

Define and designWiden the audience

From designers only to the whole organisation. Documentation standardised across components and people.

ExecuteDocument where people work

Interaction in Storybook, behaviour and implementation in a wiki, translated into Danish.

Hand overLess dependence on design

Walkthroughs with developers and product owners, and guidance on extending components.

Mapping the flows on the whiteboard
The component wiki: 100+ components in one tree
03

The work: patterns that hold across every flow

The edit flows look simple, but they carry conditional logic, locked data and versions. Every entity follows the same steps: details, application period, preview. I annotated each one, so developers could see the behaviour, not just the layout.

Editing a technical metering point: the flow with designer comments for developers
Conditional branchingInline validationGlobal error summaryStep-based navigationRequired fieldsCode + label formatRead-only vs editableSearchable dropdownsInfo vs error bannersModal hierarchyDesigner comments
Relations step: changes apply to the whole entity, and the banner says so
Installed meter. Details on the left, the command log as a timeline on the right.
Meter frame. Synced fields are locked and say so, so nobody edits what the system will overwrite.
The edit flows. Every entity follows the same steps: details, application period, preview.
04

The one sharp proof: relative time you can read

Settlement needs dates that recalculate, like "9:30 on the 2nd work day, 5 months after the start of the previous year". No standard picker can express that.

I treated the component as a grammar, not a picker. Each step is a short, constrained sentence, and steps chain. Try it.

Relative date / time definition
Try
    Reads as

    Result

    A working rebuild for this portfolio, from my designs and the component sheet. Simplified: work days skip weekends, not public holidays.

    The picker in context: creating a job
    Constructing the definition elements, and components for the test prototype
    The picker in the component wiki
    05

    How I measured this

    There are no outcome numbers for this case. The numbers above show scale and effort, and here is what each part rests on.

    The picker

    Three rounds with real users

    Tested on scenarios from actual settlement work. Users lost track of what a chained definition would compute. The fix was a live summary that reads the definition back in plain language.

    The delivery

    What I saw, not what we measured

    Scoping got more structured, and delivery faster and more predictable. Tight timelines left little room for classic research, so decisions rested on heuristics and product owners as domain proxies.

    06

    Looking back: shipping now and building to last pull against each other

    The date-time picker became the working example for the wider design system overhaul. Next time I'd bring real users in earlier, so fewer decisions rest on proxies.

    Screens show sample data. IDs are blurred.