Business Challenge & Scope

Lineage Logistics partnered with Levvel to build 7+ voice-first applications across web and Android mobile platforms, supporting their rapidly evolving cold storage logistics operations.

Recognizing this as a massive undertaking for both design and development teams, I advocated for including a dedicated Design System Team in the staffing plan. This would ensure design consistency, reduce development time, increase designer productivity, and minimize ongoing maintenance costs.

I contributed to this three-phase project from February 2019 through July 2021.

Research & Discovery

By the time I joined the project, the team had completed an initial engagement phase that included designing and building the first application in the new product suite.

I began by conducting a comprehensive audit of their existing work—mockups, prototypes, components, design patterns, processes, and team ceremonies—to understand how we could build upon their foundation while addressing pain points the cross-functional teams were experiencing.

Having already been integrated into the team's daily conversations through mentoring the primary designer, I was well-positioned to articulate to stakeholders why a dedicated Design System Team was critical for the project's continued success.

Primary Problems

• The development team's mono-repo approach housed front-end components within the primary project file, creating significant management overhead and frequent merge conflicts for all front-end developers

• Lack of documentation distinguishing between out-of-the-box and custom components created ambiguity during development, resulting in design inconsistencies across applications

• Absence of design QA processes during development led to persistent confusion and friction with primary stakeholders

• The existing component library wasn't optimized for both web and mobile platforms and proved difficult to customize for project-specific needs

• The design team used Sketch without proper organizational structure to support a scalable design system for 5+ concurrent designers

Strategic Approach & Methodology

Recognizing this project required a multi-tiered design system, I leveraged Brad Frost's Atomic Design methodology as my strategic foundation.

This approach meant starting with the smallest building blocks and systematically combining them into larger, more complex components. While the team had built a solid foundation, many improvements could be achieved by more rigorously applying this methodology.

I also advocated for migrating from Sketch to Figma to enable real-time collaboration, as Sketch lacked the multi-player functionality essential for seamless design handoffs across our large team.

Implementation & Adoption Strategy

Our implementation strategy centered on responsive collaboration and continuous alignment with LinOS team needs.

I prioritized design system development based on real-time requirements from across the portfolio, identifying upcoming component changes by analyzing designer mockups and translating those insights into actionable Jira tickets for our development team. This proactive approach ensured our design system evolved alongside project demands rather than operating in isolation.

Adoption success required comprehensive education and feedback loops across the organization. I created and maintained detailed design documentation covering LinOS styles and UI component functionality to support designers, developers, and business analysts in their daily work.

To gauge our effectiveness and identify improvement opportunities, I regularly distributed surveys to capture team perceptions and gather actionable feedback.

Additionally, I provided informal mentoring across disciplines—from designers and front-end developers to QA specialists, business analysts, and Scrum Masters—educating teams on design system fundamentals, best practices for cross-team collaboration, and techniques for building applications across different devices and resolutions.

Central to our adoption strategy was developing a multi-platform documentation system that met the diverse needs of designers, developers, and stakeholders. By strategically distributing information across complementary tools, we created an ecosystem where each platform reinforced the others while serving its unique audience.

Bit

• Individual component packaging and versioning for modular resource selection

• Isolated issue resolution without affecting the broader system architecture

Atlassian Confluence

• Design System Team documentation including our purpose, team members, and their responsibilities

• Setup and implementation guides for integrating the design system within LinOS projects

• Component reference featuring visuals, names, descriptions, and direct links to Figma and Storybook instances

Figma

• Comprehensive documentation for designers and design system developers:

  • Component usage guidelines with practical examples

  • Available customization options for design flexibility

  • Basic functionality and behavioral specifications

  • Design patterns for common recurring scenarios

  • Direct links to corresponding Storybook instances

Figma Documentation - Designer Focused | 1 of 3

Figma Documentation - Designer Focused | 2 of 3

Figma Documentation - Designer Focused | 3 of 3

Storybook

• Developer documentation and resources:

  • Component versioning history with release notes

  • Complete prop specifications including names and acceptable values

• Interactive playground for designers:

  • Real-time component interaction testing to strengthen mockup accuracy and prototype fidelity

Storybook Component Documentation - Developer Focused | 1 of 3

Storybook Component Documentation - Developer Focused | 2 of 3

Storybook Component Documentation - Developer Focused | 3 of 3

Slack

• Primary communication channel for LinOS teams to request support and ask questions through an integrated assistance bot

• Weekly production updates posted every Friday, highlighting design system changes and advising developers on component updates

Results & Impact

The dedicated design system team delivered significant impact across the LinOS portfolio. As we established a highly usable design system, teams successfully integrated it into all 7 applications being developed concurrently across web and Android mobile platforms.

Designer and developer feedback was overwhelmingly positive. Designers appreciated being freed from managing component state details and interactions, allowing them to focus on high-volume mockup production while relying on my expertise to resolve technical component issues with developers. This streamlined workflow significantly improved design team productivity.

Developers valued the abstraction from direct component implementation, though this approach did introduce some minor inconsistencies in spacing and larger template structures—an acceptable trade-off for the overall efficiency gains.

Automated Receiving - Android Mobile

Manual Unloading - Android Mobile

LinOS Dashboard - Responsive Web

LinOS Dashboard - Responsive Web

LinOS Dashboard - Responsive Web

LinOS Dashboard - Responsive Web

LinOS Dashboard - Responsive Web

Lessons Learned

Design for the Smallest Case Scenario

A critical lesson emerged early in the project when we discovered that one application would require significantly smaller Android devices than initially anticipated. This revelation came several months into development, highlighting a gap in our initial requirements gathering around device specifications and screen constraints.

The impact was substantial: approved mockups required redesign, components needed optimization for smaller screens, and established interaction patterns had to be reconsidered. This experience taught me the importance of comprehensive device auditing before beginning any multi-platform design system work.

I leveraged this challenge as an opportunity to become the team's expert on Android responsive design principles. I conducted extensive research on Android screen sizes and DPI variations, then created comprehensive documentation outlining how layouts should adapt across different screen dimensions. This knowledge enabled me to effectively educate stakeholders on responsive development constraints and advocate for more thorough device planning in future projects.

Storybook

Implementing Storybook presented a significant learning curve for both myself and the development team, as none of us had prior experience with the platform. While Storybook ultimately proved excellent for developer documentation and component showcasing, the initial setup required substantial customization to meet our specific requirements.

We invested considerable development time creating comprehensive stories and configuring custom functionality to align with our design system needs. This learning process, while time-intensive, equipped the entire team with valuable expertise in component documentation and interactive development tools.

The final implementation delivered strong results for developer adoption and component understanding. However, this experience highlighted the importance of evaluating tool customization requirements upfront—in future projects, I would prioritize platforms that offer greater out-of-the-box flexibility or assess the time investment against alternative solutions.

In Closing

My work on the Lineage project at Levvel represents some of the most challenging and impactful design system work of my career.

Given the scale and complexity of this multi-phase initiative, this case study captures the key strategic decisions and outcomes. I'd welcome the opportunity to discuss the full scope and technical details in greater depth.

To better understand the comprehensive component library and documentation that emerged from this effort, you can explore the complete Figma design system file below.