layout copilot mockup

Schema builder

I created the first web-UI for the Twitter Knowledge Graph, providing users with a web-based no-code interface for interrogating, creating, and managing schemas in the Twitter Knowledge Graph.

/ 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

Not everyone speaks .JSON

Adding new entities and fields to the Knowledge Graph was done by writing schemas in their native JSON format with no real-time validation or guidance, a near-impossible and time consuming task for those unfamiliar with writing schemas.

 

Certain classes of entities and their fields have specific requirements which require the user to research and cross-reference from disparate and often incomplete documentation.

 

The process of writing schemas directly results in large amounts of time wasted generating invalid, poorly documented schemas with hard to diagnose syntax and composition errors, or entire teams waiting indefinitely for a schema writing resource to become available.The Twitter Graph team approached me with the current status (a simple schema explorer) and an ask; a schema builder that is accessible to all users, not just those adept at writing schemas in their native JSON format.

/ research

How can we enable more users?

I identified the primary personas (Data Engineer, Data Analyst, Product Manager) expected to utilize the new Schema builder tool. I then interviewed current users from each of the personas to understand their experience using the current state (writing native .JSON / outside resource) and identify major areas for improvement.

 

The primary issue with the existing experience was that... there was no experience, users just write .JSON, which isn’t a capability of all of the personas. This limitation meant that many would-be users instead had to wait for someone who knew how to write .JSON in order to complete their task flows.

/ solution

Context-aware schema building

I created the first UI for Twitter Knowledge Graph schema management, providing users with a web-based no-code interface for interrogating, creating, and managing schemas in the Twitter Knowledge Graph.

 

The design is a schema builder with add-ons that make the experience usable for all personas.

 

Key features include:

  • Table and code based schema representation
  • Affordances for interrogation, creation and management
  • Dynamic code / no code experience
  • Real-time validation
  • Embedded context-aware guidance

/ validate

Are we doing this this right way?

Wireframe base task flows were validated by both the Knowledge Graph API team as well as with expected users of the experience.

 

Clickable high-fidelity prototypes were used for usability user testing across personas. Validated flows were roadmapped by the Knowledge Graph API team for development.

/ selected artifacts

chat gpt

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