13

Recently, I came across (for the first time) Stacks and the site https://stackoverflow.design from this announcement, Updated comment flagging - Supporting the new Code of Conduct.

it's been brought in line with Stacks, the CSS & pattern libraries for the Network

May I know when was Stacks and its concept website (https://stackoverflow.design) launched? And were there meta posts or blog posts detailing this?

1 Answer 1

12

The short version:

Stacks is the latest version of a design system that's existed in some form at Stack Overflow since September 2014.

The Stacks website was launched in early November 2017.



The long version:

While it may seem that Stacks appeared recently, it's been a work in progress for us since September 2014. Initially codenamed Jam, the system was created as a proof-of-concept for the Stack Overflow Talent project. It was managed by myself (a Senior Product Designer at Stack) and two engineers: Jon Chan and Mike McGranahan.

At the time, design systems were still catching on within the industry at large. There were seen by many as a luxury—not as a core tool. We met the same resistance internally as well. Jam's purpose was to show how a documented design system could help a team complete projects quicker and create more consistent user experiences.

By the summer of 2016, many on the Design team here were seeing the value a well-documented design system provided. Yet if we were going to convince the broader engineering team, we needed to show it could help on Stack Overflow and Stack Exchange. Our biggest hurdle was the CSS for Stack Overflow and Stack Exchange. It had grown over the years into such a state of disarray, that any attempt to update something caused bugs to show up somewhere else. After many failed attempts trying to update various elements and components, we realized we needed a new approach.

We spent the rest of 2016 and early 2017 documenting existing styles across our main projects. An effort largely handled by myself, Senior Product Designer Paweł Ludwiczak, and Creative Director Kurtis Beavers, this allowed the team to at least see how much our styles had diverted across our projects.

Typically when a design system launches, a complete product redesign seems to accompany the effort. The task of replacing old code with updated code is so arduous, that many decide it's better to abandon the project and start over. Given Stack Overflow's business focus at the time though, this wasn't an option for us. We needed to figure out how we could implement a design system without it conflicting with pre-existing code and making sure everyone on the engineering team agreed with our approach.

That took some time.

By the spring of 2017 we had documented enough to know where we should focus our initial efforts. We took all the lessons we learned over the previous 3 years and started over with a new design system called Stacks. This would seek to not only document UI elements and components, but also provide further guidance about how components should be used, properly interpreting Stack Overflow's brand into UI, email, copywriting, and general user experience approaches within our products.

In April 2017, we officially organized into a formal team. Though still a side project, we started committing to monthly goals like other product teams. Senior Product Designer Aaron Shekey, Senior Product Designer Ted Goas, and Design Developer balpha joined Paweł, Kurtis and myself to help with the effort.

Over the summer and fall of 2017, we focused on getting core elements and components into an initial release. Our trial run for Stacks was the Stack Overflow for Teams project. A somewhat green field opportunity for us, it helped us learn where the system needed to be built up more before releasing it site-wide. It also served as a test to see how others outside of the immediate Stacks team used the system and how it helped—or hurt—their ability to quickly build features.

By February 2018, we had seen such a huge success with Stacks's adoption on the Teams project that we added to the main CSS bundle for Stack Overflow, the Stack Exchange Network, Stack Overflow Talent, Stack Overflow Jobs, and Stack Overflow Enterprise. We officially announced this launch internally to the Stack Overflow engineering team.

While we have not reached an official V1 yet, we're close and on track to get there this year.

The Stacks website (https://stackoverflow.design/) has existed as long as we've been working on the project. Before anything can be officially added into the system, it must be correctly documented. The custom domain has been in use since November 2017.

No blog or meta posts were shared about Stacks launching because 1) we're still not quite at a V1 yet and 2) we didn't think there would be much interest in a niche item like this.

4
  • "we didn't think there would be much interest in a niche item like this." - There is, however, a niche community around pattern libraries. Have you considered adding the site to styleguides.io? Commented Aug 8, 2018 at 17:18
  • 4
    Once we're closer to version 1.0, I'd love to do this. We routinely look at those sites for inspiration, so I'd love to see Stacks alongside it. ✌️
    – Aaron Shekey Staff
    Commented Aug 8, 2018 at 17:44
  • FYI all instances of JavaScript on stackoverflow.design/product/guidelines/using-stacks are not properly capitalized; the s in JavaScript should be capitalized as well.
    – TylerH
    Commented Aug 8, 2018 at 18:01
  • 1
    Thanks for the detailed answer! Stacks looks awesome; I might even use Stacks for my own projects, looking forward to V1! Kudos to the team for all the hard work in conceptualising this!
    – Panda
    Commented Aug 9, 2018 at 2:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .