Helping Boehringer Ingelheim improve their websites’ time to market thanks to a re-imagined design system
I had the opportunity to collaborate once again with Appnovation, leading the design team in the overhaul of Boehringer Ingelheim's Global Design System and Component Library as part of a broader global digital transformation initiative.
We completely transformed the Component Library and delivered fully responsive, AA accessible Sketch and HTML/CSS components with theming support in about 90 days.
Notably, more than 80 design agencies and production partners swiftly adopted the Component Library, with healthcare professionals and product websites taking the lead.
Product Design Lead
Our client sought assistance in identifying the challenges within their existing Component Library and Design System. Their previous setup was causing complications, leading to low adoption rates and a high volume of production partner requests.
To simplify the website production process, we initiated a Consolidation exercise, effectively reducing over 160 components to just 70 flexible ones. Additionally, we introduced a new approach to the design libraries, consolidating them into a single, theming-capable library.
Unified Library for all needs
Our scalable and flexible setup now caters to different website types, thanks to the theming solution that operates seamlessly, both in Sketch and HTML/CSS.
Every component was meticulously designed with theming in mind. We integrated design tokens, such as colors, shadows, and typography, as layer styles and nested symbols in Sketch, mirroring the versatility of using CSS styles in HTML.
To ensure a smooth delivery process, we introduced a straightforward tagging system on each component detail page in Sketch. This not only aided the Front-End team but also provided quick identification of components, requirements, and statuses to third parties, including design agencies and production partners.
Boosting Design Efficiency
Our efforts led to the merging of similar components into variations of a single component, facilitating quicker identification of the right design blocks for production partners and brand teams. This, in turn, accelerated the design process.
Guiding the Transformation
I headed a small design team throughout a six-sprint plan, actively participating in design production, design quality assurance, and regular client presentations.
Successful Delivery and Foundation Building
After 90 days of close collaboration with the Component Library Product Owner, Brand Teams, Front-End, and Back-End teams, we successfully delivered HTML/CSS components ready for implementation in Drupal, along with a comprehensive Usage Guidelines document, laying the foundation for their future Global Design System.
Empowering Design Partners
Upon completion of the delivery, I conducted two Design Training Sessions for over 80 design agencies and production partners. These sessions included onboarding assistance and hands-on demonstrations of how to use the design blocks and apply various themes, all thanks to the newly revamped Component Library.