Design System Redesign
A complete visual, functional, and technical overhaul of the Lilly design system.
Role:
Senior Visual Designer
Platform:
Web
Timeline:
Dec 2023 - Jan 2025
Overview
After several years applying the Lilly design system (LDS) across dozens of websites for the Enterprise Website Initiative (EWI), I joined the LDS team to help redesign the system itself. I brought a deep knowledge of the system’s limitations, its users, and the regulatory challenges brand teams face. My role focused on component design; auditing, researching, designing, and spec’ing out each component to ensure consistency and improve functionality while meeting rigorous accessibility and regulatory standards. These updates aimed to deliver a seamless and inclusive experience across all platforms and devices.
The Problem
Eli Lilly has hundreds of internal brands and departments, each with their own unique design needs and requirements. Each brand/ department had their own design teams or hired external agencies to produce content and build applications. This approach was expensive, labor-intensive and inefficient. While an internal design system existed, it lacked the flexibility and depth required to support the diverse needs of these teams. To address these issues and increase adoption across the company, the system needed significant improvements.
At the same time, Lilly was undergoing a broader brand transition to become more customer-focused. This had leadership brining in a new design team with a fresh perspective to try and modernize the overall look and feel of its digital presence. These visual concepts would need to be translated into usable, scalable components that would meet all accessibility and regulatory requirements.
Goals
Unify design on a global enterprise scale
With the scale of brands and the need to unify their digital experiences we needed to establish a cohesive design foundation. While the long-term goal was to allow brands to explore their own identities within the system, we first needed to provide a platform they could build upon. This foundation had to be culturally inclusive, compliant with global medical regulations, and deployable at scale within a short timeframe.Migrate all existing applications
All existing websites needed to be manually migrated and rebuilt in the new design system platform.Provide UX solutions and training
After migrations, brand teams would need additional UX support and training to help with new product releases and major content updates.Develop scalable processes
Given the scale of the initiative (200+ websites, 40+ brand teams, 20+ countries) we needed to develop clear processes to ensure alignment between stakeholders, accuracy across handoffs, and efficiency across multicultural teams and time zones. The systems would be essential for meeting deadlines without sacrificing quality.Increase adoption rate
internal use
more components for product
customization
better tooling for designersmodern look and feel
Improve functionality and user experience
Impact
The EWI team successfully achieved all our core objectives. By 2021 we completed the initial migration of all existing brand sites, designed and launched dozens of new sites for newly approved brands, and provided ongoing UX support to help brand teams manage content updates and respond to continual regulatory requirements.
Brand teams appreciated the flexibility within the new constraints
Brought all brand sites to WCAG 2.1 AA accessibility standards
The systems we developed increased the efficiency of web-based content publishing and updates across the company by over 30%
The Approach
The primary deliverable for both the migration and new release project was a set of regulatory ready, developer ready, high-fidelity prototypes. My primary role as a EWI designer was to produce these prototypes.
Process summary
Work with brand teams and agencies to gather requirements, assets, manuscripts, and information architecture.
Meet with the brand to point out design, usability, and accessibility pain points.
Build out high-fidelity prototype of the site utilizing our design system, agency mockups, and any live sites (if present).
Have peers review prototype before reviewing with the brand.
Submit prototype for brand review, then make revisions until all parties are satisfied
Handoff prototype to dev team, along with assets and all necessary additional information
Once site is developed, review the staging link, and work with the developer on revisions
Challenges
Not getting to provide my own designs
Due to time constraints and existing contracts with external agencies I was not supposed to provide new designs. Our role was to "translate" their (often poor and not web-optimized) designs into the system.
While we could suggest visual changes, the agency had the final say of the visuals and IA of the given site.
Inexperienced developers
The majority of the development teams were off-short. They were isolated, hard to communicate with, and not given enough training in how to use the design systems code-base. This resulted in sub-par final products.
I wish that we could have developed a better communication system in order to solve some of the problems we encountered.
Balancing multiple projects
I was assigned to 3-5 projects at any given time. Each assignment had varying degrees of complexity, their own timelines, scheduled meetings, and different teams around the world all working in their own timezones.
It was a balancing act to keep my projects and their work organized. Some days it felt like I was a full-time manager of 1 just to keep everything afloat and delivered on time.
Future steps
Since the initiative’s goal is to continue maintaining and launching new websites for brand teams, the next step is applying updates from the newly launched design system.
After my time on the EWI project, I joined the Lilly Design System (LDS) team to bring insight into brand site needs, limitations, and regulatory constraints. As LDS evolves, EWI sites will need ongoing updates to ensure a more modern look and feel, expanded component flexibility, and a stronger, more unified connection to the Lilly brand.
