Catchpoint Custom Visualization
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.
Research, User interview, User test,
ideation, Wireframes, Prototypes,
Yanbin Song (UX Designer)
UX design manager
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.
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.
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.
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.
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.
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
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
Repetitive process, a lot of clicks
Easy to lose changes for the script
Hard to manage all visualizations
Provide a smooth experience of creating and managing custom visualizations so our internal users can help customers more effectively.
I first researched other similar tools like Codecademy and Codepen to understand the design in this industry, and brainstormed possible directions.
Research and brainstorming sketch
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.
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.
Direction 1/2 :
Direction 3 :
3 Improved :
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.
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 -
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.
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.
Flow charts above show when is a dialog displayed to prevent users losing their changes or publishing changes accidentally.
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.