Explorer hero image.png

Catchpoint Data Explorer

Shipped Project

Duration 1.5 Years, Sep 2019 - Mar 2021

First release at 3 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, usability testing,

ideation, wireframes, prototypes,

design system

The Team

Yanbin Song (UX Designer)

UX Design Manager

Project 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.

Data explorer is the second biggest feature in Catchpoint platform.

This powerful tool provides user the ability to analyze billions of data points in various angles for them to understand how their digital services are performing, and why an issue occurred.

The final design of explorer.

Impact and Contributions

As the sole designer, I redesigned and improved the whole user experience of this tool from page hierarchy to interactions to detailed UI components.

The usability was significantly improved, with client feedbacks of 'much more user friendly', and 'I love explorer'.

As the second most used feature in Catchpoint SaaS product, the timely finish of this project was essential for the bigger company goal of improving overall user experience and achieving UI migration.

 

During the process, I worked with my coworkers to build a brand new design system, and guaranteed the UX/UI consistency across Catchpoint services platform.

The old design

 

Problem Space

How might we improve the charting experience for users to help them understand why an issue occurs quicker?

User comes to understand how did an issue occurs by breaking down their data in this analysis tool. However, the old analysis experience was frustrating to some and not very intuitive overall.

My Challenges

  • Design with future grow in mind at each stage

  • Design for improving new user experience while maintaining power user convenience

 

User Groups

Professionals - SRE (Site Reliability Engineers), Devs,
IT Ops

These professional users are dealing with web performance problems that are highly technical. They have been using technical tools to analyze their data and therefore already have some experience interacting with similar tools.

user professional.png
Non-professionals 

This part of our users are newer to such tools and potentially newer to the tech space. They would come to this page and check how their tests are performing but do not necessarily know what's the next step of investigation.

user non professional.png
* The above is not a full list of users for my non-disclosure agreement.
 

My Work Process

This big project was diced into smaller piece by the PMs and delivered in different phases across releases collaboratively with engineers. Chart below demonstrate my work process in each stage of the project.

Work process.png
 
 

Research

Exploring from all aspects to understand the problems and needs.

I started off with research, explored the current design and understood user needs, and prioritized what to be tackled first.

 

The old design had problems range from usability issues to visual flows, UI bugs, component interaction inconsistencies, wrong patterns etc.

To collect the key informations, I studied analytical reports the product team had collected for this tool, conducted internal user interviews, and joined customer calls to observe how they would use this tool. I also researched other similar tools like google data studio and power BI, and marked down any inspirations.

Plan and Directions

For each smaller task within this big project, I prioritized design requirements according to research and the roll out plan, and discussed the next stages for future releases with the team.

I worked with the PM and UX manager on what problem to solve first and if there is a need to reframe the project scope based on key findings from research.

 

For example, at the beginning of this project, we identified the key elements needed for MVP, and the main goals of improving the overall flow and newer user experience.

The key features to deliver for the later stages were identified as well - this is essential as the design needs to incorporate future feature additions.

Above: example of my notes of requirements for each phase. 

Design Ideation - Sketches and Low Fidelity Prototypes

In the ideation process, I kept myself on track through exploration and active communication.

Early wireframes are often done with sketches and I frequently ask for feedbacks from team members and PMs. I hosted several whiteboard sketching sessions as a group to gather more thoughts and feedbacks.

I also communicated with engineers to confirm the feasibility of certain design ideas to make sure I don't spend too much time on unfeasible solutions.

note 4.png
Notes 1.png

Above: notes, sketches, and white-boarding session

Mid-High Fidelity Prototypes and User Testing

Creating mid to high fidelity prototypes allows me to gather more detailed feedbacks, and collect more accurate results from usability testing.

I conducted usability testing with both internal users and customers, below is an example of how testing feedbacks guided a design of a key element.

At the early stage of this project we were aiming for dark theme design, but the goal shifted so you'll see prototypes in both dark and light themes below.

 
 
 
Detailed case - key element design decision made based on user feedback

Design Evolvement

Process screens from mid to high fidelity prototypes.

 

Above: hi-fidelity design in the later stage of this project

Design Improvements

Key improvements from hierarchy to detailed interactions

1. Hierarchy and Flow

