BrowserStack UX

Using Atomic Design Principles to redesign BrowserStack

BrowserStack Hero 1

Design Challenge

How might we design consistent UI patterns for efficient development

How might create a financial platform for users who have very lessknowledge of technology

Project Type

2 Month UX Design Internship


I designed the UI and the Design Guidelines for the BrowserStack website. Collaborated with Software Developers to implement the designs.


Information Architecture, Interaction Design, Visual Design, Collaboration

Article Featured On

Designer News

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

The Challenge

Although BrowserStack was massively popular & loved by developers and designers around the world because of their technology stack, their design was aging 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 & 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.

Finding Solution through Modularity

In the current age of lean UX, having 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 explored the principles of atomic design as described in pattern lab, while redesigning BrowserStack, right from the initial stages.

The Process

BrowserStack Process

We started the redesign process by defining the atoms and then combining them to form molecules, organisms, 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 the 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.

BrowserStack FInal Product

The Result

BrowserStack Impact

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.

So, that’s how we used Atomic Design Principles with a pinch of lean UX at BrowserStack. If you have had a similar experience, please do share it with the world.

See More Projects

Google Maps for WalkingEncouraging commuters to adopt walking as a daily practice

Samsung Hand Wash App for WatchHelping users build a healthy hand washing habit

Mozilla SnoozetabsAiding users to focus on the current task and save other information for later

Avail Finance Android AppEnabling Indian blue-collar workforce to achieve their financial aspirations

Samsung Wearable UXDefining experiences for Galaxy Watch,Watch Active & Active2

AI Experience on WearablesMaking day-to-day life seamless for Galaxy Watch users

OzCHI 2016 Student Design ChallengeDesigning meanigful solutions to enhance well-being among the elderly

BrowserStack UXUsing Atomic Design Principles to redesignthe BrowserStack website

Harley – Microsoft Kinect AppHelping autistic children to improve their motor and neural abilities


@2021 Parag Nandi