Performance Monitoring Tool

Team
4 UX Designers, 7 Engineers

Role
Interaction designer

Techniques
Wireframing, prototyping, usability testing

Tools
Axure, AdobeXD

BACKGROUND

The backup admin needs to be able to monitor the health of an appliance so that they can understand if the appliance is working too hard or if it is not functioning properly. An appliance is a server which can be a master or media server. Each type of server has a distinct role in backing up data.

PROBLEM

The backup admin is unable to monitor the health of the appliance. It is crucial for them to monitor the health of an appliance so that they can understand if the performance metrics are running too high and if the appliance will crash or overheat. If they do not monitor the performance of an appliance, they will not be able to optimize how the appliance functions.

GOALS

  • Create a performance tool that gives backup admins a clear understanding of how an appliance is functioning
  • Create an intuitive monitoring experience
  • Identify the metrics that they need to see upfront so that they can take action
  • Understand what timeframes they need to see the data in and which timeframes are important to them


REQUIREMENT GATHERING

We met with the project manager (PM), architect, and engineering leads to understand the requirements, define the MVP, and scope. Once the features were defined, we created user stories, defined tasks, and scenarios.

USE CASES

The backup admin would view the performance metrics to see:

  • Where the network bottlenecks are
  • If the network is functioning well or not
  • The history of the appliance health to view trends

SOLUTION

USER FLOW

Note: This feature was incorporated into an already existing flow.

WIREFRAMES


I researched charting and data visualization libraries such as D3 and HighCharts for inspiration. We learned that it is necessary for the backup admin to view data at a given point of time where they can see what several metrics look like. I iterated and validated the wireframes with the stakeholders and I worked alongside my UX peers to bring the lo-fi wireframes into hi-fi mockups.

PROTOTYPE


I created the interactive prototype using Axure and I used Adobe XD as the foundation to build the screens. The 3 dropdowns that the backup admin can filter by are: Timeframe, Metrics, Compare with. I created 3 different variations of the metric dropdown to better understand the use case for this dropdown. They were:

Drag and Drop

Metrics

Reorder Dropdown

Metrics

Hide and Unhide

Metrics

USABILITY SESSIONS

The team and I along with our designated user researcher tested the designs. During the user research sessions, I actively took notes and asked questions to the participants. We had 8 participants through 1:1 WebEx sessions.

Highlights from the sessions were:

  • The order of the metrics were not critical as long as they have the option to hide and show metrics
  • Putting alerts upfront is important so that the backup admin is aware
  • Comparing the health of one appliance to another is helpful

After the usability sessions were over, we had a debrief together as a team and we discussed our findings and impressions. Based on the feedback that we received from the usability testing, we iterated the designs and collaborated to review the iterations during our readout with the PM and engineering team.

CHALLENGES OVERCOME

An appliance collects many data points within a given amount of time. Given the results from the user testing, we chose to support 1 hour, 6 hours, 12 hours, 24 hours, 72 hours, 7 days, and 30 days. Given the collection interval of the data, we had to accommodate the large data set as the timeframe increased.

DELIVERY

After the designs were finalized, I created a specification document using PowerPoint. I shared the Axure prototype and specification with the engineering team. Once shared with the engineering team we were able to discuss the technical feasibilities with them. Since the team works in Agile and divides their work in sprints, they were able to take the prototype and divide the prototype into tangible engineering tasks. I worked very closely with the engineering team to make sure that the implementation resembled the prototype.

Use case: view metrics

View 3 of 7 metrics of appliance data.

Use case: compare appliance data with other appliances

Compare the data of 3 appliances.

LESSONS LEARNED

Overall this experience taught me how necessary it is to do several options of a design and test them. Creating 3 different variations of the Metric dropdown helped me identify the interaction that was needed for the backup admin to empower them to work efficiently.