🔗 Sections: Contributing to the design system | Project details | Taking it over the finish line | Feedback & results


Contributing to the design system

The past contribution strategy was based on partnerships between the product designer and Design System designer which took time away from a product's existing roadmap and also required significant project management on the part of the Design Systems team. To further promote contributions, we created a new strategy that gave more ownership to the Design Systems team.


Project details

📄 The overview

With the creation of a new streamlined contribution process, my project roadmap was focused on supporting the pilot program of vetted components being contributed back to the Lyft Product Language (LPL).

🏰 The strategy

With each component contribution, I focused on the quality standards that are built into the LPL to elevate the product designer's work. And from their use case, help create usage guidelines to be used across the entire product.


Taking it over the finish line

Quality assessment

⬆️ Back to top

The first review that I perform on the product designer's component is to ensure the LPL attributes are being used which includes Color, Typography, Elevation, and Spacing. From here, I perform a check for design patterns that apply to similar LPL components. This is especially important when the component being contributed will be applied to both Native (Android and iOS) and Web platforms. Any inconsistencies along with design recommendations, I make sure to review them with the contributing product designer to ensure full transparency as well as promote a collaborative environment.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/498c1786-764e-4551-85e0-76f044ac9c7b/CS02-Large05.png

Quality review for the Inline Message Card component contribution.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/84e4d0f8-5de9-4ff0-aaa1-d8faa00c1cf0/CS02-Large06.png

Quality review for Web Global Header component contribution.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0229dce7-69f8-4e5c-a3ec-629f4c03cabf/CS02-Large07.png

Quality review for Segmented Control component evolution (adding Detail text).

Component definitions

Once the design tweaks have been approved by the stakeholders, the real work begins to start to define the component in its entirety. From a design system standpoint, we consider things like:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/94530485-2334-48d9-9167-6baa13192076/CS02-Large08.png

A few of the Inline Message Card component definitions.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9554f976-bc63-4455-97f6-481f3a535d8c/CS02-Large09.png

A few of the Web Global Header component definitions.