How Alexander Bürkle Built a Scalable Design System That Cut Website Update Time in Half
A 100+ year-old technology distributor needed consistent UI across dozens of web pages. easy.bi delivered a reusable React component library with full Storybook documentation - reducing update cycles from days to hours.
The Challenge: A Growing Website With No Shared Component Standard
Alexander Bürkle is one of Germany's leading electrical wholesalers, with over 100 years of history and a product catalog spanning thousands of items. Their website had grown organically over years - page by page, team by team - without a unified design system.
The result: buttons that looked different on the product page versus the contact page. Form inputs with inconsistent validation patterns. Navigation elements that behaved one way on desktop and another way on mobile - not by design, but by accident.
Every website update became a negotiation. Designers created mockups in Figma. Developers interpreted them differently. The same component got rebuilt three or four times across different pages, each with subtle variations that eroded brand consistency and frustrated the marketing team.
Alexander Bürkle needed a single component library that designers and developers could share - one that was documented, configurable, and production-ready. Not a theoretical design system in a PDF, but working code their team could deploy immediately.
“Every page on our site had its own version of a button. It sounds trivial, but multiply that inconsistency across 50 components and suddenly your website feels like it was built by five different companies.”
Why Alexander Bürkle Chose easy.bi
The internal team had attempted to standardize components twice before. Both efforts stalled because they were side projects - squeezed between feature work and deadline pressure. Alexander Bürkle realized they needed a dedicated partner to build the foundation properly.
easy.bi's experience building enterprise-grade design systems with React and Storybook matched exactly what was needed. The proposal wasn't just "build components" - it was "build a system that your team maintains and extends long after we leave." That long-term thinking resonated with a company that has been operating for over a century.
“We tried standardizing twice internally. Both times it got deprioritized. easy.bi gave us a dedicated team that treated the design system as the product - not a side project.”
The Approach: Components That Document Themselves
The easy.bi team started with an audit of every existing UI pattern across Alexander Bürkle's website. This produced an inventory of 40+ distinct component variations - many of which were functionally identical but implemented differently.
TypeScript-first React components. Every component was built in TypeScript with strict type definitions. This wasn't just about code quality - it meant developers got autocomplete suggestions and compile-time error checking when using components. Wrong prop? The build catches it before deployment.
Storybook as the living documentation layer. Each component shipped with a comprehensive Storybook story showing every state: default, hover, active, disabled, error, loading. Developers didn't need to read documentation - they could see every variant rendered in the browser, copy the code, and integrate in minutes.
Figma-to-code alignment. Designers continued working in Figma. But now every Figma component mapped 1:1 to a React component. When a designer added a new card layout to a mockup, the developer knew exactly which component to use and which props to configure. No interpretation, no guessing.
Each component was designed for maximum configurability with minimum complexity. A single button component handled primary, secondary, and tertiary variants through props - not three separate button files. This reduced the library's footprint while increasing its flexibility.
“The Storybook documentation changed how our team works. New developers don't ask 'how does this component work?' - they open Storybook and see it running with every possible configuration.”
The Results: Faster Updates, Consistent Brand, Empowered Team
Website update cycles that previously took days now take hours. When the marketing team requests a new landing page, developers assemble it from existing components like building blocks. The design system handles consistency automatically - no manual alignment needed.
New developers onboard faster. Instead of learning the patterns and conventions of dozens of individually-built pages, they learn one component library. Storybook serves as both documentation and training material.
The library continues to grow. Alexander Bürkle's internal team now extends the system independently, adding new components following the patterns easy.bi established. The design system isn't a dependency - it's a capability the organization owns.
“Our marketing team can now request a landing page and get it live in hours, not days. The component library turned website updates from projects into tasks.”
Key Takeaways
- Audit before you build. Cataloging 40+ existing component variations revealed how much duplication existed. The audit justified the investment and defined the library's scope.
- Storybook turns documentation from a chore into a feature. When developers can see every component state rendered live, adoption happens naturally. Nobody needs to be told to use the library - it's faster than building from scratch.
- Design systems are products, not projects. Building the library with extension patterns meant Alexander Bürkle's team could grow it independently. The goal was always transfer of capability, not ongoing dependency.
Ready to achieve similar results?
Speak directly with our experts. Book a 20-minute Expert Call.
Start with a Strategy CallProject Snapshot
More success stories
Multi-brand e-commerce platform with SSO for outdoor brands
Order processing middleware for multi-store Shopify operations
