Enhance Private Device Display and Selection at Sauce Labs

At Sauce Labs, customers can purchase private devices to ensure exclusive access to the devices. However, these purchased private devices are not always available for use. Sometimes, a device is unavailable because a team member is currently using it, or it needs time to reboot after being used. Regardless of the reason, the interface does not clearly display the detailed status of the device. This leaves users unable to understand what is happening and only aware that, despite having paid for private devices, they cannot use them, leading to confusion and frustration.

To address this, I proposed a series of design optimizations, including improving the information layout of device cards to highlight key status details and enhancing the existing filters. At the same time, I took this opportunity to replace outdated design components with a new design system, ensuring a more consistent platform experience.

What is Sauce Labs Real Device Cloud?

Sauce Labs Real Device Cloud is a mobile testing solution that provides customers instant access to thousands of Android and iOS devices to test out the mobile apps they developed. Customers can purchase private devices, which ensure dedicated access and more customisation capabilities to the device itself than public devices.

Why is this important?

Quick and dirty solution

Since the problem and goal were clear, I began with collecting requirements for the device status information to display and mockup a quick and dirty solution. However, I soon realized that the hover state in the device grid view created visual clutter and led to a messy interaction experience.

The original design was quite outdated and did not provide much information about the accurate status of the devices.

Visualised information architecture to align requirements and clarify spec.

The first design draft

Balancing information display and visual clarity

I conducted several rounds of design exploration for the content and layout of the device cards, iterating based on internal feedback. Ultimately, I decided to go for option 2 to reach a balance between displaying as much information as possible and reducing page clutter.

Based on option 2, I also added a side drawer to highlight the CTA button more and add space for displaying for more information.

Tidy things up and flesh out the user flow

Real screen recording from the production

Designing beyond boundaries - pushing for filter enhancement

In addition to improving the presentation and layout of device cards, I revisited the needs of the key users of this page: testers, whose primary goal is to quickly locate specific devices to run tests. For testers, two critical factors contribute to a successful test: ensuring the device is correct and confirming the device is available. And this also ties back to contributing to one of our success metrics: improve user efficiency in order to raise average testing job count.

Currently users rely on the search bar, filters, and sorting options to find the right device. Experienced users often pin frequently used devices for quick access. I further investigated users’ search and filter habits and discovered that “OS Version” was the most frequently used filter, with usage nearly twice as high as other options.

Filter usage data retrieved from Mixpanel

However, the current implementation for displaying OS Version filters is less than ideal. Users must sift through a lengthy version list to find the desired device version, prompting me to explore ways to improve the filtering experience.

I used this opportunity to introduce grouping into dropdown list and enable “select all” function in the group to enhance and update the existing filters. The updated filter has also taken into account usage from different pages across the platform.

Outcome

We officially launched the new design at the end of September, and it has positively impacted both our users and our business:

⭐️ So far has increased average job count by 10% (monitored since feature launched until end of FY24).
⭐️ Empowered users to monitor device availability proactively, reducing amount of customer support ticket.
⭐️ Enabled engineers to replace legacy design system components with new ones, resulting in a more cohesive and smooth user experience.

While there are still many areas for improvement beyond the current scope of this project, we have planned several next steps to enhance the user experience further. These include displaying predicted wait times, providing the ability to reserve a device, and other proactive features aimed at making the experience even better.