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.
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.
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.
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.
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.
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.
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.
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.
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.
