Stack Overflow

Stack Overflow is the largest, most trusted online community for developers to learn, share their programming knowledge, and build their careers, with over 100M montly active users.

While at Stack Overflow I was the lead designer for our Stacks Design System. I worked directly with an amazing team of three engineers and I loved every second of it. I also consistenly collaborated with the many stacks stakeholders as well as a design team of 15.

Background

The Stacks Design System has been in existence for approximately 5+ years, but only once did it have a designer supporting it full-time. It was a product that was mainly supported by a few engineers. We were more or less going from zero to one.

Stacks Stakeholders

Before conducting my initial research, I needed to understand who the current stakeholders are. This information would inform my research efforts and help me understand who I should focus on initially interviewing. It will also help me understand where there are gaps in our current processes.

Stacks Research & Discovery

I conducted numerous interviews with stakeholder management and engineering and design consumers of the system. I wanted to get an idea of where to focus my efforts. I needed to know the pain points and how I could quickly show impact and value.

Governance

It became clear there was a need for a solidified governance process. We want to be transparent. We want to make sure that all stakeholders feel involved in the system. I knew people were invested, based on the research I had done and the previous conversations I had.

Intake & Requests

It takes a village to build a successful design system. We want team members and stakeholders to feel empowered to contribute. We want to do our best to make this process as smooth and easy as possible. Our team collaborated on an intake form that creates an issue in our backlog for myself to triage.

Inventory Audit

I received a lot of feedback regarding the current system, pattern library, documentation and UI kit. With more defined process in place, it was time for me to get a better idea of what exists, what doesn’t and where I could make the biggest impact quickly.

Parity Between Design & Code

Stacks has existed for years. We had dozens of components released and represented in our pattern library, however, most of these components did not exist in our UI Kit. Figma was a mess. To allow the team to work more consistently and efficiently, we needed to reach parity between our library and UI Kit. We also need to make sure components are built in a clear, modular, consistent way.

Figma Refactoring

I had received so much feedback from the team regarding the need for Figma to be refactored and cleaned-up. My focus was first on getting the most used components (based on library analytics) improved, so they could be used to build quickly and efficiently. Improved doocumentation would come after.

Testing

The Stacks system is leveraged across multiple teams and products. It’s important when making updates and changes to already existing components and assets that we don’t introduce negative changes and break things. To avoid this, I implemented testing guidelines for the team to follow. It was always recommended branching and reviews when making changes, a process that was new to many on the team.

Engineering Consumers

On the engineering side, our team had been doing a lot of work to drive our tech stack forward and modernize it. Multiple new Stacks implementation strategies were being collaborated on across different guilds. Our team was driving these efforts. It was time to reconsider how our engineering stakeholders interact with our system.

Stacks IA

We no longer had one “product”. We introduced new ways to leverage and implement components from Stacks. Because of this, we had to restructure the IA of our system. This also led to documentation and guidelines being abstracted out from each component and living separately, a very welcome change by all.

New Components

With the introduction of more modern frameworks, came the introduction of more modern components, with increased interactivity. I had the pleasure of adding two new, larger components in my time with Stacks.

Documentation

I had received a lot of feedback and seen a lot of questions around context. Our UI Kit allowed the team to work more quickly and efficiently, while ensuring solutions remain consistent, however, an important piece was still missing: robust documentation. With the changes to our information architecture, design guidelines will be as important as ever, as they are being abstracted and decoupled from any implementation strategy, as they should be.

Tokens

Stacks was not leveraging tokens. It was a missing piece to the puzzle that was very needed. When it came to our many or our design foundations and perceptual patterns, there were inconsistencies throughout the products. We need to take a huge step back and properly lay this foundation to set ouselves up for future success.

A Transparent Process

As our team makes updates and progresses the system, it’s important our stakeholders are aware of the updates. Every two weeks our team would hold a “Showcase” displaying the work we completed during that sprint. Any and everyone leveraging the system was welcomed to join. This created a sense of community between our team and the teams we were helping to support. It was done in video format to allow conversations to be had.

Measuring Success

In some respects, measuring the success of your hard work on a design system can be difficult. The results often feel somewhat anecdotal, however, there are some tools to consider to allow you to see how you are doing. If you are at least asking the right questions, you should at least find yourself moving in the right direction.