Case Study: Analytics (2017)

The Analytics team is responsible for Sprout Social's for Reporting and Social Media Listening products. I was embedded on the team in from 2015-2017 and focused on the goal of integrating Sprout's component library into the team's workflow. During my tenure, the team introduced more than two dozen new components into the component library including a new responsive layout that eventually became the app-wide standard for all of Sprout's products. This case study covers my work from January-December 2017, a period of rapid growth on the team during which the company went to market with a new product.

In early 2017, Sprout committed to hiring dozens of engineers and designers over the course of the year. Our product focus was on increasing the conversion of trial users and the development of new features that would reshape the company's product offerings. The other designers on my team and I realized that in order to prepare for this growth, we first needed to tackle our dated grid layout, which had been a lingering issue for years. The layout in question was built in late 2010, prior to the phrases, "Responsive Design" and "Mobile First" becoming part of the web's standard vernacular. Our existing layout was playfully referred to as a "graveyard of good ideas" because of the many failed attempts to improve it without starting over so we knew what we were getting into at the onset of the project.

As with all large-scale design changes, we knew there was a major risk in abruptly changing the layout of an app that is depended on daily by tens of thousands of customers. We began the project with research–our UX focused designer gathered usage statistics from customers and trial users to identify the types of devices they used and the browser widths that they actually used to view our products. From there, we formulated a plan to build the new layout. We initially focused on optimizing for the most common browser widths and platforms discovered during the research to maximize the benefit. With an end of Q1 deadline and years of tech debt, a true Mobile First approach would not be feasible for the project, so we devised a plan to point mobile users to Sprout's very capable Mobile apps for the time being and kept the focus on use cases for desktop browsers and tablets.

Rough Draft of Browser Research Document
Old layout with broken Responsive Experience
Overview of UX Research document / Broken Responsive Experience

With the research in hand, I ran an all-day design session with my teammates. We discussed technical approaches and prototyped a proof of concept. After the meeting, I gathered the input, brought the findings back to the UX designer and created a Design Doc, which I presented to the product leadership team, CCO and CEO. We decided to initially implement the new layout on the Reporting squad since I was already on the team and their upcoming project would greatly benefit from it. I worked with my team's engineers, and three weeks later, we were able to turn the prototype into a beta, which was tested by several hundred of our customers.

Screenshot of Racine 1.0, circa November 2015
Beta version of the "Fluid Grid" layout in action.

Also in Q1 of 2017, Sprout's Reporting team created a new team to build a Social Media Listening product. Listening enables customers to compose queries based on Standard Search Operators. Using Twitter's "Firehose", we are able to get comprehensive real-time and historical public Twitter data, which is used to display sample result sets that can then be turned into customizable, curated, exportable insight reports. With the plethora of possible options for queries and data that could literally range from 0 to 100 million results, we needed to optimize our use of space and cater to both advanced users who might already be familiar with the space as well as first-time users.

I worked with a small team of two other product designers and a front-end engineer for several weeks iterating on ways to make the abstract concept of "Building a Query" into a workflow that was intuitive enough for new users to understand how to use it and powerful enough for power users to make the most of its potential.

After exploring various concepts that were based on the raw syntax of a query, e.g., Chicago Pizza OR Chicago Casserole:images -Pineapple, we settled on an approach that would guide the user through one phase of the query at a time to reduce frustration and avoid decision fatigue.

During the beta development phase, the team had weekly calls with several customers, initially focusing on understanding the customer's Listening needs and later focusing on their experience using our product. From there we were able to refine our prototype to clarify the interactions and optimize the workflow focusing on what customers are likely to find valuable.

Walkthrough of the Listening Query Builder Prototype


As of January 2018, the fluid grid work has been adopted by the majority of Sprout's product teams, with the remaining teams currently slated to adopt the project in upcoming work.

Sprout's Listening product launched in October, 2017 using the fluid grid and the Query Builder outlined above. Early adopting customers noted that one of the primary reasons for going with Sprout's offering over the competition has been the simplicity and thoughtfulness of the Query Builder.


  • Role: Fluid Grid Project Lead, Senior Designer on Query Builder project
  • Project Dates: 1/2017 - 10/2017
Thanks for reading! Have questions, comments?
Feel free to reach out.