BrowserStack UX
Using Atomic Design Principles to redesign BrowserStack
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
Role
I designed the UI and the Design Guidelines for the BrowserStack website. Collaborated with Software Developers to implement the designs.
Skills
Information Architecture, Interaction Design, Visual Design, Collaboration
Article Featured On
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 & 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
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.
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.
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