User Experience, Case Study
Browserstack Rebranding & Redesign
Browserstack was working on the same design language since it's launch and it was all over the place. As a small example, the number of colors used on the website were over 100 and there was no consistency in typefaces used. All in all, every products looked different from the other. This become a problem for users to realise Live and Automate were under the umbrella of Browserstack as well a super bloated front-end codebase at our end. We had to fix that both these problems.
The Initial Information Architecture and Atomic Levels.
We used the very famous Atomic Design approach to tackle this gigantic task. We called every small detail of the page an atom, which combine to form molecules, then organism and then the templates. Now these templates were a bunch of reusable components we used through out the landing pages. Parag, our intern, blogged a much more detailed post about this split.
Initial Wireframes for the 3 levels
As you can see from the above IA, we started doing the first version of the wireframes of the first, second and third level pages. We tried keeping the molecules (sections) consistent in order to ease out the design and the development process.
The Color Palette
We played around with a lot of colors and finally narrowed it down to the following palette, promised to adhere to it and oh boy, we did.
The Typography Scale
We wanted a very polished and upbeat sense of type while focusing heavily on the basics. We played with different sans serif combinations and font sizes based on the modular scale. We finally decided to use Source Sans Pro for the headings and Myriad Pro for the content.
Digging deeper into type, we also set a 21px baseline grid which was respected throughout our visual design in the later scales. Also, the progression in font sizes involved mathematics and a lot of tweaking with different heading sizes.
After an year long stint with BrowserStack redesign, we finally deployed the all new Browserstack redesign and this is how it looks now.
Every page we deployed for the Browserstack redesign was fully responsive for mobiles, tablets, desktops and huge ass screens. Here is how the new Automate looks on and iPhone and an iPad.
Since Browserstack is a very heavily used product by the developer community, the redesign instantly picked up on twitter and we mostly got some good response from our users.
As a part of the five member design team handling an entire redesign, focusing on the right problems and a well thought out process was key. Following a very rigid styleguide and a component first approach made ours and developer's lives much simpler in the later stage because both the teams were reusing components (or habitats).
We were 5 people, highly cross functional design team and all of us played a super important role in the redesign. We are basically Lokesh Khemani, Sagar Patil, Aaron Durham, Arun Pattnaik and our awesome intern Parag Nandi.