BROWSERSTACK
Guides Rewamp
2023 - 2 Months
Industry: SaaS
Tools: Figma | Elementor (Wordpress)
My Role: Web Design | Visual Design | UI/UX | Development
GENERAL INFO
Problem
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+.
Solution
To kickstart the redesign process, I conducted thorough research of the market and analysed the competition. Through this analysis, I was able to identify key problems and opportunities in the current guide 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.
INSPIRATION
Mood board
To begin learning about the best ways to do things in the industry, I made a list of different guide pages. I organized them by what I noticed and looked closely at what competitors are doing.
CONCEPT & IDEAS
Catalyse authentic personality
As I worked on making a really good guide page, I went on a creative adventure. I tried out lots of different designs and drawings and messed around with how big the words should be. But as I got deeper into it, I realized it was tricky to make everything fit together nicely while making sure the important stuff stood out.
UI DESIGNS
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.
ILLUSTRATION EXPLORATION
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.
SKETCHES FOR STYLES
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.
.png)
RESULTS
3X
Increase in overall page shares
10%
Improvement in overall page scroll depth
4%
increase in average pages/session
The redesign of BrowserStack's guide pages yielded significant improvements and achieved the desired objectives.Moreover, the establishment of an updated and consistent design system provided a solid foundation for future scalability and experimentation. With this system in place, BrowserStack is well-positioned to scale its articles from 1000 to 5K+ and tackle future challenges with ease.
RETROSPECTIVE
Embrace constrains
In a project like this, we faced numerous feedback, pushback, and the need for alignment from various stakeholders. The challenge was to accept all input while staying true to the project's goals and problem statement. Feedback often helped elevate the design.
Trust the process
A Version 1 feature rarely goes viral. The key is to refine, refine, refine, and not be a “one and done” kind of project.
It’s okay to walk away.
While we often become attached to our ideas, it's essential to remember that not every idea will succeed. If the data suggests otherwise, it's crucial not to become too emotionally invested. Even if initial engagement seems high, without clear insights, it's necessary to take a step back, make changes one at a time, and conduct experiments.
