layout copilot mockup
gradient background

Interest browser

I updated the Twitter Interest Browser to use Twitter's internal tools design system with a focus on accessibility and usability, as well as interaction design that enabled sub-graph management and analytics.

/

impact

I designed a standard schema builder with embedded, real-time context-aware validation and guidance including a dynamic code / no code experience will provide a fast, easy way for all users of the Twitter Knowledge Graph to generate valid, usable schemas.

/ role

Product design, user research

/ team

Product, Engineering

/ problem

The Knowledge Graph is well... gigantic

The current design and user experience for the Interest Browser is not scalable and lacks many expected affordances for easy, fast interaction with the graph and subgraphs.

 

The Interest Browser team approached me after having worked with me previously on other Twitter internal tools work with a focus on data analysis interfaces.

 

The existing Interest Browser experience was a developer-first MVP experience shipped without consulting a design resource resulting in an experience that didn't holistically consider the end-to-end user experience and task flow.

 

The core ask from the Interest Browser team was a redesign focused on 3 themes that I synthesized from our conversations: 

 

  • Scale - the current Interest Browser experience is clunky and doesn't scale: the new experience must provide a fast and easy way for analysts to work with a network with 217m nodes
  • Cluster Management - clusters of nodes based on queries to nodes and their related metadata are the primary way that analysts work with the network
  • Network Metrics - analysts currently do all cluster / subnetwork metric analysis outside of Interest Browser -- we need to provide basic metrics within the experience

/ research

What can we do next?

Preliminary research for Interest Browser included a usability audit and task analysis. User interviews were performed to identify limitations of the existing experience and core task flows.

 

Requirements were synthesized from conversations with the Interest Browser team and task analysis conducted with results from user interviews.

  • explore flow - 1) explore and query the graph and its nodes using complex composed queries to nodes and their related metadata, 2) view overall population metrics for queries and clusters
  • create / add cluster flow - create / add sets of accounts to existing clusters
  • manage cluster flow - view and manage existing clusters and account membership
  • individual account mgmt flow - view all clusters containing specific accounts and manage account membership across those clusters

 

The "individual account management flow" was a flow added after iterative testing of the experience with users using a clickable prototype.

/ solution

Let’s build something nice 😎

The high-fidelity flows representing my identified task flows (scale, cluster management, network metrics) were validated with all stakeholders and accepted by the Interest Browser team for development.

 

Initial testing with the clickable prototype showed that the experience was able to deliver a scalable experience that reduced analyst reliance on outside tools for easy cluster management and analysis.

 

I also identified gaps in the Twitter internal tools design system, Feather. I defined new interactive components and their variations in Figma (pagination, advanced search, & filter) as well as defined network interaction modes.

 

I worked with the Feather design system teams to expand the design system with these components, a process which included accessibility and viability review.

/ selected artifacts

gradient background
megaldonatron icon

- ChatGPT

upon checking again, there are indeed two ‘r’ characters in the word ‘strawberry’