product

Sauce Labs is a cloud-hosted, web and mobile application testing company based in San Francisco, California. It lets users run Selenium, Appium and JavaScript unit tests across 350+ browser and OS platforms at scale without setting up or maintaining dedicated testing infrastructure.

my role

I led Product Design at Sauce Labs and played a pivotal role as part of the Product team. My role included defining the product strategy and shaping the design direction for the company. I served as an end-to-end hybrid designer and was responsible for everything from user research to visual design. My biggest contribution to the team came in the form of a redesign for the core Sauce Labs product which consisted of a web dashboard and a manual interface.

leading with design at the helm

Rebuilding a product that doesn’t have any design legacy posed a variety of challenges. On one hand, it required rethinking all aspects of the experience, on the other hand it was a blank canvas filled with opportunities.

  • starting with our users

    Our first task was understanding what the was relevant and what parts of the product our users actually cared for. The key was to remove the clutter so we could craft an experience that was efficient and positive.

  • simplify, simplify, simplify

    Up until that point it was a product made by developers for developers. A big part of our process was figuring what information was necessary and helped our users achieve their goal to successfully test and debug their apps.

researching for what's relevant

We kicked off my first week with a deep dive into user personas. We wanted to have a clear understanding of our user base, their needs and behavior patterns. Next step was to set up focus groups to understand how our site was being used, what information our users cared to see the most and what did they prioritzie. We received a lot of valuable insight through our testing such as individual test details concluding to be not as important as simply knowing the outcome of a test. Through various other approaches we were able to hone our product and continually validate our other assumptions. Specific measures were used to determine the effectiveness of our design, such as how fast a user was able to detect and fix failed tests.

  • user
    personas
  • focus
    groups
  • user
    interviews
  • usability
    benchmarking

test and iterate

The complexity of the product required us to test out a few approaches. We ideally wanted to create a seamless experience so a user could navigate between the automated and manual components of the product. One of our main goals was to also reduce our average time for user onboarding. I opted for a step by step approach where we'd educate a user over time through a series of suggestions and prompts. That helped tackle our problem of overwhelming a new user and it allowed them to learn one task at a time.

on to the visuals

Once we had successfully accomplished our goal to improve the functionality and navigational flow, we focused on creating a look that would feel consistent. We wanted to communicate reliability as it was essential to our core competency. I used a simple color palette and focused on placing emphasis on failed tests as they were the biggest point of concern for our users - something we discovered during our user research. The binary concept of pass or fail in conjunction with relevant iconography helped target that pain point and further speed up our users testing cycle.

reimagining the manual interface

Sauce Labs also had a manual interface to complement their automated solution. Although the core product primarily catered to bigger development teams, the manual component was meant more for an individual developer who would be interested in testing a single instance. I redesigned this interface from the ground up to make sure it was synonymous with our new design direction.

We experimented with a few ideas of how to best display the manual interface and eventually settled on mimicing a web browser. That allowed us to almost negate the learning curve entirely as each manual test was reminiscent of a standard browser window, making it a very intuitive experience.

color

  • #232c35
  • #e2eaf3
  • #5b7289
  • #e44448
  • #a6c330
  • #a7b4c1
  • #33afeb
  • #44b1d2
  • #a7b4c1

typography

Proxima Nova
  • Light
  • Medium
  • Bold

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

icons

how'd we fare?

Our goal was to make the tedious task of web and mobile application testing simple and enjoyable, something we were able to successfully deliver on as our users were delighted with our end product. That being said, design is never done as there’s always something that can be improved as a users needs constantly evolve.