Banner 1.png

Catchpoint

May 2018 - Present

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 Work

Synthetic product design

RUM product design

New UI

Key Words

SaaS product, data visualization,

design system, user testing, agile environment

user experience design, user interface design

The Team

Yanbin Song (UX Designer)

Alan Hensel (UX Designer)

Peter Andrews (UX Design Manager)

Som Liengtiraphan (Pervious UX Designer)

* Any confidential or sensitive information has been omitted to comply with my NDA.

Product Team Structure

Team structure.png

My Work Process

I take on both big features and smaller enhancement projects in an agile environment. Below is how I approach and collaborate during the process.

Work process.png

Selected Projects - SaaS Platform

Data Explorer

I redesigned and improved the whole user flow, page hierarchy, and every single interaction for this data analytics tool.

Read details of the case here

The old tool before redesign

Explorer screen.png

After my redesign

'Very easy to use, I really like this tool.'

'Definitely more friendly UI.'

'Explorer is great, I love it'

                          -------- User feedbacks

Custom Visualization Editor

I designed this code + preview editor for our users to create their own custom visualizations outside from the system set for their data analysis.

Along with this editor I also designed for a visualization management list for users to edit/manage all visualizations.

Trace Route Visualization Redesign

I designed the new trace route single path visualization and Ping table in waterfall page. 

Indicator colors shown in both chart and table allow users to instantly identify problems by scanning without having to go through every details of this complex information.

Trace Route.png

A more complex path example:

Before: no issue pinpoint, color choices not specific to problems

trace%20route%20chart%20old_edited.jpg

Projects Across Devices

I enhanced the design of Catchpoint mobile app during a 2-week hackathon at Catchpoint along. I had about 4 days to design before my teammates (developers) started the implementation. This app aims to provide users key insights like alerts to their data.

I also designed for dark theme for key screens.

Catchpoint App

app cover.png

Catchpoint User Experience Desktop App

Design in progress -  I took this project after the previous designer composed the main features and look and feels. Since then the criteria has changed and my responsibility is mainly on designing for a scalable structure of the app to grow, and design for all the new use cases and scenarios for phase 1.

This app aims for providing users information about their internet connection information and device health, and instructs users when they run into a connection/device problem. Work in progress.

This app is going to be available in both Google Play store and App Store.

CUE cover.png

The designs are blurred because this app is not released yet.

Projects Documentation

Challenge faced when documenting everything inside the design tool:
design files become hard to navigate    ➡    some details are missed by developers   ➡   increase effort of communication and frustration
Solution:

Designs + Separate Documentation

For each project, I will create all the Hi-Fi diagrams and specs in the design file, then write up a separate word documentation that walks people through

- related projects

- project overview

- user goals

- user flow

- detailed interactions

'The doc gives us a record of the design'

'much more easier to understand, very helpful'

         ── developer feedbacks

Specs example.png

Component Specs Example: