BrowserStack

BrowserStack

Redesigning the most used cross browser testing experience.

Redesigning the most used cross browser testing experience.

browserstack-responsive

/01

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

/02

Initial Information Architecture and saying hi to Atomic Design

/02

Initial Information Architecture and saying hi to Atomic Design

BROWSERSTACK-IA

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.

/03

Initial Wireframes for the 3 levels

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

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.

/04

The Color Palette

Colors-Browserstack-1

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.

/05

The Typography Scale

Type-Browserstack

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.

/06

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

1-Awr3W27zyapVIdomQPu9_w

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.

/08

Learning

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

/09

Team

 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.

Like what you see?

Like what you see?

logo-cold-brew

Copyright 2018 - Raghu Nayyar

Please dont steal my stuff, eat a cookie instead.