<Back to Portfolio

design systems • design ops — tooling • Branding

Multi-Branded Design System

Meeting the needs of many with a single source of truth

~200%

productivity increased for Design System and Product Teams

71%

improvement to accessibility scores

100+

brands with WCAG compliant themes

~1800%

annual brand adoption rate increase from the previous year

primary objective

Improve Workflow for New Theme Creation & Increase Design System Adoption

Bayer’s Marketing Platforms in both the Pharmaceutical and Crop Science divisions which boasted over 100 brands were in need of a way to design a templated experience that could be reiterated and rebranded as quickly as possible. Theme creation time to launch was becoming a bottle neck, with themes taking 6 weeks on average to deliver end-to-end. The Theme creation workflow needed to be optimized not only for the Design System team to create but also for the Product teams to implement. 

Goals

  • Must be Consistent & Quick

    Experiences should be templated and easily recreated. The Marketing Platform uses AEM, so themes must be compatible. Brand integrity must be prioritized.

  • Themes must be approved by brand manager

    Users should be able to save time getting approval on Look & Feel. 
A product should be fully 
branded out of the box.

  • Must meet WCAG Accessibility Compliance

    Each background color must be paired with AA compliant options for large text, small text, icon, and interaction.

  • Must Simplify Workflow

    Theme creation could take anywhere from 4 sprints to 6 months depending on the complexity of the brand. We had to establish a faster launch model while juggling staffing changes.

role

Theme Team Lead

As the Theme Team Lead, I facilitated workshops, delivered extensive documentation, evangelized new Element capabilities, created onboarding materials, streamlined and built guidelines for Standard Operating Procedures, and assisted in both long-term and short-term strategies.

An Opportunity to Make a Difference

With the arrival of the new Element Design System, users who had already built products became anxious about losing exiting work. Themes had become the most intuitive and reliable aspect of Element Design System and would be quick to implement in the new, migrated system.

Creating a collaborative space to give users an opportunity to have real impact on the tools they would be using became the flame that would attract adopters to the new system.

How We Did It

Research Phase

We curated a list of power users, squeaky wheels, and enthusiastic collaborators to gather in a room for 1:1 interviews and regular check-ins.

With the help of our users, we committed to data-driven change, and began our journey towards Themes V2.0.

Governance & Contribution Model

It all starts with Element in our hybrid governance model. A central team facilitates and distributes any brand standards or changes to the Bayer Theme. Brand Integrity and accessibility standards are built into each component to be inherited by any supported products. Any changes are requested and evaluated by the design system team to determine impact and feasibility before being contributed back into the system for anyone to use.

  • Builds community and trust between design system team and users

  • Product Level Libraries allow for flexibility while also improving consistency for the brand

  • Reduces roadblocks and dependencies from the design system team

Not all themes have the same levels of complexity, which meant they have separate levels of cost and effort. This categorization breakdown gave us and our stakeholders a clearer understanding of expectation and limitation. It also prevented feedback cycles from going around and around, and forced every meeting into productive and actionable conversation.

Theme Categories

Basic

1 Sprint Theme

  • Up to 9 brand colors

  • Open source font

  • Default look and feel

  • Typography Hierarchy

  • Limited to Design System’s current capabilities

Advanced

Minimum 2 sprint theme

  • Up to 9 brand colors

  • Licensed font (with cost)

  • Typography Hierarchy

  • Custom Brand Expression within Element’s limitations

Innovative

Sprint term defined by discovery period

  • Custom Palette

  • Custom Brand Expression

  • Custom Components (with cost)

  • Capability exploration

Tooling & Resources

Design Tokens

Introducing semantically named Design Tokens into our system allowed us to standardize naming conventions between design and development, improving hand-off, improve Design System usability, and reduce cognitive load through simplification.

Theme Guidance and QA Tool

Best Practices & Documentation

  • Quickly view any theme

  • Brand Guidelines within Element

  • WCAG Compliance Type Documentation

Theme Creation Tooling

  • Quickly peer review theme in design and code for parity and quality control

  • Test states per theme

  • Quickly showcase theme in
experience for Stakeholder approval

Tutorials & Workshops

  • Go-at-your-own-pace videos and file examples for anything from getting started or commonly encountered problems

  • Hands-on Workshops to tackle challenges holistically

  • These resources were an easy entry point to track metrics

Accelerating Productivity with Custom Plugins

Modist - JSON Styles Converter
Quickly turn any theme into an exportable JSON file to be converted into dev-ready styles.

Design System Contrast Checker
Checking for WCAG contrast was one of the most tedious aspects of theme creation. This plugin could check every background and foreground color in seconds.

Winning Moments

  • Satisfied Users

  • Built trust between Design and Brand Managers

  • Element now boasts over 100 themes supported with WCAG compliance

Lessons Learned

  • Inflexibility will create blockers for users

  • Too much flexibility will result in inconsistencies and chaos

Previous

Element — Branding