Design Systems

July newsletter

Your monthly update on design at scale across Sprout.

You might notice that the newsletter has gotten a fresh coat of paint! The team spent some time this month revamping the tools and processes we use to create our newsletter so that we can deliver a much nicer reading experience. A big thanks to Sundeep Malladi for helping us get setup with our new workflow!

Since we're now officially halfway through the year 😅, we are going to use this month’s issue to check in on the health of our design system. Without further ado...

State of the union

Checking in on our design system, how it has grown so far this year, and where it’s headed next.

Where we’ve been

The team began this year with an offsite where we re-established our team identity, set a mission for 2020, and developed a handful of program areas that have served as “epics” for our work over the past six months:

• Tooling
• Maintenance
• Research
• Collaboration

I’m going touch on each of these program areas to recap the efforts we have made towards our goals, but first I thought I’d share a few quick numbers to summarize our work:

Tooling

While investing in custom tooling is expensive work for our team (in both time and effort), it often pays off the most in the long run. I am happy to say that we have made a lot of progress here this year.

First, we invested heavily into our new design tool: Figma. Near the beginning of the year, we introduced a new process for managing icons in our system that eliminates the need for front-end developers to manage files manually. Now, our icons are synced from Figma to code automagically.

In addition, we shipped a custom Figma plugin that lets designers generate the project files, resources, and cover sheets they need to start every project.

We also began laying the foundation for responsive web experiences in the Sprout application by building responsive tooling for developers. This includes a set of standardized screen sizes, as well as responsive features baked into all of our components which make it easier than ever for developers to build responsively.

Maintenance

A majority of our work during the first half of the year has been focused here—improving what already exists in our system. After shipping Sprout's design refresh at the beginning of the year, Seeds was left with a lot of content that no longer reflected the reality of our products.

I’m happy to say that we made a ton of progress on these goals. Here’s just a few of the content improvements we’ve made so far this year:

• Most notably, the Resources page got a major refresh, and is now the one stop shop for all the apps, tools, and assets you need to be creative at Sprout.
• Thanks to contributors from our marketing and brand creative teams, our Photography and Video guidelines have been updated to reflect our latest processes.
• Our patterns for products in the Analytics zone have been refreshed with new pages for Charts, Data states, and Data visualization.
• We also improved lots of developer documentation, including rethinking our Theme and System prop pages so that developers always have the information they need at their fingertips.

Research

The team has averaged 1 user interview per week over the course of the past 6 months, which means we’ve spent a lot of time getting to know our users and how our system is/isn’t working for them.

Most of this research has been used to plan and inform the 2 major projects that we will be working on for the remaining half of the year (keep reading to learn more about those), but we’ve also used it to make countless quality-of-life improvements to our system as well.

Overall, our goal so far this year has been to make research more of a routine and less of a dedicated program area at all. Bill Foehring, Senior Product Designer on Design Systems, has done an excellent job at leading the work to establish a research practice for our team. Thanks Bill! 👏

Collaboration

Earlier this year the team expanded our residency program with the welcoming of Jules Simplicio, our first designer in residence. Jules did a ton of great work during their time with us, including introducing the Breadcrumb component and building our first custom Figma plugin since adopting the tool at the beginning of the year. Read more about Jules’ work in the April issue of our newsletter.

Since residencies typically require a lot of hands-on pair programming and designing, we have not immediately continued the program due to everyone now working remotely, but this is something we’d like to explore now that we are all learning how to work together remotely more efficiently.

Most of the work for this program area is scheduled to happen over the next two quarters. Keep reading for a sneak peek at what you can expect to see from us here in the near future.

Where we’re headed

Now that the team has caught up on many of our maintenance goals, we’re shifting our work back into innovation and growth mode with two major projects that will be our focus for the rest of the year. I'm super excited to give everyone a sneak peak of these projects today.

Collaboration model

Over the past year, we have increasingly realized that a successful systems team is primarily service-oriented. While our product teams design, architect, and build amazing solutions for our customers, Design Systems works behind the scenes to make their jobs easier—building components, writing documentation, consulting on global experiences, and developing products and processes that help our teams work better together.

