Catchpoint Platform

October 2019 - July 2020 (Shipped)

Web App, UI/UX Design, Design Systems, User Research

A digital experience monitoring platform that pinpoints performance and availability problems users experience anywhere in the world: product site ↗

During my time there, I mainly worked on synthetic and real user monitoring products.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Catchpoint.

“My personal anecdotes and thoughts will be in quotes and in blue”

Impact and Contributions

Designed and launched multiple features. Contributed to the standardization of all design across the platform through the Catchpoint Design System.

I researched product and user requirements, designed wireframes and interactions, tested the designs, and maintained design integrity throughout the development process through launch.

I created new components for and maintained the Catchpoint Design System, which was used by the whole company to standardize all designs. Additionally, I owned the project to standardize all chart designs across the platform and all project organization.

“At Catchpoint, I was also able to continue my love of planning events! During February, I hosted a trivia night. It was customized to include the interests of my co-workers: Harry Potter, video game soundtracks, and dogs“

Projects Owned

The following is a shortlist of projects that I owned and shipped during my time at Catchpoint.

Dashboard Sharing

This feature would allow users to share their dashboards via email or URL links. It can be customized to show specific information, give editing permissions, and scheduled at regular intervals.

Large Scale Network Visualization

This new network visualization would allow users to monitor very large networks with a large emphasis on their controlled network devices, endpoints, and apps. The visualization is highly interactive and can be used analytically to pinpoint problems on a network.

“This was the project that I worked on the longest while I was at Catchpoint. I learned a lot during this project, particularly design critique skills”

Data Visualization: Visuals and Experience

A large variety of data visualization types were made available to users to help them comprehend their networks. I owned both the creation experience of all data visualizations and the visuals and interactions of each chart type. Chart types included: bar, line, scatter, doughnut, and tables.

Charting Standards and Design System

Catchpoint Design System contained components, interactions, engineering specs, use cases, and brand guidelines. I contributed many new components, interactions, and use cases to this project. Additionally, I created charting standards across different visualizations and data sources, a system on which Catchpoint still uses today.

Problem Space

How might we detect, identify, and resolve digital experience issues quickly?

The goal of the platform is to know what needs to be fixed and by whom. Managing your digital experience is a highly complex task with high real-world stakes. An hour of downtime can lead to millions of dollars in lost revenue for a company.

With 80% of performance and availability issues occurring outside of a user’s firewall, the Catchpoint platform needs to allow users:

1. Monitor every component of their service delivery chain

2. Run preventative tests, receive alerts on specific problems

3. Notify the right person to fix the problem quickly.

Users

“The following is not a full list of users and no specific use case has been detailed as part of my non-disclosure agreement“

Technical Users

These users deal with network problems about their products under high-pressure situations. They are looking for a solution that helps them determine the root cause of the problem quickly and assist them in fixing it in real-time.

Non-technical Users

These users are looking to see an overall picture of how their company and products are performing. Rather than a highly analytical problem-solving tool, these users want tools that will show performance trends and possible forecasting of issues or opportunities.

Research

Exploring the problem from all angles by discovering and defining

As many of the problems were highly technical, I would spend a couple of weeks to a month researching the problem, understanding user needs, and documenting edge cases. Throughout the process, I would document my findings and define what are reoccurring pain points we should prioritize solving.

Methodologies used

Interviews, analytical reports of app usage, customer workflow observation, co-creation sessions

Synthesis

Narrowing down the scope and prioritizing what to design

Following the research phase, my findings would be synthesized into a report that is presented to the team for discussion. This synthesis would be used to narrow down our previous scope, reframe “How might we”s (if needed), and prioritize what features we should include for a 1.0 versus 2.0 design.

Information Architecture

Creating the foundation of my designs

I started all my designs by creating the user workflows. I believe that good information architecture is the foundation of any good design, and that form should follow function. Workflows are extensively tested and iterated on before any interface work can begin. These workflows are attached to all engineering packages so anyone can understand how the designs will work without me there.

“I created my information architecture on Figma. Again, I highly recommend this tool. So far the only thing I haven’t been able to create with it is a fine art piece“

Sketches and Low Fidelity Prototypes

Creating non-precious solutions and testing frequently

All interface design work starts off as sketches. Sometimes sketches are done in private and then reviewed as a team. Sometimes sketches are done on a whiteboard as a group. Whatever the beginning, sketches are then translated into low-fidelity prototypes on Figma so that it can be shared with stakeholders for feedback before continuing to higher fidelity iterations. At this stage, all designs are tested frequently and loosely held.

“I was able to level up my design critique skills during my network visualization project, which lingered in the low fidelity stages for 3 months. During this time, I learned to always ask ‘What can be improved?’ at each review session to quickly receive notes on what to be included in our next iteration and ‘What did we do well?’ to know what we succeeded in doing and keep up team moral“

Interactive, high-fidelity prototypes.

Polishing out the details and designing for edge cases

After a design direction is determined, I created higher fidelity prototypes that answered more detailed questions and edge cases that might occur. Other things included in this stage are error states, transitional and loading states, and empty states.

If needed, I created an interactive, animated prototype that engineers and stakeholders would be able to play with so they comprehend the design better.

“Most interactive prototypes were created on Figma. Some were experimented on using Framer.js or Principle“

Documentation

Creating an information hub that can live on without me in an increasingly remote workforce

I documented everything I created. At delivery of design, all parts of my designs would be meticulously documented for engineering. In an increasingly remote workflow, I believe over-documenting would allow for faster development as less time will be spent answering questions or request-for-information by engineering.

While at Catchpoint, I standardized what elements needed to be included in a development package to engineering and how files and documents should be structured for all our projects.

Development

Collaborating and reviewing at every step, no engineering hand-off

Rather than an engineering hand-off, I aimed to collaborate with the engineering as they develop the designs. This manifested in weekly reviews of their progress and daily check-ins with the engineer to answer any questions they have.

Final Thoughts

Working at Catchpoint helped me gain valuable skills in creating effective and delightful tools to help users solve complex problems.

Lessons I Learned

• I grew my research skills and practiced different methodologies

• I learned how to synthesize large amounts of technical information into digestible reports

• I learned more effective design critique skills to reduce miscommunication and prevent the design process from being bogged down

• I learned how to develop tools people will actually use. I learned how someone learns to use a tool and how one might repurpose it for other uses.