D/UX

View Original

Creativity And Deep Design Insight For Modern Application Monitoring Platform

“DesignMap came back to us with great ideas,” concludes Rau. “When we implemented their revisions to the UX, we got immediate positive feedback from our customers.”

The cloud is expanding. Cisco’s 2014 Global Cloud Index reports that by 2018, 76 percent of the 8.6 zettabytes that move through global data centers annually will come from the cloud. (1,2) The applications generating this huge amount of data include hundreds and even thousands of individual, distributed components.

Dynamic and distributed cloud applications are the new normal for both consumer and enterprise software. SignalFx provides the monitoring solution that developers need to proactively identify issues across a complex, distributed environment.

To monitor applications in this complex environment, developers need smart, efficient and effective analytics. SignalFx, launched in mid-March of 2015, offers an interactive, system-wide view of web applications and infrastructure data. We worked with the company from its earliest development stage, getting a first-hand experience of how SignalFx allows customers to find meaningful patterns among the signals generated by dynamic, distributed applications.

Establishing a Product Foundation Through the Lens of a Trusted Design Partner
SignalFx founders knew that they wanted design as part of product development from the start and they met with several design firms, both large and small, before hiring DesignMap. 

“The larger firms we talked to had very defined processes that we weren’t sure would work for us,” explains the company’s co-founder Karthik Rau. “We wanted more creativity and deeper insight than that. DesignMap’s seasoned designers had the experience and inventiveness we needed to help establish a foundation for the product.”

The first phase of our engagement with SignalFx spanned several months, during which we formed a tight partnership with the company’s engineering team working with them both on- and off-site. 

“The level of collaboration on this project was a new experience,” explains DesignMap’s project lead Rob Gardziel. “We’ve worked on-site with other clients, but not as intensively as we did with SignalFx. Being at their offices once or twice a week was critical to this project.”

“Our work together was a highly engaged and interactive process,” agrees SignalFx’s Rau. “DesignMap felt like an extension to our team.” 

The Art of Visualizing a New Product

Early concept sketches put pictures to the features and functionality described to us by SignalFx’s team.

Our starting point was completely “blue sky:” SignalFx had no customers, no users and no set features. The company’s complex, leading-edge technology and radically different approach to monitoring required a lot of effort to understand. DesignMap’s first task was to interpret the goals and intentions for the product through our designer’s communication lens. 

“We expended a lot of energy ramping up on what SignalFx was trying to do,” explains Gardziel. “Initially, it was a struggle to talk about the product in a way that resonated with us. We kept at it, creating scenarios of realistic user interactions so that we could start visualizing the application.

“It was in the art of the explaining and interpreting that everyone began to understand what the product was,” he concludes.

Working closely with engineers, DesignMap’s team helped to define the product’s workflow, created wireframes to visualize concepts and worked on design as prototypes came together. At times, this work included white board sessions during which designers would sketch and engineers would write code showing how development would evolve to support UX directions.

Early wireframes of SingalFx’s charting concept.

Fine Points and Nuances that Impact UX
Creating a charting system for the huge amount of complex, aggregated data collected by SignalFx was a key element of the product design. As we ran though typical use scenarios, new UX elements for the charting system would emerge. 

For example, developers typically use percentile calculations to exclude outliers. By looking at the 98th percentile of a response time metric across a population, they exclude the worst 2% of responses. In some scenarios, users might want a simple way to dump anomalous results (the 2% outliers) to allow a quick picture of application performance norms to emerge. Or, conversely, they might want to focus in on the anomalous 2%. Either way, once we understood how users might interact with this “98th percentile” we knew we needed to support all use cases with design elements that would allow typical users to interact with percentile choices.

Chart concept illustrating easy implementation of performance alerts.

Chart concept showing how users drill down to detailed information on Critical Events.

Fine Tuning Design for Final Release
After three months of work, SignalFx had a solid product foundation, design direction in hand and was ready to hire an in-house design team to start development. 

“We had the skeleton and were ready to get the meat built around it,” comments Rau. “When we put the product it in front of customers, we started getting feedback right away on what was working, what wasn’t and how to make the experience more usable. 

“We started making incremental UX changes based on that feedback, but even incremental changes can have a huge impact on the overall product. At that point, it made a lot of sense to us to bring DesignMap back to work on the UX because they knew us and the product so well,” Rau explains. 

Our design team started this second phase with a complete heuristic review to capture any and all areas of the design that needed attention. Our analysis reviewed consistency, components, visual hierarchy, style and function. 

For each design issue we uncovered, we offered a fix. On the simplest level, we recommended keeping grid design and light box placement consistent throughout the design as well as including both labels and icons on menu flyouts, among other fixes. We also provided style revisions for navigation hierarchy and behaviors (see example below). 

Style change: We recommended reordering drop-down actions to locate primary actions at the top and adding padding between primary actions and potentially destructive ones, such as “delete” or “remove,” to mitigate the possibility of user accidents.

“DesignMap came back to us with great ideas,” concludes Rau. “When we implemented their revisions to the UX, we got immediate positive feedback from our customers.”