Elanco Component Library

Elanco Component Library & Style Guide

JANUARY 2023 to JUNE 2023

Background

The component library project was done in parallel while conducting discovery for Uplook. The goal of that project was to understand the customer experience and business process to enable self-service onboarding with Elanco Knowledge Systems.

The goal has four parts:

Get a general sense of design and ux concerns with the current component library.
Perform an inventory of the components in place and identify gaps.
Understand what it would take to have a UX workflow with Figma integration for a design, prototype, develop, and test loop with product and engineering.
Build an evolving Figma file shared between design, development and product.

Outcome

I built a shared component library in Figma using components and foundational UI elements to facilitate design and developer workflow.

The Figma file I built matches utility classes used in the TailwindCSS framework enabling a bespoke, branded and visually robust design system.

Role

Lead Product Designer

Team

Ryan Knopp, Solutions Engineering
Jordan Newland, Front-End Enterprise Engineering

Tools

Figma
FigJam
Storybook
Github
TailwindCSS

Time

January 2023 - July 2023

Goal Recap

✅ Figma File

Elanco Brand + Colors
TailwindCSS Colors
Heroicons
Buttons + States
Input Fields
Alerts
Type Scale
Spacing, Shadows & Border Radius
Responsive Breakpoints
Components
Navigation
Cards
Pagination
Tabs
Tables

✅ Design System Owner

Lead Product Designer
Solution Operations Discovery

✅ Design System Team

Product Design Lead
Visual Design
Front-End Engineering
Solution Operations Engineer

✅ Collaboration & Communication

Defined ways of working between product, design and engineering teams.

Foundational Design System Applied

1. Uplook Re-Design

Feedyard management dashboard for dairy operators that tracks herd diet and utility. Helping owners articulate their sustainability needs to open up grants, and pinpoint issues at an operational level.