Nadav Koren

Senior Product Designer

Nadav Koren

Senior Product Designer

How I Helped Support Support End-Users

As part of my work in Paragon, I owned an internal product for devs, QA, NOC (Support tier 1), TAM (Support tier 2), ProdOps (Support tier 3). This project took me 8 months of research (mixed methods), design, and testing.

Challenge

The challenge was to take an open-source code product, understand the problems (there were many of them), prevent developers from our full stack teams from adding new problems, and keep the stakeholders in the loop.

Stakeholders

The stakeholders divided into two categories:

Production

Devs, QAs, those people coding the abilities and testing its quality.

Consumption

NOC (T1), TAM (T2), and ProdOps (T3), those people consume the data from the Console and performing action through it.

Down below, I'm going to present the most important and most used flow in the Console product.

Business Impact

The reason we approached this project was because some support users had left the company, as the company wasn't provide them an effective way to take care of their customers.

At the early stage of this usage, we got some metrics about 40% reduced time of marking a ticket as solved.

The feedbacks were amazing of how we simplified their work life as we also implemented other products like; Jira and Confluence. To make automations for common flows. The adoption is here!

End user = Support

As our systems are super technical, it was crucial for me to align as possible the UI of the Console to the UI of the end-users.

The frame below is how the end-users are reviewing their daily consumptions and configure them according to their needs.

The next frame is how the support are reviewing the same information.

As the end-user's frame functional, the supports one isn't but do represent the end-users current configurations. The supports frames is a bit more comprehensive and informative then the end-users.

As our systems are super technical, it was crucial for me to align as possible the UI of the Console to the UI of the end-users.

The frame below is how the end-users are reviewing their daily consumptions and configure them according to their needs. (I would explain more explicitly face to face.)

The next frame is how the support are reviewing the same information.

As the end-user's frame functional, the supports one isn't but do represent the end-users current configurations. The supports frames is a bit more comprehensive and informative then the end-users.

Now lets go through the flow end-to-end.

Now lets go through the flow end-to-end.

Now lets go through the flow end-to-end.

Devices page

This page is for reviewing every single device of the end-users by the support.
My thoughts were to divide the information into two segments, the initial, which is what you see in this frame. It presents what the support need for ongoing maintenance.
On top of the initial view, I decided to apply a default sort on the filter so the devices with "Poor" health state always located on the top of the table, of course the user can decided differently and re-sort it, filter, and so on.

Deep view — Acquisitions tab

If the case of the end-user requires more deeper troubleshooting and investigation, by click on the arrow will redirect the support into what we call "Deep View".
It contains three tabs, each represent different aspect of the device.

Deep view — Consumption tab

The consumption tab present the real-time configurations user can configure post acquisition,
and their daily consumption according to the allowed daily quotas.

Deep view — Collectors tab

This tab is the most technical one, means the information here is about which technical component collected which media, their statuses, issues, and here the support has some actions they can perform.

For the four actions, I used split button component which the most important one located outside and the three others inside it.

Collectors hierarchy

Each collector has possible three commands it can performs.
For now, our technology can provide only one collector each device and run single command at a time but it was important for me to provide a scalable solution for the time when multiple collectors and commands be available.

Anchors of orientation

Anchor of general information

As we have two depths of information consumption, support users should know that when they are diving into more explicit information, the initial ones don't disappears.
That's why I decided to concentrate the table into collapsable section within a static panel next to the rest of the information to complete the investigation.

Anchor of navigation

In order to keep the navigation pattern the same, I decided to remain the tabs in both the initial view and the deeper view.

Anchor of content

As these frames are loaded with information that might appears too much, I decided to design it like a dashboard that each data in the same context has its own location.
Start of with the big division, the static general info section and the dynamic content, inside the dynamic content I decided to sub divide for better consumption.

To wrap things up, this flow designed for both simple and advanced investigations by the stakeholders.
We've performing ongoing usability tests and the results keep proving our solution is accurate and simple to use.