Case Study

Case Study

Case Study

BrowserStack - Redesiging the world's most used cross-browser testing tool.

BrowserStack - Redesiging the world's most used cross-browser testing tool.


BrowserStack - Redesiging the world's most used cross-browser testing tool.

BrowserStack - Redesiging the world's most used cross-browser testing tool.

01
01

Problem

Problem

Problem

Problem

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.
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.

02

02

Initial Information Architecture and Atomic Design

Initial Information Architecture and Atomic Design

Initial Information Architecture and Atomic Design

Initial Information Architecture and Atomic Design

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 throughout the landing pages. Parag, our intern, blogged a much more detailed post about this split.

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 throughout the landing pages. Parag, our intern, blogged a much more detailed post about this split.

BROWSERSTACK-IA

03

03

Initial Wireframes for the 3 levels

Initial Wireframes for the 3 levels

Initial Wireframes for the 3 levels

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.

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.

Level-1-Browserstack
Level-2-Browserstack
Level-3-Browserstack

04

The Color Palette

The Color Palette

The Color Palette

The Color Palette

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.

Colors-Browserstack-1

05

The Typography Scale

The Typography Scale

The Typography Scale

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.

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.

Type-Browserstack

06

The Result

The Result

The Result

The Result

live-landing@2x

Level 1 (Live Landing)

FAQs

Level 3 (Documentation)

pricing (1)

Level 2 (Pricing)

Level 2 (Pricing)

features

Level 1 (Live Features)

07

Response

Response

Response

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.

1-Awr3W27zyapVIdomQPu9_w

08

Learnings and Team

Learnings and Team

Learnings and Team

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 style guide 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 KhemaniSagar PatilAaron DurhamArun Pattnaik and our awesome intern Parag Nandi.

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 style guide 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 KhemaniSagar PatilAaron DurhamArun Pattnaik and our awesome intern Parag Nandi.

logo-cold-brew

Copyright 2019 - Raghu Nayyar

Please dont steal my stuff, eat a cookie instead.