IBM Watson Discovery
Watson Discovery is an AI platform that applies natural language processing to extract insights from unstructured text.
I designed the layout and workflow for the annotation system, developed accessibility-focused UI components based on IBM’s Carbon Design System, and built interactive prototypes to communicate interaction patterns and user flows. I also collaborated closely with the accessibility team to ensure usability standards and contributed to a successful beta release in November 2021.
Visual Designer
Data & AI
PROBLEM SUMMARY
Watson Discovery uses Natural Language Processing (NLP) to make sense of unstructured data (ex. business reports, manuals, etc.) that contain a mix of texts, images, tables, and graphs. The Entity Extractor tool allows users to highlight words and phrases to train an ML model to extract terms related to entity types (ex. organizations, locations, proper names, etc.) from a large corpus of documents.
Users face challenges locating information in extensive text collections. They often spend significant time reading, scanning, and sifting through documents, with critical details buried in tables, images, charts, and other embedded content.
Our primary users are application developers with limited experience in AI technologies like NLP. They need the Entity Extractor tool to build structured databases and create reliable models that can recognize relevant text components in their documents.
Users face challenges locating information in extensive text collections. They often spend significant time reading, scanning, and sifting through documents, with critical details buried in tables, images, charts, and other embedded content.
Our primary users are application developers with limited experience in AI technologies like NLP. They need the Entity Extractor tool to build structured databases and create reliable models that can recognize relevant text components in their documents.
DESIGN PROCESS
The design team collaborated with the engineering team, based in Japan, through weekly meetings and continuous discussions on GitHub and Slack. In coordination with the information architect and UX designer, the project was structured into three primary components: the side panel, toolbar, and document canvas.
Side Panel and Toolbar: These components provide users with the tools needed to highlight text and train their models.
Document Canvas: This is the main work area where users can focus on annotating text within a document. Initially, our process involved applying Carbon components to the workflow. However, we encountered challenges due to the lack of predefined Carbon guidelines for annotations.
To address the absence of Carbon annotation guidelines, I researched existing annotation and highlighting tools, focusing on accessibility considerations. I also reviewed similar annotation interfaces within IBM’s product portfolio, discovering a tool from another Watson product that served as a foundation for new components. These components were updated to meet the specific accessibility and usability needs of our project.
Side Panel and Toolbar: These components provide users with the tools needed to highlight text and train their models.
Document Canvas: This is the main work area where users can focus on annotating text within a document. Initially, our process involved applying Carbon components to the workflow. However, we encountered challenges due to the lack of predefined Carbon guidelines for annotations.
To address the absence of Carbon annotation guidelines, I researched existing annotation and highlighting tools, focusing on accessibility considerations. I also reviewed similar annotation interfaces within IBM’s product portfolio, discovering a tool from another Watson product that served as a foundation for new components. These components were updated to meet the specific accessibility and usability needs of our project.
COLOR, CONTRAST, AND ACCESSIBILITY
We aimed to provide users with at least eighteen colors for the beta release. Starting with Carbon’s data visualization library, I selected colors with built-in coded values for implementation and ensured they met accessibility standards for contrast.
Upon applying these colors to mockups, I noticed the brightness values were insufficient for the tool’s use case. To align with the highlighter and neon marker aesthetic, I opted for brighter RGB values. While Carbon’s color library offered many options, I expanded the palette by including non-Carbon colors for added variety.
For each selection, I paired a background color with a 4.5:1 contrast ratio with the text and an outline color with a 3:1 contrast ratio against the white background. The accessibility team validated the palette’s suitability for users with vision impairments. Additionally, we included a superscript type symbol associated with each entity type to ensure compliance with accessibility guidelines, which prohibit relying on color alone to identify text.
Upon applying these colors to mockups, I noticed the brightness values were insufficient for the tool’s use case. To align with the highlighter and neon marker aesthetic, I opted for brighter RGB values. While Carbon’s color library offered many options, I expanded the palette by including non-Carbon colors for added variety.
For each selection, I paired a background color with a 4.5:1 contrast ratio with the text and an outline color with a 3:1 contrast ratio against the white background. The accessibility team validated the palette’s suitability for users with vision impairments. Additionally, we included a superscript type symbol associated with each entity type to ensure compliance with accessibility guidelines, which prohibit relying on color alone to identify text.
SIMPLIFYING AI
Given that users are often unfamiliar with the intricacies NLP, we focused on providing actionable information without overloading them with technical explanations. For example, tooltips and modals avoided verbose descriptions that could disrupt the workflow.
A common scenario involves a user highlighting a word such as "Toyota." The Entity Extractor tool offers to highlight all instances of “Toyota” in the document, but only if they match the exact title case.
NLP’s case-sensitive nature means that lowercase (“toyota”) or uppercase (“TOYOTA”) instances are excluded unless specifically highlighted. Instead of explaining this in detail, the tool uses a suggestions feature to flag alternate spelling styles. This approach helps users recognize and address case discrepancies without requiring deep NLP knowledge.
A common scenario involves a user highlighting a word such as "Toyota." The Entity Extractor tool offers to highlight all instances of “Toyota” in the document, but only if they match the exact title case.
NLP’s case-sensitive nature means that lowercase (“toyota”) or uppercase (“TOYOTA”) instances are excluded unless specifically highlighted. Instead of explaining this in detail, the tool uses a suggestions feature to flag alternate spelling styles. This approach helps users recognize and address case discrepancies without requiring deep NLP knowledge.
CONCLUSION
By addressing challenges in AI usability we created a tool that empowers developers to efficiently extract meaningful insights from unstructured data. This project highlights the importance of collaboration across design, engineering, and accessibility teams to deliver solutions that are both innovative and user-centered.
As AI technologies continue to evolve, ensuring they are approachable and practical for diverse users will remain a critical aspect of design.
As AI technologies continue to evolve, ensuring they are approachable and practical for diverse users will remain a critical aspect of design.