Sourcegraph
Designing for Code Insights at Sourcegraph
As a Product Designer intern at Sourcegraph. I worked on incorporating code-based visualizations in the core developer workflow using inline and global references.
MY ROLE
Research, UX/UI Design and Facilitation
Duration
May 2022 - Aug 2022
Tools
TEAM
Code Insights
design project
Inline and Global references
Code Insights is a new feature launched by Sourcegraph in February 2022. Prior to this, it's most used product was Code Search. The core developer workflow, hence, comprises of the use of this feature. To encourage developers to explore Code Insights, it was to be incorporated into the core workflow.
Note: Inline references to insights are those that appear within the code as functions, variables etc. Global references are those that reference the file or repository.
How might we provide cues in the core developer flow to direct Code Search users to explore Code Insights?
Approach 1
Separate global and inline references
gutter to show inline references and button on top
The inline references appear in the gutter on the left of the code editor. They can be toggled on and off from the new “Insight” icon in the extensions panel. The global references would appear at the top in a dropdown.
Approach 2
Global and inline references together
gutter to show inline references, popover for global
The team was still reviewing and discussing what the most optimal solution to the problem would be. Please reach out to me if you have any questions about this project!
research
Usability test
In order to understand users' preferences, I prepared a research study to validate the positioning of the sort functionality in an Insight card with clickable prototype variations.
Early stage product research
On account of the fluctuating economic situation in the US, Sourcegraph implemented a strategy shift to focus on the core workflows. As a result, we revised the product’s primary focus and researched to gather customers’ wants and needs.
facilitation
The purpose of this workshop was to kindle and distill ideas for the redesign of ‘All Insights Page’ as it lacked basic functionalities like search, filter, sort and view options. Here's a glimpse of the design thinking workshop I planned and co-facilitated with my manager, Alicja Suska.
reflection
Learnings
1. Design in an industrial environment is very different from an academic setting
This includes design documentation, exploration, feedback and review from designers and engineers, validation research and testing, design handoff, and product maintenance. It varies significantly from designing in academic settings where business needs, cross-functional collaboration, and resource limitations are fewer as compared to industrial settings.
2. How to design for a technically complex product
Designing a tool for developers to develop better requires a thorough technical understanding of the product’s capabilities and intentions.