Bloop logo and tagline "Developer multi platform code search" above a laptop showing the code search interface

Bloop : AI code search, from six interviews to a shipped extension

ROLE
Senior UX Designer
TEAM
Two founders, engineering team, designer (me)
COMPANY TYPE
Startup, Y Combinator, Developer Tools
YEAR
2022
DELIVERABLES
User research, Product Design, Onboarding
MEDIUM
Desktop app, VS Code extension, Web

TOOLS

  • Figma
  • React
  • Tailwind
  • VS Code extension

Bloop was AI-assisted code search for developers, built at a Y Combinator startup in 2022, before the category had a name. I ran the research and designed the product: six developer interviews, a competitive teardown of the incumbent, the search and result interface, and the onboarding.

EARLY USERS

120

Onboarded to the extension

ADOPTION

70%

Reached through interviews and rapid prototype iterations

QUERY TIME

−50%

Time to find a reference, against the previous flow

Overview
Product overview: search, results and code pane
Product overview: search, results and code pane
Challenge

“Can't navigate the code well, only can search”

Sourcegraph owned code search and developers used it reluctantly. It was heavy, the onboarding was counter-intuitive, the licences were expensive, and it lived in a browser tab rather than where they worked.

The bet: put AI-assisted search across every repo in an organisation, inside the editor developers already had open.

2022, before the category existed

The findingDevelopers did not need better search. They needed the code around the result.
Decisions that changed direction

Evaluated → Rejected → Changes

Decision 1: Search inside the IDE, not somewhere else

All
Code
Videos
Libraries
CSS Styles
Shipped: search inside the IDE

Decision 2: Killed the web tab

Removed the web search
Scoped to code across repos and paths
Scoped to code across repos and paths

Decision 3: Related code, without leaving the result

Shipped: related code on the open result
Shipped: related code on the open result

Decision 4: Authors and history on the line, not in a separate tab

Shipped: owners and history on the result
Shipped: owners and history on the result
Shipped: owners and history on the result
Shipped: owners and history on the result

Decision 5: Commits and author profiles, so devs could see who was making the changes

Shipped: commit activity and author profiles
Shipped: commit activity and author profiles
Shipped: commit activity and author profiles
Shipped: commit activity and author profiles
Supporting Screens

Some additional screens.

Bazel repo page: Branches tab

Repo profile: branches

Open a repo directly and browse its branches, alongside contributor and activity stats in the sidebar.

Bazel repo page: Files tab

Repo profile: files

The file tree for the repo, each entry with its last commit message and when it landed.

Bazel repo page: Commits tab

Repo profile: commits

Full commit history for the repo, filterable, with author, hash and message.

Commit diff, side by side view

Commit diff, side by side

A commit opened as a side-by-side diff, with a toggle back to a single unified view.

Bazel repo page: Contributors tab

Repo profile: contributors

Everyone who has contributed to the repo, plus its backers, in one place.

Bazel repo page: single-page accordion layout

Repo profile, single page

An early exploration collapsing overview, files, commits, branches and contributors into one scrollable page instead of tabs.

Shared results page with annotations sidebar

Shared results, with annotations

A shared link showing every file and comment together, so a reviewer sees the whole thread without opening each result.

Share result modal with a comment on selected code

Commenting on a shared result

Select a range of code in a shared result and leave a comment directly against those lines.

Share result modal with a colour highlight picker on selected code

Highlighting a shared result

The same selection, coloured instead of commented, a lighter way to flag a range before deciding what to say about it.

Key findings & iterations

Finding

Solution

Developers would not leave their editor to search their own codebase

Shipped as a VS Code extension rather than a web destination

Mixing web pages, code and video under one tab made every result harder to scan

Removed the web tab and scoped search to the framework in use

A matching line means nothing without the code and the history around it

Code summarisation with a toggle, plus authors and commit history on the result

Onboarding assumed you already knew the framework you were searching

Rewrote the first run around install, authorise, then one real search inside a minute

The Results

EARLY USERS

120

Onboarded to the extension

ADOPTION

70%

Reached through interviews and rapid prototype iterations

QUERY TIME

−50%

Time to find a reference, against the previous flow