My First Week on a Design System Project
Returning to work after a 10-year hiatus.
By Kathleen Watkins Hoff — 10 June 2022 at 04:53:00 pm
Wondering what you need to know about what it’s like to work on a design system project? I was, too. In my case, it was a little bit of don’t worry, I got this! I’ve done design patterns before! and a lot bit of you don’t know what you don’t know. Going into my first week I had an open mind. After working with Yahoo! for many years, I was familiar with the value of design pattern libraries since they were one of the first teams to ever share theirs publicly for the good of the community, but I was curious to see how these evolved into a design system. As a visual designer, I remember delivering pixel-perfect mockups with magenta-colored spec notes in the margins to developers.
Instead, what I found was a richly collaborative process that wasn’t burdened with the high-stakes milestone checkpoints of the distant past where work had been chiseled to perfection before another human laid eyes upon it, but it also wasn’t just a bunch of rote daily check-ins from the recent past. The design system process emphasized more frequent and casual check-ins critically supplemented by sessions where the team would work together to build things (components) in real time. Working on the same file. A lot. Whoa! I learned this was called The Hot Potato Process 🔥🥔. This was often woven into meeting-speak as a verb, such as “When we were Hot-Potatoing yesterday, we found a better way to do this” or “Hey, do you want to Hot Potato that issue this afternoon?”
On this particular project, I was entering the process at a midpoint where the team was already in a groove and had just successfully shipped their first component. Thankfully the group was effortlessly welcoming and I acclimated quickly due to the friendly rapport that had already been established among them. During team introductions, Dan asked everyone to add one fun fact about themselves, and this is me from the future telling you that every team introduction ever going forward needs to do this. It is an effective shortcut to help people relate to each other better, not to mention really entertaining. Did I expect to meet someone who had been featured in a Guitar Center ad or who has a hobby of “building keyboards?” Nope, but I did!
The week I started, the team was celebrating the victory of shipping their first component, but then tip-toed into nervousness about productivity going forward. Kind of like when you’re hosting Thanksgiving, and the mashed potatoes are done and looking on-point and you’re like, Wow, did I really just make that?! And then you look at the clock and realize but OMG I have five more dishes to perfect now? That was where they were at.
Having the advantage of being new to the process meant I was afforded a different perspective. It seemed that the design system evolution could not be measured in equal increments like an analog clock ticking along at uniform intervals. Rather, it appeared more like the fascinating process of how the natural world develops. A sturdy foundation is focused upon first and foremost — the deep roots of a tree working diligently out of sight underground, intelligently building the infrastructure of its adult self until suddenly one day it acquires the superpower of velocity and pushes forth out of the ground. A catapult moment that can be observed, and where progress can be measured. Shipping the first component was a catapult moment. The initial burst of velocity is what gets the whole wheel turning, after that the process speeds up with efficiency and knowledge. Sure enough, as the weeks progressed, the components shipped out much faster and with greater ease.
Thankfully, any trepidation could be measured by the Whelm Scale, which simply assesses the amount of overwhelm each individual contributor on the team is currently feeling. This was done round-robin style openly with the group, and it was kind of like quantifying the old adage of the squeaky wheel getting the grease. People dealing with issues with a higher whelm score naturally got more attention and helped the team prioritize and focus next steps.
If a conversation morphed into a mega-debate, a great way to step back and gain perspective was each person’s honest self-assessment of fucks given. In other words, am I arguing about something that I don’t actually care that much about? (This is brilliant life advice, amIright?)
With so much collaboration and momentum and progress, the team arrived at a natural point where it was clear that it would be beneficial to better identify each person’s role on the team. An exercise had already been done early in the project where people self-identified their strengths and the rest of the team layered on their +1’s and thoughts. But now that a few weeks had passed, not only did they all know each other better, but they were contributing in unique ways. This is when Dan introduced their Dungeons and Dragons names and it was every bit as cool as you are imagining. Wouldn’t you like to work with ‘The Stargazer’ and ‘The Magician’? Heck, yeah! Giving each team member an overarching mission and character definition helped them get better at what they were already doing. And it sounds so much more inspiring than Level II Art Director.
However, if I had to reveal one thing I learned based on prevalence of usage alone, it’s the beauty of the McDonald’s Theory. This genius concept allows anyone to boldly suggest an idea under the umbrella safety of labeling it as “McDonald’s Theory.” The premise is that in order to avoid getting stuck on making a decision such as where to eat lunch, you start off with any choice, like McDonald’s. This gets a reaction that you can use to advance the conversation. Much like The Hot Potato Process, this phrase is often used as a verb such as: “Hey, I’m just going to McDonald’s Theory this and suggest we use 16 colors in the palette as a starting point.” I could see how effective this was with the team because everyone used it all the time, and everyone understood and accepted it. Not many things can boast a 100% adoption rate!
Sure, there are a lot of other things I could have highlighted about my first week on a design system project, like apps and services: FigJam + Zeroheight + React + Storybook + Github + Jira + Netlify + Joyride + Loom + Lottie + Visual Studio Code + and so many more, but I think that’s the difference between textbook learning and hands-on learning. And besides, what makes a design system project so special is that it is about changing the process of how designers and developers work together, and the process is nothing without communication.