One Design System, Three Shops
Three shops, one component library. We built it with Fractal and used Bootstrap as a base where it made sense, everything else we wrote ourselves in TypeScript. The shops render on the server, so the components had to work without a JavaScript framework like Vue or React.
- Client
- Calida Group Digital GmbH, in-house
- Engagement
- About eight months, with the UX team and an external colleague
- Role
- Working Student, project lead
- Year
- 2020 to 2021
- Stack
- Fractal, Bootstrap, TypeScript, SCSS, Bitbucket Pipelines, Azure
- shops using the same components
- 3The library is multi tenant. Each shop brings its own theme, the markup and the behavior stay the same. We ran a lot of custom services back then and any of them could pull the components in.
- components in the first release
- 7We started with the components we needed most and wanted to add more when a team asked for one. The project was stopped before that happened, see the note below.
- components that need a mouse
- 0We tested every component for keyboard use, focus order and screen readers before we released it, so accessibility was not something we had to repair later on a finished page.
- from start to a system we could deploy
- 8 moThat includes the release pipeline, versioning for components and assets, and a notification when a new version was deployed. This part was finished and in use.
We used Bootstrap for the standard parts like modals. Anything that had to work differently we wrote from scratch, the drawer for example, because the Bootstrap version did not do what the design needed. A component is server rendered markup plus a small TypeScript file, and we kept an eye on the CSS and JS size so the pages stayed fast.
We worked closely with UX the whole time. An external colleague and I had the lead for the project, and the designers were part of it instead of handing us finished screens. We spent as much time on delivery as on the components: versioning for components and assets, a Bitbucket pipeline that deploys to Azure, and notifications when a new version went out. Our platform team helped us with the Kubernetes side.
The project ended when the company moved from custom services to a monorepo. The design system itself was finished at that point, released, deployed and in use. New components would only have come when the demand was there.