Helping Boehringer Ingelheim improve their websites’ time to market thanks to a re-imagined design system

Summary

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.

Role

Product Design Lead

Agency

Appnovation

Client

Boehringer Ingelheim

The Challenge

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.

The Transformation

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.

Video produced by AKQA.

An ad-hoc Sketch Theming configuration library works seamlessly with the Core Component Library

Theming-Ready Components

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.

Streamlined Communication

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.

Product Delivery tagging system detail

UI Notes and Help Docs were produced and included in the Core Library

A snapshot of the Component Index, included in the Core Library file

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.

Homepage and Article Page examples using the HCP (Healthcare Professionals) Theme

Design variations on the Carousel component

Design variations on the Key Fact component

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.