Rohan Singh

Re-architecting Sumo Logic

The new Sumo Logic framework

I led an IA redesign for a 7 year old Enterprise web app and created a scaleable UX framework to add new features with a seamless user experience.

About Sumo Logic

Sumo Logic is an industry leading cloud based log management tool. It's a swiss army knife for developers and ops personnel to monitor and troubleshoot their applications.

Organizations use Sumo Logic to monitor their applications and troubleshoot outages, security intrusions etc. Our users run queries to analyze their logs, analyze their metrics data, and visualize it all in dashboards.

The Challenge

The primary motivator for this project was our low Net Promoter Score (NPS). When the customer success team launched the NPS survey, we quickly discovered that poor UX was the primary reason for users giving us a poor score.

UX debt accumulated over 7 years was a key reason for a poor user experience. Sumo Logic was experiencing growing pains as it kept adding new features to support its core goal of search based troubleshooting.

Sumo Logic was not designed to accommodate for workflows emerging from these new features. This resulted in the User Experience often feeling disjointed, odd, and broken.

My challenge as lead designer was to create a scalable UX framework, that adapted to key user workflows and new feature development.

My Role

I was the lead UX designer on this project. I worked closely with Product Management and Engineering to define the success criteria for this project, ensure its successful Beta release, and iterate continuously on user feedback.

I took the results from a collaborative brainstorming session to define the information architecture and core user flows. I created prototypes to explore different solutions, assisted in user research to validate the solutions, and iterated on the feedback.

The Results

The Design Process

Understanding the problem

I was running the UX Debt process at this time. I was responsible for gathering UX issues reported in customer support tickets and internal users, prioritizing them, designing solutions, and working with UI dev to get it fixed. When the redesign initiative kicked off, I realized that fixing UX debt wasn't the fastest way to improve user satisfaction. We had to leapfrog ahead and ensure that a lot of this UX debt would get fixed in the process.

The UX debt process wall

Collaborative brainstroming workshop

The design team hosted a collaborative brainstorming exercise with customer success, product management, and engineering, to envision what the ideal user experience would be like 2 years down the line.

The primary goal of this session was to get everyone to brainstorm how we could leap frog ahead of the current barrage of UX debt issues and support new workflows in Sumo Logic. We specifically avoided fixing issues with the the current feature set.

I collaborated with another designer to draw out common patterns from these sketches:

Switching between different features was clunky and they wanted a better way to do it

Collaborative workshop session

Exploring solutions

Making Sumo Logic scalable

My biggest UX challenge was making the interface scalable and the flow between different features seamless. Currently,

Hence, users who wanted to switch between them had to jump through a lot of hoops.

The 4 primary features had completely different workspaces

I looked at product navigation in competitive products as well as analogous web apps like productivity tools. I narrowed down the design patterns to 2 primary contenders - a tab based navigation system vs a left panel list based navigation system.

I prototyped both these experiences to get a feel for how they would scale. We also conducted hallway testing to see what users find more usable.

Prototype 1 - Browser tab navigation

Prototype 2 - Left panel links

I decided to go with a tab based approach for several reasons

Defining a new Information Architecture

The next step was finding a new home for all the other parts of the product, including management pages, user saved content, help, account settings etc. I paired up with another designer to define the new information architecture.

The current management, help, and account setting sections were not grouped by use case. It confused users who had to read the entire list to find what they were looking for.

The old management, help, and account settings IA

We began the process with a card sorting exercise. We entered all the pages in Optimal Workshop and sent out a survey to 50 internal users, asking them to group these pages per their mental model.

Results from the Optimal Workshop survey

We used that data to create new buckets and we tested those buckets in 1-1 interviews with stakeholders from various functional groups in Sumo Logic. The interviews resulted in our final groupings.

An initial iteration

Final grouping after user testing

Defining a new interaction pattern for exploring saved content

