Let’s look at a real-life example. For a global retail company with headquarters in The Netherlands, we were asked to build a new website for one of their brands while speeding up the editing process significantly and while keeping future scalability and reusability in mind.
We started by creating a design system for this brand based on the website designs we received. By mapping similar design elements and components, we quickly had a good overview of the front-end components our team would need to build.
Then, we took one of the other brands that we were not working on yet to see how this new brand would map on our existing components.
Based on that joint analysis, we then decided which design elements and components from our design system would need to be added as AEM components and how they would need to work. We made a distinction between the configuration options and styling options and we implemented the structure in AEM.
Not long after a successful release of the first brand, we were asked to take on a second, and then a third. For each brand, we first extended the design system to make sure it fit what we already had. While each brand could look completely different, we knew which AEM components they could use. If any new components were needed, we would add them to the design system and to AEM.
Some elements were aligned across brands and only themed differently (changing only the fonts and colours) while some elements were almost unrecognisable going from one brand to the other. This helped to truly give each brand its own identity, while maintaining the look and feel of the parent company in certain elements.
Since our first launch, we have onboarded and developed many new brands on the same platform. All brands can benefit from the efficient set-up of the content management system and the interesting rollout features to share content across multiple countries and languages while still maintaining their own identity.