While our team has been operating under this premise, it’s clear that we are missing the necessary structures to to help creators at Sprout (that’s you!) take advantage of all of the services that our team has to offer. To help with this, we created a service blueprint that outlines the user journey of contributing to our system:

A screenshot showing the service blueprint for contributing to Seeds. You can view the full blueprint in Figma.

This blueprint maps not only our user's journey, but also the actions and processes that happen to support that user (both visible and behind-the-scenes). By mapping everything out, we were able to easily spot the gaps in our current model.

The goal of the Collaboration Model project is ultimately to fill those gaps. We’ll know we’ve succeeded when our users all feel like they have a clear sense of how to contribute to Seeds and work with our team, or they have the resources needed to learn how at their own pace.

How are we going to accomplish this goal? We’ve outlined a series of milestones that will help us get there:

1. Surfacing content status in Seeds. It’s important for Seeds to be a trusted resource, but it’s also important for our products and best practices to constantly evolve. Inevitably, this means that not all content in Seeds is as healthy as the rest. This work will give users a clear way to understand the health of any given content in Seeds.
2. Creating a unified intake system. A design system functioning at its full potential is a great agent of change, empowering everyone to engage the system and have the system engage back. We want to increase Seeds’ role as a catalyst of change by creating a process that allows our users to tell us directly what should change about the system. We also hope that this process will help us tie requests to potential contributors, so that domain experts can improve our system in ways the core Design Systems team never could.
3. Developing a prioritization framework. Once we understand what needs to change in our system, we have to figure out how to prioritize those things. We imagine a framework that not only takes into account upcoming product roadmaps and the bandwidth of the Design Systems team, but also the needs and wants of our users. In fact, we expect users to have direct input into this framework.
4. Communicating our model. Finally, we’ll be creating collateral and campaigns to communicate our new model to the organization, as well as for onboarding every new employee at Sprout. Our work here will ensure that anyone at Sprout can learn how to contribute to our system and work with our team.

You can expect to start seeing the results of this work soon—the first milestone will be shipping in just a few weeks, and will aim to give users confidence and clarity about the health of all of the content in our system. Keep an eye on #announce-design-systems for the launch announcement!

Redesigning Seeds

Seeds was originally designed and built in 2018 as our team’s first attempt at a centralized hub for creatives at Sprout, and since then we’ve learned a lot about our users and how they interact with our system.

We want to take those learnings and holistically re-integrate them back into our system. That means that this year, we will be redesigning Seeds from the ground up to better serve our users and our mission as a company.

The first step in this project will be reconsidering how we organize our system, including the taxonomy and information architecture of the site. The team has already kicked off this phase and we are currently in the process of exploring new ways of organizing the wealth of content that Seeds has amassed over the past two years.

A screenshot showing just a few of the many sitemap explorations being done by the team.

In addition to restructuring the content of our system, we’ll also be focused on a enhancing the user experience of our system by focusing on some of the needs surfaced through our research this year:

• Content design. When we first built Seeds, we didn’t have a clear sense of how the content would evolve or grow. We’ve learned a lot since, and we plan to redesign each type of content in Seeds to serve the specific needs of that content. No longer will writing content look or function the same as engineering content.
• Personalization. Everyone at Sprout uses Seeds differently, often depending on their discipline or the type of work they’re doing. What if Seeds understood your role within Sprout, and offered you exactly what you need when you need it?
• Integrating our tools. Seeds was originally created before our present-day component library really existed. Likewise, we did not adopt our new design tool, Figma, until this year. What might Seeds look like if it were designed with these tools in mind?

The process of redesigning our system will take some time, so expect to see this work happen incrementally over the next two quarters. And expect to hear from the Design Systems team during the process! We’ll be talking with many teams during the process to ensure Seeds continues to represent them effectively.

Our team is so excited about what the rest of the year has in store for Seeds. If you’re interested in learning more about our work, collaborating with us, or if you have any feedback about any of the work we’ve touched on here, please don’t hesitate to reach out! You can email us at design-systems@sproutsocial.com or find us on Slack #design-systems.

Have questions, feedback, or ideas for the Design Systems team? Send us an email or check out our wiki page to get in touch and to read past issues of our newsletter.

If you would like to unsubscribe from this newsletter, please send an email to design-systems-newsletter+unsubscribe@sproutsocial.com.