Using Browser Extensions for Prototypes

User Experience professionals are passionate about the benefits of using prototypes early and often in the product development process. These prototypes save the team time and development effort by catching design issues before they are cemented in product-ready code. Prototypes can be as simple as a paper model of the concept to fully detailed representations made to behave exactly like the final product. Typically the complexity and specificity of a prototype increases as product development moves along from exploring ideas to finalizing design details.

However, even the most complex high-fidelity prototypes often have to be tested narrowly since usability study participants have to stay along a specific usage path to maintain the illusion that the prototype functions as the real product would. This can lead to problems that aren’t caught until after a product’s release, including:

• users entering the product from unexpected contexts
• users maneuvering through portions of the product thought to be irrelevant to the task at hand
• improper accounting of how users interact with their own data as opposed to stock data

But for web products used on laptops and desktops, there is a handy solution: using browser extensions as a prototyping tool.

What are browser extensions?

Extensions are small software programs that can be written to augment the behavior of the web browser. For instance, with the Pinterest browser extension installed, hovering over any image in a website with your mouse (such as on Wikipedia as shown left) reveals Pinterest’s “save” button which allows you to quickly add that link to the service.

Browser extensions provide an additional user interface above the hardcoded interface of the website. They can be used for augmentations as simple as changing the color of a header to adding functional features that do not exist in the website itself. Since the modifications are happening in the browser and not literally on any specific site, changes can apply to a multitude of sites all at once and don’t require administrative ownership over the site.

How we’ve used browser extension prototypes in our own team

Our team has been working on an web service inside of Google to be used by our engineers. The information from that service crosses through many internal products and sites that are built by other teams within Google so testing with real data and user flows is critical to the success of the project.

This is where a chrome extension comes in. When a user has the chrome extension installed we can overlay new UI over the existing web pages they are already using. We can experiment with changes to diverse web pages and projects without all the complex logistics that would come from synchronizing code development across so many teams.

Using the extension, we were able to rapidly evaluate significant changes in six major rounds of design iteration. In each iterative cycle we conducted both formal usability tests and more natural “beta” tests in which a large number of Google employees agreed to install the chrome extension and report any problems they encounter doing their day to day work. Between testing cycles we varied the visual styling and content of UI components that appeared in the sites we wanted to integrate with. We were even able to experiment with introducing entirely new UI components to these web pages that didn’t exist on them at the time. Most importantly, for each iteration we were able to test our service with users’ real accounts as they went through their actual workflows. By the end, we were able to settle on a stable design to all our partner teams that would satisfy the needs of our shared users. These designs were provided with confidence because they were vetted through the study of real users.

Using this process we were able to learn several things:

1. How our service could be helpful to users in their existing day-to-day workflows
2. How to integrate with other services in a way that preserves & doesn’t distract from those workflows
3. What information and what actions were most valuable within specific parts of people’s workflows

So when should you consider creating an extension instead of a typical stand-alone prototype?

Since extensions augment existing websites, the best use case for them is in the context of redesigning an existing experience for the web. You should consider prototyping on web browser extensions if…

• You are redesigning an existing website that has many navigation pathways into it and/or within it
• The content on the website changes regularly and its quality varies. For instance, if users are creating content because the website is a social media or blogging platform.
• You are trying to steer users away from specific problematic behaviors and/or encouraging them to partake in new behaviors
• Or, if like us, your service is integrated with a lot of other products or services and you want to see the impact of your service on them

What kind of user studies make the best use of web browser extensions?

Web browser extensions can work in standard lab usability studies but their potential is best realized when users are allowed to install and utilize the prototypes on their own computers to augment their day to day lives.

Diary studies in which a group of users install a browser extension and provide qualitative feedback on their experience over a period of days or weeks allow designers to see what impact the design may have without making any underlying (and potentially expensive) changes to the website.

If this group of users is large & properly sampled, quantitative data can be utilized to compare the behaviors of users with the extension installed with those without it. While small change A/B experiments can be done without browser extensions for changes within a single design, extensions also can be used for observing macro behaviors in significantly different paradigms without having to build two entirely different websites.

Lastly, because browser extensions allow for the creation of a new UI layers in many places on the web, the modifications don’t have to be on a website you own. If there is a site that is similar enough to your own website, you can use it as your experimental testing ground for a user study. If you want to explore how design decisions would hypothetically impact a competitor to your site you can design such a study as well.

How do I get started?

Partner with a developer who has built extensions in the past or learn to make your own! Learn more about how to build browser extensions that work on Google Chrome by following this link: https://developer.chrome.com/extensions/overview