cClear is a high-speed network monitory product that allows users high-level visibility and progressive drill-down to complete packet-level view of the network data. cClear combines detailed performance/security monitoring and helps monitor company networks around the globe.

I am the User Experience Wizard for cClear and all cPacket products. Below I am sharing a snippet of my design process. I am happy to share the strategy and research I incorporate, but I would like to highlight how I design for this project.

Users cannot drill down to the details they need to ensure their network is healthy.

They struggle to understand how to utilize cClear best, and their eventual understanding comes at a high cost of frustration and countless hours with sales engineers helping do their work. How might this be solved by utilizing the design system to improve the usability of the product?

Network Monitor Screen | Evaluated Version of cClear

Approach

Taking the feedback from support calls and sales engineers, I start to map out what would improve the experience and the challenges of implementing these improvements. During this process, I work closely with a product manager to brainstorm and try out ideas. It is a highly iterative moment for the project.

The evaluation pointed out several areas of improvement listed below:

  • There is no site-wide search | This requires backend changes that are not in-scope

  • Sorting and filtering table columns is inconsistent and doesn’t always work | Communication with internal teams

  • There are too many details to display in the current table and site architecture | Balancing how much detail is needed versus overloading the user cognitively is essential.

  • Hard to tell when bad things are happening | need improved api’s to get the information required to share status with the user

  • The site is lacking workflow | Workflows are incredibly different based on network setup and personal user preference

The next step is to mock up and review with collaborating teams and stakeholders for feedback and feasibility evaluation.

cVu Summary Table | First Design Review
This table remained similar to maintain familiarity to current table with some improvements like status, pagination

cVu Summary Table | Currently in development

cVu Detail Table | First Design Review
This table was completely new the left column allows user to jump quickly to the next item and the table allows for deep detail so that the user might be able to have all the information needed.

cVu Detail Table | Currently in developmen

Solution

  • Site-wide search | In the icebox

  • Inconsistent/buggy UI | I asked the QA team to attend design reviews to know how the product is evolving, so they understand the features and improvements before they need to test. The result is better testing, which better meets the UX expectations, improvement in cross-functional alignment, and a higher quality product.

  • Table redesign | I reorganized the product so that there are two different table types with two purposes. Summary tables are now glanceable; they are a jumping-off point connecting the user to their next step. Detail tables allow the users to dig into the information in their unique ways, accessing tools that were hard to find or not accessible previously.

pagination.jpg

Improved navigation | The first improvement, add a footer to all tables for pagination and table customization. The second improvement was LINKS! adding links in the table so that a user can quickly choose their next step.

Outcome

This is still TBD as the changes are just in development, Stay Tuned.

 

Skills Used:

Managed
User Research
User Testing
Front-end Development

Led
Feature Strategy & Scope
Interaction & Visual Design

Contributed to
Product Management
Development Schedule

Work Products Produced:
Concept Socialization Deck
Sketches
Wireframes
Click thru Prototypes for Development
Animations
Jira Tickets