ALICJA SUSKA
SOURCEGRAPH

Browser extension

Paying off Design Debt to improve discoverability and awareness.

PROJECT DETAILS

Company
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.

PROBLEM SPACE

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

AWERNESS

SETUP FOR PRIVATE CODE

GENERAL USABILITY

USABILITY TEST (CURRENT SOLUTION) 🧪

Summary

The goal of this usability test was to:

Tasks

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

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.

impact effort matrix

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

Solution SPACE

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.

User flow for browser extension
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
Browser extension popover

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
Browser extension store assets
Browser extension store assets
Browser extension store assets
Browser extension store assets
Browser extension store assets
Browser extension store assets
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
Browser extension before and after

Extension popover: general usability improvements

Browser extension before and after

Extension popover: granting permissions

Browser extension before and after

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

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.

Go to the next project
Back to top