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:

1. Get a general sense of design and ux concerns with the current component library.
2. Perform an inventory of the components in place and identify gaps.
3. 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.
4. 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.

First Iteration

Second Iteration

Third Iteration

2. ElancoGPT

ElancoGPT is an internal tool based on two large language models, OpenAI's GPT-3.5 and Google's PaLM-2.

I designed a responsive chat experience in three days using the component library and design system.

What's Next

📍Roadmap

Plan for the evolution and maintenance of the design system, including new components and updates to existing components.

☑️ Approval Process

The process of reviewing and approving new components and changes to existing components, including stakeholder feedback and sign-off.

⚙️ Maintenance Process

Maintaining and updating the design system, including bug fixes, performance optimization, and updates to design guidelines and brand elements.

💬 Measurement & Feedback

How to measure the success of the component library + design system. (ex. user satsfaction and adoption rates)

Raf Laus, Portfolio. https://rlaus.xyz. © 2024