uBlock Origin Redesign
uBlock Origin is a free browser extension that blocks ads and unwanted content on websites. It can protect your privacy by blocking tracking scripts, preventing websites from tracking your browsing history, and blocking third-party cookies.
Project date: March 2023
Timeline: One month
Client: uBlock Origin
Services: UX, UI, User Research, and Data Analytics
Platform: Web browser extension
Why uBlock Origin?
One thing I really want to do after my UX UI design course is to work on something I truly enjoy. It's important for me to put my effort into something that makes sense and is meaningful to me.
I have been using uBlock for the past few years, and the initial installation was a great experience in terms of blocking ads. However, if I need to use another function of the extension, I am unsure of how to do so. Additionally, while the interface is simple, I do not understand the meaning of some tools, and the design is not aesthetically pleasing.
The Claim
Hootsuite found that ad blockers are used by at least 40% of the global population. Moreover, in 2018, Oxford University found that ad-blocking can have a positive impact on user experience by reducing page load times, improving battery life, and lowering data usage.
Discovery 🕵️
To gain a better understanding of public opinion regarding the product, I conducted qualitative and quantitative research with users from Brazil. I analyzed the comments section of the Chrome Web Store and conducted interviews with users of the browser extension. Here are some of the results for the topics I sought to explore:
Positive Feedback:
uBlock Origin is primarily used as an ad-blocker and privacy extension for web browsers.
Users find the ability to block ads to be the most useful feature of the extension.
Users appreciate that uBlock Origin is lightweight and does not slow down their browsing experience.
In comparison to other ad-blockers and privacy extensions, users report that uBlock Origin is more effective at blocking ads, has better performance, and uses fewer resources.
Many users appreciate that the extension is open source and regularly updated by its developers.
Users also like the customization options available with uBlock Origin, allowing them to tailor their ad-blocking experience to their specific needs.
Areas for Improvement:
Some users have expressed confusion with the advanced user settings of uBlock Origin.
Enhancing customization options
Creating a more user-friendly interface for advanced settings
Integrating with other privacy-focused extensions
Improving the handling of anti-adblock measures used by websites
Enhancing support for mobile devices and other platforms.
Target Users🪪
After collecting all the information, I was able to understand the target users of the extension:
Privacy-conscious users: users who are concerned about their online privacy and security may be drawn to this feature.
Performance-oriented users: users with slower or older devices, or those with limited bandwidth.
Power users: users who are looking for more control over their browsing experience.
Users who are frustrated with online advertising.
Competitive Analysis💪🏻
To better guide my research, I conducted a competitive analysis. This allowed me to understand industry standards and best practices, identify areas for improvement, differentiate your product, gain user testing insights, and ultimately create a better user experience. For the analysis, I chose the two most downloaded blockers in Brazil: Adblock and Adblock Plus.
Adblock Plus
User-friendly interface with clear menus and options.
Advanced customization options for power users.
Effective at blocking ads.
Can use more resources than other ad-blockers.
Performance may be slower than other options.
May not block all ads on some websites.
Adblock
Simple and clean user interface.
Easy for beginners to use.
Effective at blocking ads.
Limited customization options.
Can use more resources than other ad-blockers.
Performance may be slower than other options.
In summary, both blockers have a much better user experience and design. However, they do not have all the features and do not perform as well as uBlock.
The challenge🧗♂️
After conducting all the necessary research to understand the challenge, it's time to identify and compile the main problems related to user experience:
User onboarding: Add an onboarding process to explain uBlock Origin's features and how to configure it for optimal performance.
Customization options: Simplify the interface or add options to hide advanced settings for users who do not need them.
Clear feedback and notifications: Add notifications or pop-ups that clearly explain what was blocked and why.
Mobile optimization: Optimize the interface for mobile devices, including touchscreens and smaller screens.
Improved design: Update the design to be more modern and visually appealing, while still maintaining the focus on functionality and ease of use.
Mood Board 🖼️
As part of my research to redesign the Ublock browser extension and bring more creativity to the process, I decided to look into other browser extensions and similar case studies that could inspire me. After conducting my research, I compiled a mood board of inspiration that showcases some of the available browser extensions. These extensions were selected for their clear and concise user interfaces and overall design aesthetics.
Low and Mid-Fidelity Wireframes✍🏻
To begin, I create low-fidelity wireframes to establish the basic structure and flow of the design. Afterward, I move on to mid-fidelity wireframes to refine the details and incorporate visual design elements.
Style Guide 🗃️
To design the final screens of the browser extension, we need to pay close attention to the typeface and color scheme we choose. The right typeface can make our text more readable and visually appealing, while the right color scheme can help evoke the mood and emotions we want to convey to our users.
Click on the images to view them better.
UI Design Ideation Process⚒️
Throughout this process, I devoted considerable time to completing the design. My goal was to create a user-friendly interface that would be equally compatible with computers and smartphones, while presenting a modern and streamlined appearance.
Of all the design elements, the red box with the toggle took the longest to perfect for the best user experience. This component provides real-time updates on the page's blocking activity, and I struggled to find a way to present all of the necessary information within the confines of the box without sacrificing too much browser space. My primary objective was to prioritize the essential information and functionality within the box.
High-fidelity Prototype
To evaluate the user-friendliness of designs, I use Figma prototypes to create animations. This enables me to conduct usability testing with a group of users.
Success Criteria: Participants should be able to complete all tasks without any major issues or difficulties. The success rate should be at least 80% for each task.
Insights:
The design is intuitive and easy to navigate, as evidenced by high success rates.
Participants may struggle with customizing the settings for uBlock Origin, indicating that this feature may require additional guidance or instructions.
Usability Test
Test Objective: The aim of this test is to assess the usability of the uBlock Origin browser extension and identify any issues or areas for improvement in its design.
Test Participants: The test involved four individuals who are familiar with using browser extensions.
Test Scenario: Participants were asked to use the uBlock Origin browser extension to block ads and other unwanted content on websites. They were provided with a list of websites to visit and tasks to perform while using the extension. During the test, participants were encouraged to think aloud as they used the extension and to provide any feedback or report any difficulties encountered.
Test Tasks:
Block all ads on a website.
Block all tracking cookies on a website.
Turn off uBlock Origin for a specific website, so that ads and other content are not blocked.
Customize the settings for uBlock Origin to block or unblock specific types of content.
Turn off JavaScript on a website.
Delete an annoying element from a website.
Project Summary☑️
In summary, the redesign of uBlock Origin aims to improve the user experience by addressing several key issues. These include a lack of clear feedback and notifications, limited customization options, and an outdated design. By improving accessibility, adding an onboarding process, and optimizing the interface for mobile devices, the new design will provide a more user-friendly and efficient browsing experience. The high-fidelity prototype has been tested with users, and the success rates indicate that the design is intuitive and easy to navigate.
