Design System: Team Founding

Project Areas:
Team Leadership, Principal UX, Product Strategy, Concepting/Prototyping/Testing, System Architecture, Comms

Then & Now

After the creation of an internal initiative to bring all external corporate communications and product brand sites into the same design ecosystem and production teams, the Lilly Design System was tapped for its early successes and demonstrated proof of value to enable the initiative. The Lilly Design System was positioned to replace an earlier component library with a focus on flexibility, accessibility, and union with strong architectural and development principles.

Today the Lilly Design System has evolved to be a successful product and service offering which has empowered over 160+ external web properties, and internal web applications. The team and system continues to evolve the component catalog, and technical architecture by reinvesting learnings obtained from the products and teams the design system enables.

Approach & Role

I had initially started the Lilly Design System as a small passion project between team members in order to share a common design language and patterns for the internal stakeholders and projects we contributed to. This project grew organically through strategic partnerships with internal clients and the resulting quality, cost savings, and efficiency gains became evident.

Once the greater organization was committed to bringing the same types of efficiencies and gains to its vast web property portfolio, we submitted a formal proposal to the executive team to take the design system and our learnings to the next level with a dedicated system. After achieving executive buy-in, support, and funding for the initiative, I led the team the vision and. MVP definition, obtaining and positioning of roles and resources, systems architecture, creation of our daily operations and processes, principles we would adhere to, and our internal team culture.

Being an intrapreneur creating a new product and service offering inside of a large organization involved a wide range of moving parts and daily learning within the role.

Exploration & Discovery

  • Front-end Framework Landscape
  • External Design System Offerings
  • Team Principles
  • Organizational Goals
  • Stakeholder Analysis
  • Agile Principles

Identify Themes & Focus Areas

Lead Design and Execution

  • Define Team Principles
  • Structure Team Roles & Ops
  • Develop Product & Service Goals
  • Obtain Workspace
  • Create Component Requirements
  • Promote Cultural Values

Output

Panning and strategy conducted to the Design System team was setup for success

Whiteboard of vision and strategy planning

Defined the Vision & Strategy

  • Defined product vision in a simple statement: Bring democratized design and reusable iterative design assets to a pharmaceutical organization.
  • Laid out an initial strategy and roadmap for building out an MVP Design System that could enable enterprise website design and development.

    • Whiteboard of resource planning

    Resource Planning

  • Identified project roles based on skill sets, and areas of passion.
  • Identified gaps in staffing and worked with external vendors to fill roles where internal talent could not be sourced.
  • Ensured diversity of backgrounds, skills, and experiences so that not one voice or perspective would dominate decisions and direction.

    • Whiteboard of design system principles

    Defined Principles Through Inclusion

  • Gathered collective input from all contributing team members to identify, define and affinitize principles of our Design System that would serve as our North Star.
  • Exercise was done to build comradery, and sense of ownership for the direction of the project.
  • Distilled our principles to concise categories of values in which we wanted our designs and deliverables to reflect.

    • Whiteboard with sticky notes showing operational planning

    Planned Operations

  • Planned the sub-teams within the greater design system team.
  • Placed emphasis on collaboration between disciplines and roles.
  • Defined core responsibilities of each subgroup.
  • Some team members wore multiple ’hats’ between different spaces.

    • Picture of team member with Nerf blaster

    Obtained a Space Safe to Work and Play

  • Team bonding and freedom to define our own culture was paramount to the startup of the Design System.
  • Emphasis placed on bringing one’s true-self to work.
  • Promoted strong respect for all voices and ideas.

    • Picture of team members working together on code

    Instilled a Culture of Collaboration

  • Promoted ”swarming” on problems.
  • Production pipeline was established to ensure push and pull communication between team members of each discipline.
  • “Throwing things over the fence” was discouraged
  • Team Developed personal and professional respect for each other and became friends outside of the workplace.

    • "I was impressed with Jeff's ability to "mobilize" the team toward achievement when we worked together on the Design System. He inspired a sense of diligence in every team member as we were framing use cases and executing on design components."

    -Terry Patterson, UX Research Lead

    Team Output

    The team came together and had the first version of the fully documented design system producing enterprise sites in under 6 months.

    Image of Design System home page

    Design System Home Page

  • Easy one-click access to the four key libraries maintained within the system.
  • Showcase features work that uses variable visual styles using the same system.
  • Links to request features, report issues, or join the community.

    • Image of Design System principles page

    Design System Principles

  • Clear and concise statements of the values we uphold as a Design System Team that were established before we began building and have been iterated on since.
  • Definitions of Atomic Design principles to illustrate how components scale and interact with one another.

    • Image of Design System button component page

    Design System Button: Component Page Example

  • Short summary of the components purpose in interaction.
  • Visual and interactive example of all permutations of the component.
  • Code snippets for implementation within the framework.
  • Browser Compatibility Chart.
  • Notes and known issues if applicable.

    • Image of Design System button component usage page

    Design System Button: Usage Guidelines Example

  • General guidance and common ways the component is implemented.
  • Summary of component’s purpose and design rationale.
  • Linked external articles for additional subject matter knowledge and understanding.
  • Dos and Don’ts for implementing with the component.

    • Image of Design System button component API documentation page

    Design System Button: API Documentation Example

  • Descriptions of out-of-the-box API configuration options for the component’s specific attributes, how it can be configured to interact with the DOM, and how it can be configured to pass data to other components within a website or app.

    • Image of Design System button component accessibility guidance page

    Design System Button: Accessibility Guidance Example

  • Accessibility is a critical aspect of the Design System.
  • Summary of how the component was reviewed for WCAG 2.1 AA compliance.
  • Summary of Pass/Fail outputs from accessibility testing.
  • Links to WCAG guidelines and articles relevant to the component.