Helping Boehringer Ingelheim improve their websites’ time to market thanks to a re-imagined component library

I had the pleasure to partner up again with Appnovation and lead the design team behind Boehringer Ingelheim's Global Design System assessment and the Component Library re-build, in the context of a global digital transformation plan.

In 90 days, we transformed the library setup and delivered fully responsive and AA accessible Sketch and HTML/CSS components with theming support.

80+ design agencies and production partners started using the Component Library straight after we delivered – Health Care Professionals and Consumer type websites were first in the queue.

Role: Product Design Lead
Agency: Appnovation
Year: 2020

The brief

The client asked us to run a design assessment to help identify the pain points around their existing Component Library and Design System. Their previous workaround wasn't working for them as expected: the set-up was difficult to understand and to use, leading to poor adoption and a high volume of requests from their production partners.

The proposal

As a result of the design assessment, we decided to rebuild the Component Library based on the client's existing requirements. This would get them back up to speed while ensuring scalability in the long-term.

The process

With the target of simplifying websites' production process we run a Consolidation exercise – as a result, we convert +160 components into 70 flexible ones.

I also created a new approach for the design libraries. Instead of there being a different library for each website type, there's now a single library with theming capabilities.

One library to rule them all

The set-up is scalable and flexible to feed different websites types, thanks to the theming solution that works in Sketch as CSS does in HTML.

A graphic showing the Sketch Libraries set up
The Core Library is used for creating all type websites. To personalise look and feel, a theme is applied on top.
A close-up of the Theming Library
An ad-hoc Sketch Theming configuration library works seamlessly with the Core Component Library

Theming ready components

Every component was designed and built with theming in mind. 
Design tokens like colours, shadows and typography were incorporated as layer styles and nested symbols in Sketch to mimic the power of using CSS styles.

A graphic showing how the Theming set up was done

Proper communication ensures a superb delivery

I introduced a simple tagging system to each component detail page in Sketch. This helped not only the Front-End team but also third parties like design agencies and production partners, to quickly identify components, requirements and their statuses.

Detail of the Tagging system included as part of the project delivery
Product Delivery tagging system detail
An image showing the Sketch Setup
UI Notes and Help Docs were produced and included in the Core Library
Snapshot of the Component Index page
A snapshot of the Component Index, included in the Core Library file


Thanks to the Consolidation exercise and the way the new library was designed and built, we managed to merge similar components into variations of a single component. This helped production partners and brand teams find the right design block quicker, and as a consequence, design faster.

A snapshot of Page Examples UI
Homepage and Article Page examples using the HCP (Healthcare Professionals) Theme
An image showing all Carousel variations
Some design variations on the Carousel component
An image showing some of the Key Fact component variations
Design variations on the Key Fact component

I led a small design team across a six sprints plan. I was also involved in design production, design QA and regular client presentations.

After 90 days of working closely with the Component Library Product Owner, Brand Teams, Front-End and Back-End teams, we successfully delivered HTML/CSS components ready-to-implement in Drupal, along with a detailed Usage Guidelines document, shaping the bases for their future Global Design System.

As we finished with the delivery, I conducted two Design Training Sessions for +80 design agencies and production partners. This involved helping them with the on-boarding and running demonstrations on how to use the design blocks and apply different themes, thanks to the new Component Library.

⭠ Back to design home