Eli Lilly
Lilly Design System - 2.0 Redesign
The Lilly Design System 2.0 Redesign revitalizes our component library with a vibrant, modern aesthetic, aiming to deliver an exciting look and enhanced, robust features for seamless user experiences.
Take a peek at the Design System Prototypes – you won’t regret it!
Situation
Lilly aimed to transform their design system to deliver more engaging and dynamic user experiences. They envisioned a comprehensive design system that could address nearly every use case, including a tailored product version to streamline internal websites and dashboards. Additionally, Lilly prioritized building accessibility, robust theming options, and structured choices to empower designers with greater flexibility and consistency.
Task
The primary tasks for the Lilly Design System 2.0 Redesign included:
Revamping the visual design to create a vibrant, exciting aesthetic that enhances user engagement.
Expanding the component library to cover nearly every use case, ensuring versatility across applications.
Developing a specialized product version tailored for internal websites and dashboards.
Integrating accessibility features to meet inclusive design standards.
Implementing robust theming capabilities to allow flexible customization.
Establishing structured design choices to provide designers with clear, consistent options.
Action
To execute the Lilly Design System 2.0 Redesign, the team:
Conducted research and stakeholder interviews to identify design preferences and use case requirements.
Collaborated with designers to create a modern, vibrant visual style guide emphasizing bold aesthetics.
Developed and tested an expanded component library to ensure compatibility across diverse applications.
Building a dedicated product version for internal websites and dashboards, prioritizing usability and efficiency.
Integrated accessibility standards, including WCAG compliance, through audits and testing with assistive technologies.
Designed a flexible theming system to support customization while maintaining brand consistency. This includes controlling component padding and radius site wide with Figma Variables Modes.
Results
Though the Lilly Design System 2.0 Redesign remains in development, early outcomes include:
A refreshed visual style prototype that has received positive feedback from internal stakeholders for its vibrant and modern aesthetic.
An expanded component library, with initial testing showing improved versatility.
A functional product version for internal websites and dashboards, currently in beta with select teams reporting enhanced usability.
Accessibility features integrated into core components, achieving improved WCAG compliance in early audits.
A theming system prototype enabling seamless customization, demonstrated in pilot projects with consistent brand alignment.
A documented framework of structured design choices, adopted by designers in ongoing workflows, reducing decision fatigue.
Increased team confidence in the system’s direction, with ongoing iterations refining features based on user testing.
