Problem Statement

How might we create a unified design system that minimizes tool conflicts and enhances collaboration between designers and developers at Bayer, ensuring a seamless transition from design to development while maximizing efficiency and designer satisfaction?

 

Situation

Upon joining Bayer as the Lead of the Design Studio, Nathan inherited a fragmented design tool system for the Element Design System, which included Sketch, InVision, and Abstract. This design stack created inefficiencies, version conflicts, and difficulty in transitioning designs to the front-end teams. The system's promise of speed to delivery was not being met, with a significant portion of design time being consumed by troubleshooting and tool breakages.

​

Task

Nathan was tasked with reducing inefficiencies and delivering a more streamlined design-to-development workflow. This included addressing tool conflicts, optimizing time-to-market, and ensuring ease of handoff between designers and development teams.

​

Action

1. Empathy and Discovery:

   • Conducted user research across platform design teams, uncovering that 50% of designers' time was spent troubleshooting tool issues.

   • Quantified outages and the time spent by the design system team on triaging these issues.

2. Tool Evaluation and Transition:

   • Piloted alternative tools such as Figma and Adobe XD, while consulting other enterprise design system experts.

   • Decided on transitioning to Figma as a single-tool design stack.

   • Led the transition plan, which required:

     • Rebuilding the design system from Sketch to Figma.

     • Implementing change management to onboard 315 designers across Crop Science, Pharmaceuticals, and Consumer Health divisions.

     • Creating onboarding and training sessions, and migrating all existing designs to Figma.

     • Sunsetting approach for Sketch, InVision, and Abstract.

3. Governance Model Implementation:

   • Defined a new governance structure to support customer-facing web experiences across all divisions.

   • Introduced Open Houses for Designers, quarterly design and engineering roadmap planning, and new intake processes for standardizing support across teams.

 

Result

• Impact: Achieved the full transition to Figma within the planned 6 months, successfully onboarding 315 designers globally.

• Cost Savings: Reduced software tool costs by $150k annually and saved an estimated $2 million in design hours by minimizing outages and tool breakages.

• Designer Satisfaction: Post-transition surveys revealed 100% positive feedback from designers regarding the new system.

• Ongoing Evolution: The system continues to improve, with a new token-based system supporting agnostic frontend frameworks.

• Improved Governance: The governance model provided better visibility across divisions, standardizing contribution processes and product team support models.

​​

ROI Highlights

• $2 million in annual savings through time saved on outages and improved workflow efficiency.

• $150k savings annually from reducing the number of software tools.

• 100% designer satisfaction, indicating high acceptance of the new system and workflow