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