overview
I redesigned the Twitter Interest Browser using 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
Conceptualized, wire-framed, prototyped, and redesigned with customer-grade polish—accessible, intuitive, and stylish—so analysts work faster without ever feeling like they’re using internal software.
role
Product design, user research
team
Design, Product, Engineering
problem
The Knowledge Graph is well... gigantic
The existing Interest Browser experience was a developer-first MVP experience shipped without 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 using Feather, Twitter’s internal tools design system. I introduced 3 themes based on identified limitations with the existing experience 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
Original Interest Browser
Interest Browser Update
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.
Core task flows:
- Explore flow
- explore and query the graph and its nodes using complex composed queries to nodes and their related metadata
- 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 introduced after usability testing identified this as a needed capability.
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.
Clickable prototype usability and experience testing validated that my proposed design was able to deliver a scalable experience that reduced analyst reliance on outside tools for easy cluster management and analysis.
pitch in
Help out where you can
While delivering on the original ask, I also identified gaps in the Twitter internal tools design system, Feather. I defined new interactive components and variants in Figma (pagination, advanced search, & filter) and defined network interaction mode patterns.
I worked with the Feather design system teams to expand the design system with these components, a process which included accessibility and viability audit and design critique.
