Natural Language Processing Interface for the Hobbit

A product design exercise by Keenan Sultanik to create an interface for adjusting the automatic categorization of a natural language processing engine when the Hobbit is inputted

Explore the Case Study

Advent Health Partners Design Challenge

Keenan Sultanik, July 21, 2021

Designing a user experience for adjusting the automatic categorization of a natural language processing engine
🕑  Project Duration: 3 hours
🖥  Apps Used: Figma, Whimsical

Understanding the Problem

The browser-based app must be able to present the user with a list of terms categorized into places, characters, and creatures. From there, the interface must allow the user to recategorize the terms within the taxonomy if an error is spotted. The goals for the project are as follows:

1. The user must be able to easily spot errors in the NLP categorization
2. The user must be able to easily make changes and quickly verify the results

Defining the Challenge

Designing the interface for the natural language processing engine (NLP)

The Provided Prompt

NLP (natural language processing) is a big buzzword in many industries including healthcare. NLP is used to target key text and classify it. This allows users to create reports with data they didn’t previously have. For example, people will use NLP technology to determine what the latest trends are in google searches or tweets. Your challenge, design an application that will allow a user NLP/machine learning knowledge to validate the NLP entities extracted is accurate.

Specifically, take a page from The Hobbit and design an application that is used to verify the identified entities (classifications) are correct. This application, should pull persons (ex. Frodo), places (the Shire) and creatures (ex. wizard). Your tool should allow a reader to see which entities were identified and allow them to confirm or reject (ex. The machine highlighted hobbit as a character name, but it isn’t- how will the user let the machine know that hobbit is not a character name and that it should be classified as a creature?) .

User Flow

The flow for the user is fairly straightforward. The interface must allow the user to upload a document, then review the results of the NLP and verify/change entries’ categorizations as needed. One helpful feature that was identified during this stage was the ability for the user to view the context of the term in the uploaded document, in case the user might not be sure what categorization would be most correct. This feature should be accessible via the dashboard without cluttering up the interface. Viewing the original document might be helpful to the user by reducing the likelihood that the user would need to switch to another application during the process. The Change Log and Settings pages were not included in the visual design of this project for time’s sake.

    Designing a Solution

    Framing the Solution with Stated Goals

    The goals identified at the beginning of the project are repeated here:

    1. The user must be able to easily spot errors in the NLP categorization
      2. The user must be able to easily make changes and quickly verify the results

    These goals were acheived by the following:

    •  Entries on the dashboard were laid out already assigned to categories since this seemed like it would be more beneficial to the user than presenting the entries in appearance order. By grouping the classifications from the start, users should be better at spotting the entries that do not belong than if they were jumbled up in appearance order.
    • To reinforce which category the user is currently verifying (especially for long lists that exceed the screen height), icons and category names are listed for each entry for quick reference.
    • Actionable items are displayed in the green accent color for improved usability while NLP-generated content is generally displayed in the purple accent color.
    • Users can make changes directly on the entry without having to first open up a  •••  sub menu. This should improve speed and allow newer users to easily discover all of the interface features visually.
    • The “view in context” feature allows the user to see a snippet of the reference to make a determination on which category would be most appropriate, which would be especially useful to someone without prior knowledge of Tolkien’s writings.
    • Changes animate so that the entries are removed from the current category and sent to the new category when the user makes a change, thus providing the user with confidence that the change completed successfully.
    • While concepts at smaller breakpoints (like tablet- or mobile- sized) were not included in this design solution, the layout is based on a grid and would be simple to create in the future if necessary.
    • Please view the video at the bottom of this page to see some of the possible micro animations that could improve the user experience and confidence in the interface.

    Visual Design Solution

    Prototyping in Figma

    For the visual portion of the solution, I designed the interface in Figma and then added connections to build out a working prototype. After the prototype was built, animations were added to explore the solution from a motion design perspective.

    Thank you for viewing my case study.
    Like what you see? Let’s get in touch.

    —Keenan Sultanik