browserstack

Rebranding and building a design system.

challenge Build a design system with a style guide and UI components that reflects the B2B nature of the brand.

role Build a design strategy, conduct user research, sketch wireframes and code the UI and CSS framework.

BrowserStack wanted to build a consistent design language for their products. As the design lead, I was responsible for designing the style guide and the UI framework using atomic design. The major components of the design language that needed work were:

Style guide
Prior to this, the company had never invested much time in creating brand voice, tone and design guidelines. My primary goal was to create a brand and UI pattern guideline that could also lay the groundwork for a scalable front end code base.
Color palette
The lack of a design system in the old UI led to a volume of similar colors being added to the system. To ensure consistency and scalability of the design system, we chose a color palette composed of hues and shades of a single color.
UI components
UI components and interfaces in the old design were designed quickly, often from wireframe to final designs within the browser. The lack of a standard meant that the same UI element on different pages looked different thereby confusing users. Atomic components along with the style guide brought consistency in structure and design to the entire brand.

Style guide

The framework of the style guide was built around a grid system and typographic scale. Using a modular scale helped bring balance to the design by helping us choose a scale on which UI components could be designed.

12 column grid with layout permutations

Typographic grid set to the perfect fourth scale

BrowserStack Style Guide - From elements

The UI atoms we designed for building UI components

BrowserStack Style Guide - Notifications

Notifications and alerts for desktop and mobile

Color palette

009cfc Base
142433 Masthead
f0f0f0 Background
333333 Primary text
999999 Labels
68b300 Success
e74c3c Error
fdf085 Warning

Atomic units

Level 1 template - for landing pages

Level 2 template - for feature pages

Level 3 template - for documentation pages

Once the grid system, typographic scale and color palette had been fixed, we created atomic UI elements that could be combined different ways to create unique layouts. These included form elements, notifications, tables and more, across desktop and mobile.

Results

BEFORE: Home page

AFTER: Home page

Live features page

Mobile features page

BEFORE: Testimonials page

AFTER: Testimonials page

BEFORE: Pricing page

AFTER: Pricing page

Mobile emulators page

Remote Device Lab page

Responsive layouts are based on responsive UI components

Learnings

Start with a typographic scale.

Prior to the redesign, the lack of a design system made calculations of sizes arbitrary, resulting in increasing inconsistency in UIs. Design decisions were often subjective involving many direct and indirect stakeholders to get final design approvals.

To build a design system and develop a mathematically based rationale for designing layouts, I learned about using a modular scale. Using Type Scale we selected our base range of values. Designing layouts based on a set of values derived from a common base helped us establish balance between the various UI elements. By establishing sensible base values, font sizes, line heights, grid sizes and layouts could be derived rather than arbitrarily chosen.

For engineers, the typographic scale made it easier to manage the front end framework. Making a change to a base variable would make changes to all corresponding UI elements derived from it. This helped ensure that the UI scaled proportionately without having to make changes to multple files.

A/B test your designs with a real audience.

While the reaction to the redesign was positive, many users were frustrated with the new support page. We had made it more cumbersome for users to solve their problems themselves. As a result, support channels were inundated by requests for help to problems that were previously easy to find.

Our initial hypothesis was flawed. Based on previous support queries, we assumed users would only require a few FAQs from each category. Hence, we removed the search bar to browse all FAQs. This confused users since their only choice was to manually browse each category to find solutions to questions that were not in the FAQ's. Many users found this to be arduous and instead chose to contact support.

We initially considered using a third party support management tool like Salesforce but eventually decided to roll our own system since we did not require deep search support. Integrating with a third party tool would have eased coding, design and support efforts and time, allowing the team to work on other bugs/fixes.

Acknowledgements

Thanks to Arun Pattnaik, Lokesh Khemani, Parag Nandi and Raghu Nayar for helping execute the style guide and working with the front end team to implement and deploy the new designs. I also want to thank Vaibhav Mehta and Jatin Hariani for building the front end style guide and putting up with a number of "tweaks and fixes" towards the end.

Visit BrowserStack

Sagar Patil

Rebranding and building a design system.

Style guide

Color palette

Atomic units

Results

Learnings

Start with a typographic scale.

A/B test your designs with a real audience.

Acknowledgements

Case studies

zealth ai

hdfc bank

sauce labs

browserstack

browserstack

jawe