Redesigning the world's most used cross—browser testing tool.
OVERVIEW
Browserstack had been working on the same, inconsistent design language since it's launch and it was all over the place. There were inconsitencies with brand colors and typography resulting in a sense of vagueness for the users to realise our different product offerings. A bloated codebase was also the side-effec of this problem.
TYPE
Design Systems
Rebrand
User Experience
Initial Information Architecture
We used the Atomic design approach to organize and name our design components. Using atomic design to organize components and splitting the pages into 3 different levels based on how we navigate to each one of them, we established the information architecture early on.
Early screens for the BrowserStack new Information Architecture, doing this made our lives quite easy later on in the redesign since we had mapped out all pages that shared similar design levels.
Template — Level 1
Template — Level 2
Template — Level 3
After defining the rebranded information architecture early on, we did a month long exploration with the color palette, grid system and the typography — the 3 basis of our design system.
The Result
The Result
The Result
The Result
Level 1 (Live Landing)
Documentation)
Level 2 (Pricing)
Level 2 (Pricing)
Level 1 (Live Features)