How might we make it easier for humans to teach machines?

The problem

In the world of machine teaching, computers learn from hundreds of micro-tasks set up by project managers who aren’t always tech-savvy, but must still configure tasks in pure code. There is a high rate of error and low level of usability.

The solution

Create a what-you-see-is-what-you-get (WYSIWYG) editor for the most common use cases, and allow JavaScript Object Notation (JSON) entry as needed.

My role

  • UX research
  • Workflow and information architecture
  • UI design and prototyping
  • User testing
Job JSON Editor wireframe

User research and journeys

I dug into all of the configuration options to catalogue what was available. A lot of options were stale, while some were used in every project. I talked with customer success team members to research how they used the current system and what they did. Their answers revealed common patterns across each task, shedding light on assumptions the system could reasonably make in order to free up project managers to focus on customizations.

Creating the structure

We needed to create a new model for task creation, one that moved away from the haphazard, do-it-all-at-once legacy method. I wanted to walk users through one step at a time. That involved architecting the data in a way that led naturally from one point to the next, and being able to perform complex associations in an interface rather than a code editor.

Early sketches of the JSON editor

The new workflow

I proposed that users work through annotation types, then object classes, and finally metadata, before ending with a preview of the generated file prior to launching the task. Advanced adjustments could be made directly in the generated preview, and would be reflected in each step of the wizard if you needed to go back and edit an earlier panel.

JSON editor mockups
JSON editor class creator