Sumo Logic Monitors and Alerts 2016 had been a year of innovation for Sumo Logic: we expanded our platform to create an industry-first Unified Logs and Metrics solution. In Jan 2017, we continued to expand our platform by creating Metrics Monitors and Alerts. “Create a monitoring and alerting system within the existing framework to provide users the ability to detect suspicious behavior and notify appropriate parties accordingly.” The Challenge Having just shipped the new Unified Logs and Metrics feature, it was now time for us to build a Monitoring framework from the ground up and lay the foundation for an alerting system that could accommodate increasingly complex settings and customization. The new Monitoring UI would live in the existing Sumo Logic UI framework, and would need to support the ability to alert on Logs in the future, in addition to Monitors. Background The introduction of the new Metrics feature as a key differentiator to the Sumo Logic platform provided users with newfound visibility into their system’s behavior by providing a way to measure their machines’ key performance indicators (KPI’s). Now that they could see into their system, the next solution users needed was a way to monitor these metrics and be alerted when metrics reached a concernedly high (or low) level that required their attention. What is Sumo Logic Unified Logs and Metrics? My Role I led the design of the Metrics Monitors and Alerts feature at Sumo Logic, Inc. I collaborated closely with our cross-functional team of backend engineers, developer, visual designer, user researcher, and product manager. The project commenced in August 2016 and shipped in January 2017. Product Definition I worked closely with our project manager to define the product, prioritize and negotiate features, and establish the vision for launch and beyond. User Research and Experience Design We conducted user research and testing, which we used to inform the journeys, wireframes, prototypes, and design specs I created. Leadership I presented my designs to earn buy-in from executives and stakeholders throughout the project lifecycle. The Approach Agile We followed an Agile process, with daily stand-ups every morning. Design Work Sessions This project required a high level of cross-functional collaboration: developers, backend engineers, product management, and design. I led highly collaborative design-focused work sessions multiple times per week throughout the project lifecycle. This fostered frequent communication and feedback, stakeholder buy-in, and evangelization of design ideas and concepts. Top-Down Design We started with the high-level user goal and vision before drilling down into the lower-level interactions to keep focus on the primary design solution before addressing smaller design details. Rapid Prototyping and User Testing We created rapid prototypes and introduced user testing after every major iteration throughout the project lifecycle. Closed Beta We hosted a closed beta to test the functionality and usability of our designs without the guardrails of a user testing session. User feedback was invaluable. The Discovery To create a holistic view of the alerting use case, I collaborated with internal users, product management, and my design team to run a value proposition and journey mapping exercise that enabled us to represent our users’ pain-points and to create solutions for them. Through rapid prototyping, we then quickly mapped out a high-level end-to-end journey with UI concepts for our 2 newly redefined personas, Melinda and Andre. Reviewing this with our cross-functional team built project momentum and fostered early discussion about multiple aspects of the project: scope, architecture, requirements, design, timelines, and more. To focus on the first release while keeping a conscious inventory of the steps and features that would need to wait for a subsequent release, we used our map of the high-level end-to-end user journey to identify what steps of the journey to prioritize. Soon, we honed in on the user journey for the first release of our product: Team Education Once we agreed on the high-level scope and priorities for the first release of the Monitoring project, we accelerated our education of the Monitoring domain and landscape. We read literature, created a glossary to document nomenclature on which we had agreed, and conducted an extensive competitive analysis. The Vision Create a Monitoring feature from the ground up that allows users to: Create/edit a monitor to measure specific metrics and set criteria for when to trigger an alert to the user Access the Monitors features via multiple entry points within the product, to prevent a feature-silo’ed user experience Specify the notification channel on a per-monitor basis View all monitors at once to check overall system health Lay the foundation framework for increased scale and future complex Monitoring updates The Concepts Framework My next step was to drill one level down into the high-level journey, into the framework. Fitting a brand new feature into an existing UI required an inventory of the existing framework and a few iterations: Wireframes Now that we had answered the who? what? when? why? and where? questions, it was time to answer the how? To do so, I created wireframes, which I reviewed with our cross-functional team after every major iteration. Team feedback and user testing with customers helped inform each iteration. Designing Monitor Management Although they successfully captured all of the different settings, my initial wireframe for the Monitor creation flow immediately felt clunky, inefficient and overwhelming: Challenges with Initial Monitor Management Design Displaying many fields at once feels overwhelming Modal dialog feels cramped and rushed Relationships and dependencies among options is unclear Layout feels custom and not re-usable Layout cannot accommodate the eventual addition of more user options and settings Settings are difficult to understand, not clear what they all do Redesigning Monitor Management I quickly revisited this wireframe, identifying the main issues and addressing each of them in a new design: Solutions to Initial Monitor Management Design Separating the flow into progressively shown steps guides the user Create a new page, providing white space and better reflecting the amount of time the user needs to spend on this step If/else statements capture the relationships among options clearly and are a familiar logic format for Melinda and Andre personas, who are highly technical Reusing graph and query components from other pages Modular approach to various monitoring options accommodates addition of future options Present settings as a sentence so their purpose and relationships are clear User Testing Response Users responded positively to the second iteration design in our user testing sessions. Some of their reactions included: “Interactive, really like that the interactivity of it seems like it helps you get set up correctly.” “If else statements. Nice. That’s a clean way of doing it.” High-Level UI Flow The Launch The launch of this feature has yielded a high adoption rate and positive feedback. Sumo Logic Metrics Alerts Demo