New Dashboard Editor

The Problem

Despite Splunk's transition to the cloud and the development of new core products on the cloud, many Splunk customers still rely on the outdated on-prem plan. Splunk is seeing slow adoption and customer growth in our core Dashboard and Search products. The goal of the project is primarily to convert the existing on-prem customers to subscribe to Splunk Cloud.

Here are the top barriers to adoption and use:
‍
1. There is no easy way to create a dashboard. User has to start from an intimidating coding UI to start pulling data, clean data and create charts. The workflow is extremely disjointed and slow, with no visibility into the data. Users either have to guess and hope for the best or constantly copy/paste and run searches.
‍

2. SPL (Splunk Processing Language) expertise is required, even for tasks that could easily be performed with a GUI, such as dataset selection, field picking, aggregation, filtering, etc.

left: sorting the status field as numeric in ascending order. Also, the field named url is searched as a string and the negative sign indicates descending order of sorting.

right:creating a chart to compare: The #of times each product is viewed vs. The # of times each product is added to the cart VS. The # of times each product is purchased

3. Moving between search and dashboard forces users to recreate work. A chart created in search needs to be copied/pasted into the dashboard, and formatting needs to be redone because it's not part of SPL. The workflow is extremely disjointed and slow, with no visibility into the data. Users either have to guess and hope for the best or constantly copy/paste and run searches.

examples of how to view the data behind a chart(left) by writing code in the search ui(right) in the current experience.

The lack of a better dashboarding experience is a key factor deterring on-prem customers from embracing the cloud.

As the lead product designer, I guided two junior designers in developing our first Cloud-based dashboarding experience and redesigning the Search code editor UI. The design goal for this project is to create a:
1. A fast and smooth workflow all within one product that doesn't require context switching between the Dashboard and Search experiences.
2. A "drag and drop" dashboarding interface that would enable novice users to perform all the top dashboard creation tasks without needing to learn SPL (Splunk Processing Language) or JSON.
3. Starting from the dashboard as the default behavior encourages fast and efficient dashboards.

The Process

I made customer needs the focus of our product planning. I conducted the initial foundational research to understand why and how our customers use dashboards today for their various use cases. I leveraged the Jobs To Be Done framework for this research, integrating it into the planning and backlog prioritization process together with my PM and engineering lead.
I helped define the visual language, key components, and interaction patterns for the new products from scratch. I developed the core dashboarding interactions, such as selecting data, cleaning data, and choosing a chart type. I also implemented mechanisms to design the dashboard layout and introduced file management features, including collaborations. Most importantly, I ensured a smooth experience for our power users to switch between the new drag and drop dashboarding and the existing coding UI, allowing them to create the same dashboard via either interface.
I worked closely with 2 junior designers, assigning different areas of work based on their skills and interests. I provided guidance along the way, drawing on my knowledge of working with data, and offered resources for designers to learn about designing visualizations and data.
In addition to the short-term work, I took the usability gaps identified through our heuristic analyses and led the designers through a vision exercise. We built end-to-end north star prototypes to explore solutions to our UX gaps. Some of the problems we discovered included a daunting empty page when users start a dashboard from blank and poor system feedback when charts do not render correctly.

Examples

Add a Chart

The "Add a chart" feature is a fundamental interaction when creating a dashboard. It serves as the crucial first step in building a comprehensive dashboard. During the design process, I explored different options to explore the placement of this key action and how it would interact with other core elements throughout the product. The right-most option provided a focal surface that allows users to select a chart, shape, or other elements. The design also offered an explanation and visual example of how that element might look in the product on the left panel.

Different explorations on the "add a chart" work flow and entry points

Advanced Editing UI
‍
To encourage higher usage and engagement with the new "drag and drop" dashboarding experience, it was crucial to ensure that our dashboard incorporates all the functionalities for our users to perform core data tasks, including importing data, data filtering, axis plotting, and various designer features like layout design and color palette selection. I need to accommodate the extensive range of customization options while maintaining an elegant design that does not overshadow the primary canvas.

Some high fidelity explorations for the side tool bar

Improved Search UI Layout
‍
The Search a.k.a. the "code editor" experience, served as the only method for our on-prem users to create charts for dashboards since they didn't have a drag and drop capability. To ensure a seamless transition for our current power users migrating to the cloud, I aimed to retain the familiar capabilities and UI of the Search experience instead of entirely replacing it with the drag and drop dashboarding UI. My objective was to incorporate the robust functionalities from the Search experience into the new combined product (Search & Dashboard), while making it less intimidating by providing visual affordances throughout their data wrangling process.

To achieve this, I drew inspiration from various applications such as XCode, Photoshop, PowerPoint, Visual Studio, and even e-books with table of contents structures. I studied their layout structures and explored options to allow users to write code to to extract, clean, remove, and filter data within the UI, as well as create visualizations from it. The final design effectively accommodated complex data structures, providing users the flexibility to selectively hide sections and focus on their core tasks when necessary. Additionally, a complete visual redesign (we started with a dark mode) was implemented to enhance the visual hierarchy of different elements on the canvas.

SOFTWARE LAYOUT Reference FROM PRODUCTS WITH SIMILAR BUILDING COMPONENTS.

The Results

By the time I concluded my involvement in this project, we successfully shipped the first MVP of the new dashboarding experience to customers. I played a pivotal role in defining the dashboard roadmap for the upcoming significant milestones, looking ahead to the next three quarters. Subsequent to the launch of the new dashboarding experience, Splunk Cloud witnessed a substantial 12% increase in usage within the following months.

Reflecting upon this project, there were several challenges and aspects that I would have approached differently:
1. Starting from scratch is hard, we had a ton of features to prioritize for the initial MVP launch. Collaborating closely with the PM & Engineer managers, I ensured that feature priorities accurately aligned with the users' needs. However, due to technical limitations, a few elements aimed at enhancing the user experience had to be deprioritized. Such as dragging interaction, expand/collapse panels.
‍
2. As a first step moving to the Cloud, we intentionally kept the old "Search" experience to prevent our existing users from feeling lost and having to adapt to an entirely new workflow for dashboard creation. However, the complexity of the Search user interface could not be ignored, and we invested a significant amount of time in redesigning it while preserving the majority of the previous features. In hindsight, it would have been beneficial to explore ways to maintain a minimal yet functional Search experience and allocate more time towards developing the new drag and drop dashboarding experience.