How We Used Atomic Design Principles While Redesigning BrowserStack

To give a brief intro about BrowserStack, it is one of the most sought after cloud-based cross-browser testing tools in the world. It enables developers to test their websites across various browsers on different operating systems and mobile devices, without requiring users to install virtual machines, devices or emulators. You can see the final website at browserstack.com

The Challenge

Although BrowserStack was massively popular and loved by developers and designers around the world because of their technology stack, but their design was ageing in terms of UI.

I joined the BrowserStack design team during the summer of 2015 and my primary task was to redesign the BrowserStack website. The goal was to give it a clean, modern, and robust look and make the UX scalable to fit the ever-growing number of devices and browsers. At the same time, we wanted to make it the least time consuming for our front-end developers to code and ship the website.

The Solution: Modularity

In the current age of lean UX, modularity in design is an essential step to consider. It saves a ton of repetitive manual work and lets you focus more on the user and their core needs.

So, we started exploring the principles of atomic design as described in pattern lab, while redesigning BrowserStack, right from the initial stages.

The Process

We started the redesign process by defining the atoms and then combining them to form molecules, organism, templates, and so forth. This was aimed to avoid the repetitive coding process for similar organisms and make the product release faster.

As we had started the design process with the philosophy of modularity, the development side of it was also done keeping modularity in mind. It allowed the code to be reused for similar organisms which simplified the task of the developers.

Spend as much time on copy as you do on visuals— John Zeratsky, Design Partner at Google Ventures

Final Product

Once the UI was ready, we started off with the visual design and the results of our efforts so far were clearly visible in the final redesign. We were able to bring out the robust and modern look and feel to our website.

The Result

As the code was being reused extensively, the development of the product became lightning fast, so much so that we were designing the pages during the day and by evening the front-end was already done and ready to be shipped. Our developers loved the new approach and so did our users, as it brought more uniformity in our design. It made the experience more homogenous and was able to reduce the unnecessary cognitive load on the user.