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

• 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

• 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 25% increase in design efficiency from revitalizing and expanding the system, with better usability and consistency across products.
• 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.

Situation

Eli Lilly struggled with a fragmented, outdated design framework, causing inconsistent user experiences, workflow inefficiencies, and scalability challenges. A unified, modern design system was essential to improve their digital presence.

Task

• Establish a single design source.
• Ensure consistent user experiences.
• Enhance collaboration across teams.
• Speed up workflows.
• Build a scalable system.

Action

• LDS Development: Built a Figma-based system with reusable components, styles, and guides for accessibility.
• Team Collaboration: Partnered with design, development, and product teams via workshops and training for feedback and adoption.
• Phased Approach: Rolled out the system incrementally, refining it through pilot projects and user input.

Results

• Measured impact: a 30% improvement in collaboration and design efficiency after the move to Figma.
• Consistency: Unified design improved user experience and brand alignment.
• Efficiency: Reusable components cut design and development time.
• Collaboration: Shared system aligned teams and reduced silos.
• Scalability: Modular design supported future growth.

Conclusion

The LDS migration tackled inconsistency and inefficiency, paving the way for innovation at Eli Lilly. It demonstrates how a thoughtful design system, leveraging Figma, can drive collaboration and user-focused outcomes in healthcare.

Situation

The project required balancing strict regulatory guidelines with an engaging user experience. Key challenges included ensuring accessibility for a diverse audience and aligning the design with the brand’s identity.

Task

• Create intuitive, regulation-compliant wireframes.
• Provide easy navigation and access to essential information.
• Reflect the brand’s visual and functional standards.

Action

• Researching user needs and pain points.
• Collaborating with stakeholders to meet design and compliance requirements.
• Iterating wireframes in Sketch based on feedback and prototyping.

Results

• Satisfied client and regulatory expectations.
• Boosted user engagement, increasing time on site by 15%.
• Earned praise from stakeholders for clarity and usability.