Wiping data with WipeDrive

Wiping data with WipeDrive

Client

WhiteCanyon Software

Role

UX

UI

Tools

Figma

Maze

Managing data and hardware securely

WipeDrive is a software that allows users to completely wipe everything on their hardware. It's used primarily by IT professionals in enterprise settings.

WhiteCanyon Software brought me on to integrate additional features into WipeDrive smoothly. After receiving feedback from their users, they also wanted to make the flow of wiping data more efficient.

The existing product

The below screenshots of the existing product show the two problems we were approaching.

The first is navigational. VeriDrive and Detalys are other WhiteCanyon products, the former allowing users to verify their data has been wiped and the latter allowing them to perform hardware checks to discover any issues on their hardware. The team wanted to make these products available for use within WipeDrive.

Detalys was practically undiscoverable. Users had to click into “Options” to see it even exists. The radio buttons introducing VeriDrive feels like an afterthought and does not position the verification feature as a separate service.

Previous product navigation system
How to access VeriDrive and Detalys in the existing product

Because many users are using this wiping software over and over again, the team received feedback that it took too many clicks to get the wipe completed. I worked with them to reduce the number of screens, making the process more efficient.

Previous wipe flow
Screens for wiping drives in the existing product

Constraints

The team asked me to explore ways to improve their UI as well, but it was still important to stay somewhat aligned to the existing product so the current user base isn’t too jarred from the changes.

Exploring solutions

I first did quick sketches to ideate on solutions for both problem areas, considering the main wiping flow concurrently with the navigation between features.

Trying out different solutions

To solve for navigation, I executed on two of the strongest concepts to conduct A/B user testing on. The “Drawer” concept uses a left-side navigation that expands when the user hovers over it, while “Tabs” places tabs on top of the UI that acts as navigation and clearly shows the user which feature they are working in.

To solve for a more efficient task flow, I made the warning dialog a modal rather than a separate screen and integrated the overwrite pattern options into the first screen. This flow stayed consistent through both the Drawer and Tabs concepts.

Drawer

The pro for this solution is how much more space is available for the table of drives and how the navigation stays out of the way until users need to access it.

The single letter preview of the navigation items would be replaced by the product icons if this option was chosen.

Tabs

Tabs leverages how the existing product looks and makes it very quick to switch between the products.

Compared to the Drawer, this solution doesn’t feel as much like users are navigating out of a product and into another, so it’s important to be able to save their progress in a flow as they jump between the products.

Let’s test this out

To see which navigation solution worked better and if the shortened task flow was intuitive, I conducted usability testing through Maze with ten participants for each concept.

Participants were asked to wipe the hard drive then verify the hard drive has been wiped through VeriDrive.

Key insights

  • All users were able to complete the “Wipe your hard drive” task with little difficulty in both Drawer and Tabs, and 16 out of 20 users said it was very easy to perform the task.
  • For “Verify your hard drive has been wiped” task which A/B tests the usability of the two navigation systems, Tabs performed significantly better than Drawers. Users also rated Tabs as significantly easier to use.
  • In the preference test that asks users which UI they preferred, 65% of users preferred Tabs.

From the results, we decided we could move forward with the shortened wipe flow. I also recommended to move forward with the Tabs, not only because it performed better but also because it would make for a smooth transition to the change.

In the future, I suggested to the team to spend more time on the experience of configuring the overwrite pattern and the “Options” screen that comes up from clicking the blue Options button. Doing so would ensure more advanced users have good experiences as well.

Small changes with big impact

As I designed the screens, I found opportunities for tweaks in the UI that could go a long way to improve the overall experience.

This included improvements on clarity, such as changing button text to action words, and improvements on visuals, such as making the table easier to look at.

Takeaways

Many real-world projects aim to improve or build upon something that already exists, so it’s important to keep current users in mind for the new designs.

I explored options that aligned to the existing product and options that didn’t, but in the end we landed on a safe direction since there wasn’t a good reason to change the entire look and feel of the product!

Because the budget was small, I couldn’t conduct robust usability testing. I searched hard for a way to test on a small budget that still provided enough customization and results.

The service I ended up using was Maze, which tracked all the areas each participant clicked as they completed their task, along with the amount of time they were on each screen. Though I couldn’t interview them, this gave me a good enough sense how the design would perform.

More projects