One of the discovery from my analysis for the old design was the hierarchy and visual flow does not match user flow and caused frustrations.

Use Case:

 

User wants to investigate in a e.g. downtime detected for a certain test by creating a line chart.

User Flow - 3 Steps

  • 1st step: selecting the test

  • 2nd step: selecting the timeframe of when the downtime happened, and load the associate metrics to the case,

  • 3rd step: clicking draw to view the chart.

 

Some users would choose to add filters to filter down the data for a more precise view between step 2 and 3.

MVP flowchart.png

Issues before:

Visual hierarchy does not match user flow, causing confusions and frustrations

  • The first thing user sees is the last step in their workflow

  • Step 1 is hidden between 3 and 2

  • Step 2 is scattered in different places that requires both horizontal and vertical scan 

  • Step (2), adding filters, is taking up a lot of space which pushed step 3 button out of sight

  • two draw buttons for step 3, which user had given feedback saying it was confusing

Flow analysis.png

Improved design:​

Clear hierarchy, clear user flow, reduced complexity

  • Component layout and page hierarchy matches the user flow steps. Steps 1-3 are in a clear vertically visual flow.

  • Step (2), adding filters, are grouped into one button which will open up a modal on click with all the options - saved screen space and the page is visually less overwhelming.

Flow analysis after.png
 

2. Readability

Design for chart and data readability, even on smaller screens.

The research data collected also indicated that the majority of our users are using smaller screens sizes, with 1280x960 ranks at the first and 800x600 ranks at the second surprisingly.

 

Therefore, the design not only accommodated the growing features of this tool but also made chart and data reading experience better for small screens.

Chart scroll old.gif

Before​

  • Jammed commands and features on the top right of the tool, page layout and hierarchy was not following user flow.

  • Users easily get lost in all the charts through both scrolling horizontally and vertically.

  • The data table is at the bottom of the page which user had to scroll all the way down for it.

  • When user wants to adjust some fields they would have to scroll horizontally and vertically again to get back to where they were.

Chart scroll new.gif

After - Key design decisions that led to UX improvements:​

(recorded from live site)

  • Add chart name for each chart and dock the column names so user will still have access to those information on scrolling.

  • Dock data table header at the bottom, click to open and allow heigh adjustment to the top so user can look at data and chart at the same time, and hide this section when not needed.

  • Dock sidebar and update button so user can make changes quickly because all the settings and fields are within sight.

3. Intuitive Workflow

Simplified the flow of creating a chart, reduced clicks needed​

As mentioned earlier, newer users were overwhelmed by the old complicated user interface and not sure where to start. 

In the new design, effort needed to create charts was reduced by half by having the first step - data source selection to open automatically on landing. The default metrics and visualization type were also updated to be the most used ones.

Flow before: 4 clicks

Improved flow: 2 clicks

4. Communicating with Users

Provide timely feedback and instructions for users for error-prevention​

Indications are shown when there is a need to update charts, instructions are given when users may get stuck in the flow.

With design updates on a tool, most users find it hard to adapt to the new interface no matter how good/bad it is, because they basically need to learn a new tool. Providing better communications and instructions helps make the learning process easier, especially for newer users.

info messages.gif

Above: Info messages and error messages with instructions show up through out the workflow (recording from live site)

Implementation

Collaborating with engineers to ensure product implementation quality

I created detailed documentations for both the interaction of and in-between components, and the css details of the color, typography and paddings to ensure all information needed by developers are there. At the later stage of this project, I would also write word docs that consist of all the use cases and scenarios for the record of the product features.

As for the handoff, I would not only host a design review presentation with project manager and engineers, but also keep close contact with engineers, join their stand ups and review the progress weekly for any bugs to guarantee the quality.

handoff 2.png
handoff 1.png

Above: examples of the design documentations I created.

 

Lessons Learned

This project has helped me to develop skills and thinking on designing easy to use experience for complex problem and large amount of data.

What I learned:

  • approach large project by starting from the skeletons, discuss with PMs and team frequently 

  • keep future feature grow and plan in mind when designing at each phases

  • get users feedbacks early and frequently (and I leveled up at usability testing)
     

  • involve engineering early for feasibility discussions and effort evaluation - this both gives me an idea of how each solution looks like and gives them more information about the design and solutions, which will lead to successful collaborations