top of page

BrowserStack

Guides Revamp

2022

Web Design | Visual Design | UI/UX | Developmentssss

BrowserStack is an cloud web and mobile testing platform that provides developers with the ability to test their websites and mobile applications across on-demand browsers, operating systems and real mobile devices.

OBJECTIVE

TOOLS

The primary objective of this project was to drive 2X engagement numbers for the Guide product by improving the readability of the Guide pages.

The secondary objectives included increasing average pages per session duration and setting the foundation for rapid experimentation and scaling of articles from 1000 to 5K+

Figma | Elementor (Wordpress)

Course of remedy

To kickstart the redesign process, I conducted thorough research of the market and analysed the competition. Through this analysis, I were able to identify key problems and opportunities in the current guides pages.


Readable Typography - We recognised that the readability of the content plays a crucial role in engaging users. Hence, I introduced a new typography system that improved the legibility and readability of the guide pages.


Optimized Page Layout- To enhance the user experience, I optimised the page layout by reorganising the content in a more intuitive and structured manner. By streamlining the layout, reduced cognitive load and allowed users to navigate the guide pages effortlessly.


Custom Illustrations - I introduced visually appealing and contextually relevant illustrations throughout the guide pages. These illustrations not only added visual interest but also served as visual cues to guide users through the content.


Growth Components and Micro Experiments - Recognising the importance of driving signups, we strategically incorporated new growth components into the guide pages. We also planned these components as separate micro experiments, allowing us to iterate and optimise for maximum impact.


Updated and Consistent Design System - To ensure a cohesive and seamless experience, we developed an updated and consistent design system for the guide pages. By establishing a robust design system, we created a scalable foundation that would facilitate future iterations and expansion of the guide product.

Catalyse authentic personality

In my quest to create a great optimised guide page, I embarked on a creative journey filled with endless concepts and variations. I explored diverse layouts, experimented with various styles of illustrations and played with typography scale. As I delved into this exciting phase, I encountered the challenge of harmonising multiple elements while establishing the perfect hierarchy for delivering the right information.

Making it Unique

We wanted bring a sense of excitement and relatability to our illustrations. Our goal was to create a unique illustration style for BrowserStack that would be easily scalable. Throughout the creative process, we ventured into multiple styles and directions, exploring various possibilities to find the perfect fit.

Lego Blocks of illustration system

In my creative exploration, I conceived the idea of featuring curious developers as the main characters in our illustrations. They would interact with different UI elements in their quest for answers. To achieve scalability, I devised an approach by using smaller spot illustrations arranged like Lego pieces to create hero visuals. This concept forms an illustration system that can be easily scaled for our guides, ensuring a friendly and cohesive visual experience.

Growth components

To align with our business goals and ensure scalability, I created new UI components while refining existing ones. Drawing insights from past experiments, I fine-tuned some components to make them more engaging. The aim was to foster user engagement and ignite conversions, ensuring a seamless and rewarding experience for our audience.

Have a similar project or idea? Let's discuss the details

Results and Impact

To align with our business goals and ensure scalability, I created new UI components while refining existing ones. Drawing insights from past experiments, I fine-tuned some components to make them more engaging. The aim was to foster user engagement and ignite conversions, ensuring a seamless and rewarding experience for our audience.

3x

Overall page shares

10%

Improvement in scroll depth

4%

average pages per session

Other Projects

Yogwe website

Visual Design | UI/UX | Development | Strategy

Guides Revamp

Web Design | Visual Design | UI/UX | Developmentssss

bottom of page