Penske had a selection of colors and logos, along with a variety of logistics, fleet and rental products that used them the in a variety of ways. A few of their designers attempted to create a PDF style guide, but they didn’t have a design system or leadership support to work on one. They were also heavily invested in Adobe XD well after the announcement of the Figma merger and needed help transitioning.
Penske wanted a single system for their internal, external, and consumer products that was as uniform as possible while still being flexible enough to encourage exploration and innovation by their product designers. While the consumer-facing products shared a common look & feel, the enterprise products had much looser requirements that only defined the color palette and typography. Finally, the internal products were basically the wild west in how they could look and behave.
Client
Penske
Responsibilities
Discovery, Visual Design, UX Design, Front-End Development, Documentation, Training
Approach
After reviewing the products and speaking with the different product design teams to understand their needs, we decided on a tiered approach: at the very top sat the Foundations library that contained the Penske color palette as variables, the typography styles, as well as the responsive grid and spacing variables.
Below the Foundations library, the system forked into the Enterprise and Consumer component libraries. We originally tried to establish a shared library above these, but the differences between the heavily stylized, loud & proud Consumer system and the Material-inspired Enterprise system meant there was almost nothing that truly belonged there. Once we established that the enterprise & internal stacks were different from the consumer-facing tools (so they would never share something like a Storybook instance), it was an easy decision to make.
Below those libraries lived the individual libraries for product-specific components. The entire structure looked like:
”“Leon has been instrumental in launching the next evolution of design at Penske. His guidance, candor, and deep knowledge of design technology have been essential in our transition to Figma as the core application our teams use for product design. As we continue to develop our design system, Leon has been invaluable in helping the team validate our direction, avoid pitfalls, and improve processes, all of which showcase his significant experience and subject matter expertise."
Alan WasemLead Product Designer
Execution
Once the structure was established, we began auditing all of the patterns and components to understand how they were used, where the gaps between products existed, where gaps between the original designs and the implementation existed, and finally where we had opportunities for improvement.
One of the best things about the Penske Design Team was their willingness embrace change, jumping right into the deep end of working with Figma. As their understanding and capabilities matured, they began asking for more advanced features like variable-based responsive components, vertical and horizontal responsive spacing, and of course a responsive grid that just worked with all of the above.
I like to think we delivered.
”That’s so effing cool!
Mark WhiteProduct Designer - in reaction to the Responsive Grid demo
Utilization & Reception
After a year of work, the design system is currently:
• Supporting 11+ product teams
• Leveraged by 15+ products
• Utilized at ~1,600 inserts per week
But what does the design team think of it?