Browser extension (Sourcegraph)

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Preferences Deny Accept

Privacy Preference Center

When you visit websites, they may store or retrieve data in your browser. This storage is often necessary for the basic functionality of the website. The storage may be used for marketing, analytics, and personalization of the site, such as storing your preferences. Privacy is important to us, so you have the option of disabling certain types of storage that may not be necessary for the basic functioning of the website. Blocking categories may impact your experience on the website.

Reject all cookies Allow all cookies

Manage Consent Preferences by Category

Essential

Always Active

These items are required to enable basic website functionality.

Marketing

Essential

These items are used to deliver advertising that is more relevant to you and your interests. They may also be used to limit the number of times you see an advertisement and measure the effectiveness of advertising campaigns. Advertising networks usually place them with the website operator’s permission.

Personalization

Essential

These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. For example, a website may provide you with local weather reports or traffic news by storing data about your current location.

Analytics

Essential

These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues. This storage type usually doesn’t collect information that identifies a visitor.

Confirm my preferences and close

PROJECT DETAILS

Company

Sourcegraph

Year

2020

Platform

Chrome & Firefox

My role

Product Designer

Team

Product Manager, 2 Developers

PRODUCT

Sourcegraph

Code Intelligence Platform that lets developers search and explore all of their organization's code, perform large-scale changes and gain unique insights about the codebase.

Browser extension

Sourcegraph browser extension adds code intelligence to files and diffs on GitHub, GitHub Enterprise, GitLab, Phabricator, and Bitbucket Server. The extension works by default on GitHub. For other code hosts, additional permissions are needed.

DESIGN DEBT

Currently implementation was created as a minimal solution by our engineering team and has never been revisited as a whole.

Over time, more steps and requirements were added to the process. It created a need for design refactoring to ensure that debt is paid off and that the solution provides a clear and intuitive experience for Sourcegraph users.

DISCOVERABILITY

Sourcegraph browser extension is communicated very early in the onboarding experience. Users see the popup after 1 day of use of Sourcegraph. They usually dismiss it because they are overwhelmed with learning the product.
Popup is displayed only once, with no reminder.
There is no installation trigger in the app besides the popup. Users need to go to Sourcegraph Docs.
Browser extension is advertised only for the users of the given browser.

AWERNESS

Communicating value - users usually don’t fully understand why they need the extension and how it works.
Addressing security concerns - users are not sure if it is safe / secure to use. They worry that extension is uploading their private code to Sourcegraph outside of their self-hosted instance.

SETUP FOR PRIVATE CODE

