Sourcegraph | Product Design | 2019

Sourcegraph Code Search

Renewing the design and UX of the core feature of Sourcegraph: Code Search.

Sourcegraph Code Search project preview

The Future Sooner

At Sourcegraph, we launched our 3.0 milestone at the beginning of the year. This huge update laid the framework for our application to scale to large installs, and provide extensibility for users and companies to create extensions building on top of industry leading code search. After we shipped 3.0, we examined how we could extend search ourselves and what features we were missing. We decided to plan and build out three major search changes: A search-query "builder", saved searches, and advanced code replacement.

Sourcegraph Code Search supporting view

Technical Approachability

As I led the product development side, I focused on crafting new UI and a balanced UX between power users and new users. Our UX feedback was clear – everyone from PMs to Senior Engineers appreciated a well-designed simplistic search guide. Users wanted a linear process for finding and replacing their code directly in Sourcegraph.

After several UX testing sessions, UI review, product planning updates, and hours of revision; I worked with the engineering team to create new design paradigms for Sourcegraph that helped extend our functionality immensely. With direct interface with engineers, and shared knowledge, I was able to implement Sourcegraph's new design language that was validated in UX testing with customers and non-customers alike.

This new design system and approach was the perfect opportunity to design our new feature: search and replace. Wireframes of the process allowed everyone to remain on the same page as I worked with engineering in parallel to create the MVP.

The UX Journey Keeps Going

I was able to advance Sourcegraph design, refine the UI and UX, and update our visual language to better reflect what our customers were looking for and what will provide the best experience. Additional changes included focusing on accessibility, refining UI consistency, and adding a level of overall polish.

Sourcegraph Code Search project results

My Roles

Product Designer

UX Researcher

Partners

Engineering

Project Management

Platforms

Web