My next challenge was defining the interaction model for the library. The Sumo Logic library is basically a repository of saved and shared content. The old library was hidden, had a confusing interaction model, and poor engagement levels.

To solve for discoverability and engagement, we decided to expose the library in a left panel. My challenge was to design the right interaction model for navigating this library. At its core, the library is a hierarchical list of objects.

My goal was provide an intuitive, familiar view to users that helped them navigate through the list quickly, and prevented them from getting lost in the hierarchy. I prototyped a few options in Axure to test out these patterns with internal users.

Option 1

Option 2

Option 3

I hallway tested these options and quickly realized that users prioritized quick access to content over content overwhelm. It became clear that the best navigational model was an inline hierarchy.

Final design direction

Homepage

As we were testing these UX changes, we quickly realized that we had to solve for an important usability issue - novice and infrequent users were paralyzed by the old landing page which was basically an empty search screen. Users had a poor post-login experience because they were intimidated by this screen.

Old Sumo Logic landing page

We decided to tackle this problem by creating a Homepage to give users an easy starting point. Our goals with the Homepage were:

I interviewed the Customer Success team and several customers to understand the most useful content we could provide on this landing page. I quickly realized that for this page to be useful for majority of our customers, it would have to be customizable, with smart defaults for different use cases.

I mocked up several versions of the homepage targeted at different users - administrators who wanted an overview of their account, expert users who wanted data sources they could quickly query, and novice users wanted to know searches and dashboards run by their teams.

Landing page for novice, infrequent users

Landing page for expert, frequent users

Testing the overall experience

I stitched together a prototype in Invision and worked with a researcher to test it with our users. I helped write the script for the test, including goals for the test and the flows to be tested.

End to end prototype for user testing

Our initial test was with 5 internal Sales Engineers and 5 customers. We had a few goals with this test:

We defined a concrete success criteria so we definitively say if the new UI was a success. This included:

The results of the test were positive overall. The major takeaways were:

User testing quantitative results

We also uncovered several areas of improvement:

Internal dogfooding

The user testing proved that the redesign was a success in terms of broad user flows. We made it easier for users to find saved content, work with multiple Sumo Logic features and move between them with ease, and the experience framework would scale well as we added new functionality.

Our UI dev team was building the new UI in Angular as we were conducting these tests. After 70% of the new UI was built, we opened it up to internal users so we could observe them use it. I created a Slack channel to gather user feedback in real time.

I helped create a formal process around collecting and analyzing this feedback. We ensured that someone from the team would respond to user issues and we would analyze this feedback in weekly meetings.

Some notable issues that came up and how I tackled them:

I want keyboard shortcuts

The Homepage is interrupting my flow

Switching from an accordion to a tab navigation model in the left nav

Changes to the left nav

Final designs

We are constantly refining the new UI based on user feedback. However, these are some of the core flows that we implemented based on all the user research -

A tab based navigation

Quick access to the library from the left panel

Reorganized information architecture

Releasing it in the wild

We continue to make improvements to the new UI based on internal feedback. We are at point where we feel comfortable rolling out to customers. Our current plan of action is to start with a beta release to a handful customers, iterate on their feedback, before releasing it to all customers.

Our challenge is to keep the beta period as short as possible to prevent our developers from supporting two user interfaces.

I helped develop a strategy for measuring the success of the release. It consists of quantitative and qualitative metrics to track user adoption and usage.

  1. Tracking user actions
  2. Shadowing users

Outcome

We continue to track user feedback for the new UI. From the user testing and feedback we have received so far, users love the new Sumo Logic user experience.

We successfully met our goal of creating a seamless experience between the disjointed feature sets in the product today. This new experience will future proof our business as we add new features.

The next steps are to work on improving the user experience of each of these feature sets. The new UI has helped create a framework for joining these features, but we often heard users complain about the poor usability of the features themselves. We built a solid framework for growth and now we need to iron out the kinks with our core functionality.