OVERVIEW
Industry
Team
30+
PHASES
Discovery, Research, Ideate, Validate, Delivery
Duration
1 year
CONTEXT
The tool started as an Excel-based system used by a small group of experts. It could calculate materials, labour, equipment hire, project costs, schedules and final reports, but it was difficult for new people to understand without long onboarding. It also did not look like a product that could be easily shown, sold or used by wider teams.
MY ROLE
I worked as a UI designer in a product design team led by an experienced design director.
I supported early discovery and vision work, helped prepare interactive prototypes for testing, and later designed the full UI for the web platform, including key screens, states, reusable patterns and handoff materials.
CHALLENGE
01 /
The brand existed, but the product UI did not. The style guide showed how the brand should look in marketing and reports, but it did not answer product questions: how pages should be built, how tables and forms should work, and how the same visual language should scale across calculators, editors, reports, etc.
02 /
Because of timeline shifts and long approval loops, development had to start before usability testing was finished. This meant the UI had to support two tracks at the same time: stay clear enough for developers to build, but flexible enough to change after testing.
CHALLENGE
01 /
The brand existed, but the product UI did not. The style guide showed how the brand should look in marketing and reports, but it did not answer product questions: how pages should be built, how tables and forms should work, and how the same visual language should scale across calculators, editors, reports, etc.
02 /
Because of timeline shifts and long approval loops, development had to start before usability testing was finished. This meant the UI had to support two tracks at the same time: stay clear enough for developers to build, but flexible enough to change after testing.
DESCRIBE EXCEL PICTURE
WHAT I DID
I worked within an existing design system foundation: typography, colors, basic styles, and atomic elements were already defined by a dedicated design system team.
My work focused on more complex UI components. I analyzed existing examples, expanded the reference set where needed, and compared how similar patterns were used across different pages and product areas.
For each component, I helped define the unified version: what should stay flexible, what should be fixed, and how the component should behave in different states, layouts, and screen resolutions.
Localization was part of the review. I checked how components handled longer labels and different languages, including cases where German text could affect spacing, wrapping, and layout behavior.
The final output was a detailed specification for development, aligned with business stakeholders and prepared for implementation.
OUTCOME
01 /
Reusable UI components specified for development.
02 /
Structure, states, constraints, and behavior documented.
03 /
Languages, long labels, layouts, and screen resolutions reviewed.
04 /
Specifications aligned with business and development teams.