Shift Design System
Problem
Shift had a some components, but none of the foundations design systems run on. Colors were used inconsistently, elevation was a roller coaster, and existing components were difficult to use. It had no motion nor dark mode for web. Our "warning" orange failed WCAG AA. And worst of all, the documentation site wasn't digestible, it was a text heavy info dump of technical details.
Solution
Build the foundations, then modernize everything on top of them. I contributed to Shift's first Confidential and redid our orange to pass AA. I designed our first Confidential system, Confidential for web, and I'm working on our first Confidential. I've also designed, redesigned, or co-designed Confidential components including Confidential, Confidential, Confidential, Confidential, and more.
Shift Design System
2022 – Current
Penske Logistics
I'm the Design System Lead for Shift's consumer-facing products. I prioritize and carry out much of the team's component work, set the standard for component acceptance criteria, and gather feedback from the people who use the system.
Shift Design System
2022 – Current
Penske Logistics
I'm the Design System Lead for Shift's consumer-facing products. I prioritize and carry out much of the team's component work, set the standard for component acceptance criteria, and gather feedback from the people who use the system. Plenty of the work has happened outside the job description too: writing internal guidelines for adopting Liquid Glass and Material 3 Expressive, teaching development executives and directors how Figma Dev Mode works, and redesigning Penske's map style in Google Maps.
Problem
Shift had a some components, but none of the foundations design systems run on. Colors were used inconsistently, elevation was a roller coaster, and existing components were difficult to use. It had no motion nor dark mode for web. Our "warning" orange failed WCAG AA. And worst of all, the documentation site wasn't digestible, it was a text heavy info dump of technical details.
Solution
Build the foundations, then modernize everything on top of them. I contributed to Shift's first Confidential and redid our orange to pass AA. I designed our first Confidential system, Confidential for web, and I'm working on our first Confidential. I've also designed, redesigned, or co-designed Confidential components including Confidential, Confidential, Confidential, Confidential, and more.
Design System Lead
Directed effort, built components, documented and evangelized the system.
UI Designer
I designed the visual and interactive experience of using the product to spark delight.
UX Strategist
I mapped out the user journeys and defined product roadmaps based on business and user needs.
Confidential
refactored components
500+
tokens managed
4
foundational system firsts
Penske’s design system, Shift, was in a rough spot when I joined. The company had recently moved from XD and adoption of Figma, let alone a Figma design system, was challenging.
I worked across teams to understand our needs, prioritize the components with the most impact, and increase velocity by taking smarter advantage of Figma’s features.
I currently lead the consumer-facing side of our design system and build components and tokens for the entire business.
Component Quality
I set the standard for what component acceptance criteria look like, utilizing properties, compliant tokens, and theme support.
Setting priorities
I prioritize a lot of the team's component work and build a large share of it myself.
Team Coordination
Since components need to work across a wide variety of products and themes, collaboration from the beginning is a must.
Confidential Material Blocked
Great components start with great foundations.
Confidential Material Blocked
A running list of the components I've worked on with a team or by myself.
Confidential Material Blocked
Visual Direction
I pushed Penske's consumer-facing brand to be more friendly and confident.
Larger, softer shadows, with glows added as a new layer of emphasis so surfaces read as distinct layers.
Additional work
Liquid Glass and M3 Expressive
Wrote internal guidelines for adopting Apple's Liquid Glass and Google's Material 3 Expressive.
Figma Dev Mode mentoring
Mentored development executives and directors on how Figma Dev Mode works, closing the gap between UX and dev.
Penske map style
Redesigned Penske's custom map style in Google Maps.