By default, Sourcegraph extension works only for public code. For private repositories, users need to connect the extension with their instance URL.
For new users , the flow comes to the dead end. After clicking ‘Configure Sourcegraph’ button on GitHub, they see the extension popup with generic Sourcegraph URL. There is no information how to proceed and how to change the URL.
Adding the URL - it needs to contain the full address (with https://) but there is no information or field validation provided.
On GitLab, Bitbucket Server, and Phabricator - Sourcegraph can be turned on the code host level by an admin so there is no need to bother regular users.

GENERAL USABILITY

A high-level problem with the browser extension's usability is that the experience is scattered. We're not walking users smoothly through the whole experience: from installation to using it on code host.
We need to communicate the extension's status: if it's working, whether it should be working at a given moment, is it properly configured, is it pointing to the private instance and if it's working on this repo/file.
When the extension is turned off, the icon doesn’t change - It still looks active.

USABILITY TEST (CURRENT SOLUTION) 🧪

Summary

The goal of this usability test was to:

Observe the current flow of users installing the browser extension and configuring it for private GitHub repository
Verify the problems identified so far (discoverability, awareness, setup for private code, general usability)
Discover any friction moments that are missing
Create a baseline for the usability testing after introducing the improvements

Tasks

Get familiar with intelligence tooltips on Sourcegraph
Install the browser extension
Browse public code on GitHub
Try use extension on your private repositories on GitHub
Configure the extension for private repositories

Results

All of the friction moments listed in the RFC were confirmed by this study.

🚨 One critical issue: Making browser extension work on private code‍

5 / 8 testers didn’t understand that they need a private Sourcegraph instance, even after reading the Docs
8 / 8 testers described documentation and the task as confusing and difficult

URGENCY & IMPACT

Enabling people to install the browser extension and easily use it with their private code is a high-impact change since the extension usage directly influences the MAU, and with that, the company's bottom line.

In addition, the current flow is discouraging for users and does not allow for benefiting fully from the product.

The Impact-effort matrix used to prioritise Design Debt issues.

COMPANY GOALS

Company objective

Increase the MAU (Monthly Active Users)

Project goal

Increase the number of people installing the browser extension.

Project goal

Decrease the number of people uninstalling the browser extension.

Project goal

Reduce friction when using Sourcegraph for private code.

Our users

Developers

Browser extension is used day-to-day mainly by people fitting into a Developer persona.

Focused on efficiency and reducing friction while working
Used to patterns from IDEs and other developer tools
Interested in integrating Sourcegraph into their existing workflow

FLOW

I've analysed the path from learning about the browser extension, through understanding its value, up to installation and using for private code. I defined numerous touch points that we can improve or introduce to provide a cohesive experience since this was a high-level problem with the current solution.

Areas affected by changes

Viewing the file on Sourcegraph - 'Open on GitHub' button design and behaviour
'Download the browser extension' banner - design and logic
Installation flow
Browser extension popover (in the browser)

DISCOVERABILITY & AWARENESS

One of the biggest issues so far has been that users are not aware that Sourcegraph has a browser extension and what are the benefits from using it.

Browser extension is a key part of the flow between Sourcegraph and the code host - it moves Sourcegraph's code intelligence (going to definition and finding references) directly to the code host's interface. Improving the awareness and usage will directly impact the MAU and the company's bottom line.

'Install the extension' banner & User menu

I've switched a 'get the extension' popup to an inline banner to reduce the number of users dismissing it
It uses the code host logo and name in the popup (taken from the currently viewed file)
We display the alert for the first time after the user saw at least 2 hovers (code intel tooltips)
I've added the link to extension installation page to the user menu - it is accessible at any time
After dismissing the alert, inform about the link in the user dropdown menu by showing a contextual tooltip

Flow: banner to user menu

'Install the browser extension' popup

Show the popup when the user clicks on the ‘View on [$code host]’ icon for the first time
Popup is adjusted for the code host according to the currently viewed file

Popup: install the browser extension

Extension store content

I've updated the visuals for Chrome Extension Store and Firefox Add-ons
I focused on including brand elements (colours, gradients) and showing the value of the main features

Post-installation page

I've used the moment right after the installation for branding trust and explaining the value
This page includes all of the necessary information about hot to use the extension
I've recorded videos for every section that the page feel more interactive and engaging

Browser extension post-installation page

USABILITY IMPROVEMENTS

I've differentiated three functional spaces that we could use for extensions: top horizontal, bottom horizontal and vertical. Each of those spaces has its pros and cons in relation to the needs of the extension action items.

Extension popover

Better URL field validation - loading state while connecting, user-focused errors, more reliable success messages
Value of the extension explained in the copy
List of supported code hosts
Granting permissions possible only for the code hosts. Edge cases like user being on a random website or Sourcegraph Cloud are well-served now
Granting permissions for private repositories is clearly explained in the extension context

Extension popover: general usability improvements

Extension popover: granting permissions

Extension popover: communication about private repositories

USABILITY Testing 🧪

We've created a v.1 of implementation to test browser extension in the conditions as close to real-life experience as possible. We wouldn't be able to achieve the same effect with Figma prototype. I've invited 7 people for the test: 3 external users and 4 teammates from different departments who have just joined the company.

Tasks

Install the browser extension (from the alert)
Start using it on public code on your code host
Adjust extension to work on your private code

The results

👍 7/7 completed all of the tasks

👍 5/7 had no issues adjusting the extension for private code, 2/7 spent more time reading the documentation but they figured it out within the planned timeframe

👍 6/7 people noticed the copy about extensions value and were interested in reading it

🤔 3/7 people closed the banner immediately and mentioned that they would prefer to explore Sourcegraph first, then come back to the extension

🤔 2/7 people pointed out that autoplaying videos on the post-installation page might be overwhelming

MEASURING THE SUCCESS

KPIs & metrics

Extension usage measured by the delta between installation and extension removals
Extension usage measured by the extension DAU (daily active users)
Extensions new users measured by the number of installations
Ease of use measured by the number of support tickets and feedback related to the browser extension

Impact on company goals

Increasing the number of browser extension users and interactions will positively impact our bottom line. Interactions with the code via browser extension are counted as interactions with the product. Clients pay attention to how much their employees use the product and what is the ROI on buying Sourcegraph.