Responsiblities
I was the team lead and sole designer responsible for architecting, designing, building, maintaining, and enforcing the LinOS Design System; a robust UI component library made up of 70 reusable components and styles that serve as the front-end building blocks for all applications and products across Lineage Logistic's portfolio.
Business Challenge & Scope
Lineage Logistics came to Levvel with the desire to build 7+ voice-first applications spanning across web and Android mobile to support their rapidly evolving cold storage logistic business operations. Knowing this would be a massive undertaking for both design and dev, I pushed both Levvel and Lineage's executive team to include a dedicated Design System Team in the staffing plan that would allow for design consistency, development time reduction, designer productivity gains, and maintenance time savings.
Timeline
The timeline for this project was broken up into 3 phases
Research & Discovery
By the time I joined the project, the team had already gone through an initial engagement phase that consisted of designing and building the first application in this new suite of products. I started by auditing their work– the mockups, prototypes, components, design patterns, processes, and ceremonies used to understand how we could improve on what they had already built while avoiding commonly felt pain points that the cross-collaborative teams were actively facing. I was luckily already integrated with the day-to-day conversations that were being had by this team due to mentoring the primary designer on the project, making it easy for me to position to our stakeholders why a Design System Team was so critical to this project's success moving forward.
Primary Problems
Development team was utilizing a mono-repo approach for the front-end components, which was housed within the primary project file. This was proving to be a major headache for all of the front-end devs on the project, as it was too much to manage and keep clean of merge conflicts
There was no documentation between out-of-the-box and custom components which left too much room for interpretation and led to design inconsistencies
No focus on design QA once in development, which constantly caused confusion and issues with the client
Component library that was being used was not appropriate for both web and mobile use-cases and was very difficult to customize
Design team was using Sketch for design files, and had no real organization to support a proper design system that was used by 5+ designers at once
Strategic Approach & Methodology
Knowing this project would need a multi-tiered design system, I heavily utilized Brad Frost's Atomic Design methodology in my strategic approach. This meant starting with the smallest building blocks and then systematically combining them into larger, more complex components. What the team had already built was a solid base, but there were many improvements that could be made simply by better utilizing this methodology.
Implementation & Adoption Strategy
Implementation and adoption of the LinOS design system included a tightly weaved web of resources. Components were individually packaged and versioned so project developers could easily pick and choose the resources required to successfully complete their work. If specific components caused problems, it was very easy to isolate and reconcile any issues.
Atlassian Confluence
Design System Team documentation; our purpose, team members, and their responsibilities
Documentation on how to set up the design system and use it within a LinOS project
Component cheatsheet that included the component's visuals, name, a brief description, and live links to both Figma and Storybook instances
Figma
Contained documentation for designers and design system developers
How to utilize each component + examples
Noted which customizations were available for designers to play with
Outlined basic functionality and behavior
Included design patterns required for specific recurring scenarios
Each component included a link to its version contained within Storybook




Storybook
Documentation for developers utilizing the system
Each component kept track of versioning and appropriate notes
Listed available prop names and their values for each component
Playground for designers
Helps designers understand specific interactions, strengthening their mockups and prototypes



Slack
Used as primary means of communicating with the broader LinOS teams, this was their hub for asking questions and requesting formal assistance via a bot
Every Friday I would take the opportunity to post a weekly roundup of design system changes that the team pushed to production, helping developers know if they should update their components or not
Results & Impact
The results of this dedicated design system team were highly impactful. Once we had taken the appropriate steps to ensure a highly usable design system, teams began integrating it into the 7 applications that were being built concurrently across web and android mobile.



Other Notable Contributions
Strategy
Generated a staffing and process plan to determine how a dedicated design system team would fit in and work with other teams across the LinOS portfolio
Developed and implemented a cross-functional design system strategy that considers both design and development across ~7+ LinOS applications
Design
Built and maintained a robust UI component library within Figma–creating generic, responsive, reusable components that are easy for other designers to use within mockups and accurately reflect coded components
Managed designers across the portfolio to ensure consistency and accurate usage of design system components within designs
Front-End Development
Managed the design system development team to ensure accurate implementation of design system components as outlined in Figma and Jira; making sure that these components can easily be reused by multiple application teams in different contexts
Taught design system developers best practices for writing documentation; giving concrete direction on how to best utilize and templatize Storybook for LinOS components
Product + Project Management
Prioritization of design system work based on the needs of all other LinOS teams
Identified upcoming changes to design system components based on designer mockups; then translated those requirements into Jira tickets for the design system dev team
Creation and maintenance of design documentation related to LinOS styles and UI component functionality that assists designers, developers, and BAs
Created and distributed design system surveys to gauge perception and gather feedback on how the team could improve
Informally mentored designers, front-end developers, QA, BAs, and Scrum Masters across the portfolio on what a design system is, why it is important, best practices of how to utilize one and work with our team, and how to utilize it to build applications for different devices and resolutions
Lessons Learned