Problem Statement
Build a design system for three products for an internal venture studio that abides by some style rules from within the parent Fortune 10 company but at the same time feels unique.
Team Dynamics
Startup Speed
The first challenge was to set rules and standards with visual elements for the design system but at the same time craft tangible visuals for the overall mood of layout for undefined future requests of a vehicle shopping experience that has only ever been done once successfully in the world.
Adopting Brad Frost's
Atomic Design Method
Starting small and expanding to more sophisticated components. Pulling from as few sources as possible.
Atoms to Molecules to Organisms.
A challenge and problem solve
Synchronous communication
with asynchronous innovation
The venture studio trusted product with the visual elements and allowed the time to get the pieces in order. Because our team had three product designers with different design backgrounds and each were building for a different platform we were losing a sense of design unification across the website, web portal and app.
Therefore, I called it out to the team and suggested a weekly time for in person updates. Yes, Figma allows for notifications of new published components but without sharing our design updates to the other two designers we could be creating rules that may work for one platform but isn't setting up the other platform for future success.
An API for easy and consistent handoff
Tailwind CSS Integration
I would join meetings with dev ensuring proportions and overall handoff was going smoothly. We had to be responsive ready. I sat down with our dev and agreed on the current years most popular dimension sizes.
1920x1024 - 20% of all Desktops, 768x1024 - 12.98% of all tablets, and 360x640 - 6.11% of all mobile.
Selling the rules through
Documentation
Making sure we educate for cross functional teams, set guidelines for implementation to ensure consistent experience for our user and it all comes from an easy well labeled source of truth for ease for its designers.
Each element had its own categorical rule set.
