How our teams have used system thinking to boost their product velocity and quality.

Sprout began the year with a bang, giving our product a complete design refresh (internally codenamed “Nectar”) which was the result of a huge collaborative effort across many disciplines. While we as a company have reaped many rewards from this work, perhaps the most exciting for the Design Systems team was the opportunity to align our product to the guidelines and styles defined in Seeds, our design system.

Utilizing our design system has a lot of benefits, including the fact that it makes our product much more consistent across experiences. But here at Sprout we believe that design systems are not just about consistency—they’re as much (if not more) about increased efficiency and collaboration, of which consistency can be a result.

That’s why our team was so excited during July’s All Hands meeting when Justyn shared the following slide during his overview of our accomplishments over the first half of the year. Specifically he called out an increase in product velocity and quality, which caught our eye.

A screenshot from Justyn's July all hands presentation.

Learning that this increase in product velocity and quality is being noticed by our executives is very exciting for us. We wanted to get a better understanding of how teams at Sprout are using systems thinking to build amazing experiences for our customers, as well as the other factors that have contributed to these improvements.

We sat down with these folks from our product management organization to see what they think about how our teams are shipping higher-quality work faster than ever:

• Bhargav Kode is the Lead Product Manager for Inbox
• Blake Kurinsky is the Lead Product Manager for Mobile
• Max Page is the Director of Product for Publishing and Mobile

Here are just a few of the things we learned from them.

Measuring success

It’s hard to have a discussion around product quality without understanding what “quality” actually means. Every team and product area has different goals which affect the perception of quality.

For the mobile team, Blake said that “we look at quality in terms of a few different metrics. The first one and the one that concerns me the most is feature usage, or product usage. So, an increase in the amount of daily active users across our mobile applications. A comparison we like to make is: how is our mobile adoption compared to the desktop application?”

That definition of quality begs the question—how have those metric changed since launching our design refresh? “Over the past year we have gone from 28% of desktop users engaged with mobile, to now consistently over the 40% mark,” said Blake. That’s an incredible improvement!

Blake also shared how having a consistent design system has improved his team’s ability to measure their success altogether. “Now that we have gone through and created this system specifically for navigation, that has really helped us measure usage consistently. Because when you can navigate to different parts of the app in different ways, it was very hard to track which ways were being used more than the others. Now that we have a consistent paradigm for launching sections and screens, we can almost pit one of those screens or sections against one another.”

Systemizing the navigation of the mobile apps has allowed that team to more accurately measure the usage of their product, and brought more clarity to their decision making in the process.

The value of a design system

Our design refresh certainly proved that systemizing our user interface has been hugely beneficial for the teams designing and developing our products.

“There’s no doubt that both [Nectar and the design system] help the team go faster,” said Max. “I think it also simplifies decision making in the design process, and helps designers know how to make experiences that they know will be efficient for the front-end engineers to implement.” That certainly rings true with our belief that design systems are best when they reduce collaborative friction.

Systemizing our product via our design refresh also helped to establish more collaborative ways of working. “I think the key thing it helped with was setting us up to have the empathy around the value of components and compliance against components,” said Bhargav. “Because we have gone through the pains of reconciling all of that, and I think there's a lot of respect for that and collaboration around it that wasn't there before. But it’s definitely there now.”

The value of systemization has real impact on business concerns as well. On the mobile team, being able to systemize their interface was a matter of reducing engineering complexity and cost to build new features. Blake shared that “we have a smaller team, and can’t create a bunch of custom components and maintain them,” adding that “we need to leverage what the OS and the platform gives us, and we need to do that consistently throughout all parts of the application.”

The Engagement team has seen a reduction of effort across their product areas, according to Bhargav. “When we have made changes to, say, filtering behavior or search behavior, we have seen that be able to pretty easily apply to the Reviews side of our app. To enable something in Reviews has been much easier than I would expect. That has made it a lot faster for us to scale in both areas of the app.”

Design systems as conversation starters

During our design refresh, all of our product teams worked very hard on creating and solidifying the systems for every part of our products. In the case of the Mobile zone, they were taking on the huge effort of establishing a unified system from scratch. Blake had this to say about the reasons for establishing their system:

One of the things that I had focused on last year, and one of the things that we were looking for in our MGOs was this push for parity and simplicity. And so, whether it was design system related or not, it was born out of the need to minimize the number of different solutions we had for accomplishing the same task. And then really starting to consolidate the visual workflows that we had to accomplish that work, and then implement that into the application.

I asked Blake about whether or not he would do anything different with the mobile design system if given the chance. “I’m really happy with how everything in the system ended up” he said, adding that “we hadn’t had any documentation of what things should look like before, so even if our system isn’t complete or done, the fact that it exists alone is enough of a win for me. The fact that we have it listed means we can iterate on it. When it wasn’t, we just kinda guessed.”

Indeed, this sentiment came up many times throughout these conversations. When I asked Max about this idea he shared that due to the systemization of our interface, “even designers who aren’t technical can tell when an experience is not in line with an existing component, so therefore they should go talk to a front-end engineer.”

Systems can act as artifacts that prompt conversation and collaboration, and clearly those conversations lead to products that are more thoughtfully and inclusively designed.

Design systems only get us so far

While the benefits of systemizing our user interface with Sprout’s design refresh have certainly contributed to increased efficiency, it’s important to acknowledge that systemization is happening in lots of other domains as well, and it all contributes to the boost our teams have seen this year.

Max mentioned several of these projects including a revamped product development process on Publishing. Over the last couple months, his team has templated the documentation needed to create a new feature and do competitive research. This eliminates product managers from being bottlenecks, and allows designers to get a jump start on projects. “This has shaved off weeks of that “nebulous time” at the beginning of a project,” Max shared.

Other zones have also made huge investments in systemization. The teams on Engagement have taken on lots of important initiatives over the past few years to improve their efficiency and product quality. Switching the Inbox to React was a big one. Another was the EonStore project, which was a multi-year effort to systemize the way we store and search for messages in our platform.

Bhargav shared just how important this project was. “EonStore, in itself, took six months to a year. It didn’t happen overnight. But since we did get it done, overnight we were able to think about enabling all time inbox, enabling search, enabling updates to exports. We are now enabled to revamp customer care reporting. It unlocked a lot of things. And there are things we haven’t gotten to yet that it has unblocked, that we want to plan for next year.“

These projects, and many more, have all been crucial to increasing our product velocity and quality on Engagement. Bhargav said that “it’s been a lot of foundational work. Moving to React, moving to Seeds compliance with Nectar, and moving to EonStore were all the core foundational pieces for us to actually then pay the product dividends. Velocity for us has been a result of setting up that foundation.”

A huge thank you to Bhargav, Blake, and Max for taking the time out of their busy schedules to chat with us about the evolution of our products and how we build them. And a thank you to every other contributor who has had a hand in the work mentioned here—none of these improvements would be possible without all of you!

Have questions, feedback, or ideas for the Design Systems team? Send us an email or check out our wiki page to learn more about the team.

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