CV banner.png

Catchpoint Custom Visualization

Shipped Project

Total duration 8 months, May 2020 - Mar 2021

Design took ~2 months

Catchpoint is a platform that monitors digital service performance to guarantee the end user experience. Through both synthetic and real user data, Catchpoint provides instant insights and alerts users to problems, so that any issues can be fixed ahead of time.

www.catchpoint.com

My Role

Sole designer

My Work

Research, User interview, User test,

ideation, Wireframes, Prototypes,

Design system

The Team

Yanbin Song (UX Designer)

UX design manager

Product managers

Front End Engineering Team

Core Engineering Team

* Any confidential or sensitive information in this case study has been omitted to comply with my NDA.

Custom visualization is a tool that enables users to write their own visualizations outside from the system default ones, and reuse these visualizations across Catchpoint platform in places like dashboard and data explorer.

demo screenshot.png

Custom visualization editor in the platform today.

Impact and Contributions

As the sole designer, I redesigned the entire experience and improved the overall workflow. 

The design was recently implemented and released on Catchpoint platform. While we are still collecting impact data, internal users had given very positive feedbacks.

 

User Groups

Internal users - customer success engineers

Our internal users are the major user group in this tool. They help our clients to create custom visualizations based on their needs and requirements, and guarantee that our customers are happy about the charting/visualization experience they have at Catchpoint. They manage and improve all the visualizations created for different customer accounts.

internal users.png
Individual customer power users 

Some clients have professional background in tech and has the knowledge to create visualizations by themselves. They will use this tool to create visualizations and reuse it across their own account.

external users.png
 

Understanding Users

I conducted user interviews with our internal users to understand more about their daily job, how were they using the old tool, what challenges they were facing, and what were the key tasks and pain points.

CV dropdown old.png
CV modal.png

The old tool

Left: the old custom visualization management list is a small dropdown hidden in another module

Right: user had to edit settings and write script in a small modal

Key Tasks
  • Create/edit custom visualizations

  • Manage all custom visualizations

  • Reuse visualizations across the platform

Key User Flow - Creating a Visualization
  • Create -> input settings -> paste code -> save -> preview charts -> edit code -> preview charts - repeat

Pain points
  • Hidden module

  • Repetitive process, a lot of clicks

  • Easy to lose changes for the script

  • Hard to manage all visualizations

 

Goal

Provide a smooth experience of creating and managing custom visualizations so our internal users can help customers more effectively.
 

Research

I first researched other similar tools like Codecademy and Codepen to understand the design in this industry, and brainstormed possible directions. 

sketch.png
Code academy.png
power BI 2.png
code pen.png

Research and brainstorming sketch

Initial Directions

From research, I investigated in 3 main directions. I filtered down to focus on one after discussing with PM and developers.

The first two directions are using the existing explorer tool as a previewer for this custom visualization editor, just like the old design. This way the engineering effort would be low and the only thing we need to build was the editor itself.

The third direction, which was the ideal from UX perspective, is to have an all-in-one experience for our users so they can edit and preview at the same window.

Talking to both PM and developers I found out the 3rd option was not too crazy to implement, and we had the time. Therefore I continued the design with the 3rd option and aimed for the best UX.

1
direction blade 1.png
direction panel.png
2
direction popup 1.png
direction popup.png
3
direction in one.png
direction all in one.png

Above: 3 design directions I was exploring in the earlier stage

 
The Thinkings Behind Each Options Above

In the design process, I was able to evolve the user flow from completely relying on Explorer, to separate the editor from the explorer, to combining everything into the editor, and reduced the clicks of the edit-preview loop from 4 to 2 essential clicks.

Original workflow:
Direction 1/2 :
Direction 3 :
3 Improved : 
workflow progress chart.png

Flow charts above shows the user flow for each possible option, and if the edits/preview commands need to be done within the current browser or an additional browser

 

Design Iteration - Mid to High Fidelity Wireframes

I tested with our internal users with mid-high fidelity wireframes and was able to improve my design from their feedbacks.

The user testing validated most of my designs, but one part of the design that I was not 100% confident about turned out to be confusing to users. I was very glad and was able to improve the design for usability.

process diagrams.png

Above: mid-high fidelity designs. The bigger screen was my design towards the later stage and I created a prototype based on this version for testing.

 

I was unsure if the connection between the side bar settings for properties settings and preview configuration was intuitive enough for users, and users confusion validated my thought. I improved the design by separating the edit and preview panes clearly.

 

Final Design -
All-in-one Experience

The design tackles the repeat loop of creating a visualization by enabling users to edit script and playing with the preview, minimizing the user flow and user efforts.

By providing efficiency to our internal users, they could do their job easier and guarantee our end customers' satisfaction.

Above: the final design allows user to edit settings, write script and play with the preview data simultaneously, largely simplified the workflow and improved efficiency.

Quick & Easy Management View

I reused an existing table/list component in our UI to provide users an easy to navigate, easy to manage list for all of their visualizations created.

 

In this list, our internal users can see if this visualization is published for customers, and how many dashboard it is being used in client side.

custom viz list.png

List view to manage all visualizations created.

Design to Prevent Errors

Editing code, preview changes, modify code is a work process that requires a lot of focus, effort and dedication. User would be very frustrated if they accidentally lost their changes.

I designed for preventive steps in the user flow by asking users questions like:

               'Would you like to save the changes before leave?',

This way, user can avoid frustrations like accidentally closed the window before save, accidentally pushed changes to customers end and caused confusion, or accidentally deleted a visualization.

dialog flow.png

Flow charts above show when is a dialog displayed to prevent users losing their changes or publishing changes accidentally.

Lessons Learned

  • Understand users - apart from the project, understand what are their work environment is like and the external tools that they've been using for. Following industrial standard.

  • Talk to developers even if a solution seems to be hard to achieve.