title_pics_ChemPoint.jpg

CHEMPOINT

Product Designer

the
PROJECT

ChemPoint, an integral part of Univar, is an international chemical distribution and management company. Documentation is the critical and required vehicle regarding safety and proper handling of dangerous and volatile substances.

To stay compliant, product documents need to be formatted, indexed, stored, and searchable to generate insights and drive proper product stewardship for ChemPoint and its Partners.

Previously, to retrieve product documentation, inventory staff engaged in a slow and complicated process of inaccurate documentation, convoluted navigation and multiple storage locations. This ill-supported workflow resulted in lost business, scattered and incomplete libraries and wasted hours managing product documents and communications.

ChemPoint needed a "Consumable Service" that automatically formats, indexes and stores product collateral, and enables the user to efficiently upload, search and download vital documentation in a few simple steps.

Visual Design

Interaction Design

Experience Design

User Research

User Testing

how it
WORKS

The Document Management System or "Consumable Service" is a unified and extensible OCR/AI/ML foundation and indexing architecture which, automatically pulls metadata from a variety of input sources to be stored in a central library.

 

A highly performant search feature enables the user to then retrieve documentation quickly and effectively.

*For definitions select terms from the link menu on the right.

Conceptual Dataflow

Conceptual Dataflow.png

Specific functions and tasks of the OCR include:

  • Identifying and removing duplicate and expired versions of ingested documents.

  • Splitting combined files into individual documents.

  • Identifying document content type.

  • Identifying and capturing metadata.

  • Assigning a “confidence” score relating to probability of successful capture and identification.

    • If “confidence” score meets the minimum requirement, the OCR will automatically complete archival process and document storage.

    • If “confidence” score DOES NOT meet the minimum requirement, the OCR Engine will push any document to a queue for manual review.

my
ROLE

I joined the project as Lead Product Designer, partnering with PMs and Business Analysts to complete a regionally supported single point of truth for product related documents. Primarily focusing on product documentation and certification, the pilot release established a consumable service that could scale as future needs and endpoints change.

I was specifically tasked with designing the user experience and GUI for manual intervention - the process where the user needs to edit and extract content/metafata from rejected documents.

Adobe Photoshop CC

Flowmapp

Lucidchart

Microsoft Office 365

Sketch

Invision

Responsibilities: Product design including, experience, interface and visual design, UX research, wireframing, prototyping and UAT.

feature
SCOPE

Top Evaluation Criteria for the DMS - long term:

  • Varied options for ingestion, including, manual uploads, automatic pull from email and existing product/certification libraries.

  • Regionally supported single point of truth for product related documents.

  • Supports OCR/AI/ML as well as metadata management and indexing.

  • Document workflow and self-service tools, replacing existing web applications.

  • Security compliant with authentication, permissions and access controls.

  • Enable extension into other document heavy process areas.

  • Performant and robust search and retrieval of product documents/certifications. Internally and within web assets.

Scope for launch remains isolated to Product Documents and Certificates, this immediate release  requires the following to be complete and operational:

  • A (graphic) user interface layer to serve as a template.

  • Working prototype with complete UI for the manual document intervention stage.

  • A unified and extensible OCR/AI/ML foundation for subsequent process and UI pillars.

user
EXPERIENCE

As a ChemPointer, I want the ability to upload a variety of documents to a consumable service which automatically formats, indexes, updates, and stores my content in a centralized library which I can then effectively access, search and retrieve to my discretion.

Scenario - Uploading a product document to the centralized library.
* this user scenario applies specifically to my role with the project

  • Having received product collateral from my supplier...

  • I subsequently upload it into the DMS...

  • And allow the AI/OCR to attempt to identify and capture the required metadata...

    • If successful, it will automatically complete archival process and document storage.

  • If unsuccessful, the OCR will reject the document and queue it to a GUI where I can manually review and update the content prior to reinserting it into the DMS...

  • Given that I am on the DMS manual intervention GUI...

  • I can navigate the UI to manually perform the functions of the automated AI/CR process - this includes, opening, previewing, splitting documents and extracting, indexing and saving the required metadata.

* Core project user scenarios revolve around managing data (version control, updates, completeness), as well as searching for and retrieving documentation.

personas-TCA
“I need to have a single centralized library to search for and store product collateral.”
PCS, Product Collateral Specialist

Complete DMS project vision

Vision.png
Document Management App.png

Site Map - Product Documents and Certificates*

* Scope for pilot launch

Lucidchart_screen.png
my
PROCESS

Confronted with an ambitious site map, it was only natural for me to break it up into manageable sections. Using comprehensive diagramming software, Lucidchart, as well as my trusted pencil and paper, I would create specific workflow diagrams to explore each individual user permission and story.  These allowed me to work through page goals, content, storytelling and the user's journey before building out wireframes.

I was specifically tasked with designing the user experience and GUI for manual intervention - the process where the user needs to edit and extract content/metadata from documents rejected by the OCR.

​Extensive interviews, detailed personas and journey maps yielded a solid problem statement and a unified vision. For the user to manually extract the required metadata from highly technical documents case quickly become a very strenuous task, that requires patience, an eye for detail and a thorough grasp of volition chemicals and their applications - the risk for error was extremely high. Immediate validation allowing the customer to move quickly through all critical steps with assurance was the key. So when I was working in the UI, I made sure to keep it intuitive and universal, leveraging radio buttons, multi-select drop-downs and auto-suggest enabled form fields.

design
SPECIFICS
  1. Allow for drag and drop capabilities for manual document uploads.

  2. Comprehensive tabular overview of rejected documents and certificates - default column headers to be the required data source fields.

  3. Limit action stripe for manual data entry to basic choice of user actions - cancel, save, replace, archive.

  4. Leverage radio buttons, multi-select drop-downs and auto-suggest form fields for immediate validation allowing the customer to move quickly through all critical steps with assurance.

  5. Employ modals as an additional confirmation validation and user error prevention fail-safe.

  6. Document-type specific data source form field presets for manual data entry, content audit, and ticketing requests.

wireframes &
PROTOTYPES

While the low-fidelity wireframes allowed me to make structural recommendations earlier in the process, the high-fidelity wireframes begin to solve the problem of how to communicate the application's features visually.  By optimizing the information architecture, I made sure that the application was future proof and ready for new product additions and growth.

A consolidated effort of inter-disciplinary collaboration, frequently user-testing prototypes, and numerous fine-tuned iterations ensured unwavering user empathy and delightful product making the all to often arduous task of metadata processing far less loathsome.

hi-fi_wires.jpg
UI-kit_comp.jpg
upload_comp.jpg
visual
IDENTITY

I frequently referenced brand strategy and attributes when developing the visual language.  Building upon ChemPoint's well established (and recently updated) design system helped me create a holistic experience that felt trusted, progressive and delightful at each touch-point. An abundant use of white space allowed for the unobtrusive organization of form fields, buttons and other branded elements, all while creating the desired hierarchy for the content.

colors_CP.jpg
desighn_system.jpg
user
EXPERIENCE

The application is designed to serve as a management platform for a vast disarray of product documents. Effortless navigation was front and center for100% manual uploading, review, editing and metadata entry.

The sketch plugin, Craft, provided seamless exporting of all asset styles into Invision for the overseas back-end development team.

  1. The manual document intervention GUI efficiently enabled the user to remediate any issues which triggered the Consumable Service to reject auto-processing a document.
     

  2. The upload tab mirrors the AI's document-type specific form field presets with auto-suggest, allowing for the expedited manual transcription of image files, digital scans and hand-written forms.
     

  3. A performant search feature with auto-suggest drop-down interactive filters precisely retrieves documents and certificates of interest.
     

  4. The "My work" tab enables the user to review documents, compare versioning, update metadata and consequently save, archive or publish the most current version of a document to a secure and centralized library.

sketch.png
invision.png
hi-fi_prototypes.jpg
prototypes.jpg
project
SUCCESS
  • The DMS pilot enabled significantly higher proactive document management processes for product documents and certifications.
     

  • Undeterred impact to all connected tools and services - including: SEO, Website UX, Whiteboard, etc.
     

  • Speed of changes and expansion is nonrestrictive to ChemPoint's business objectives such as, confidence score calibration, on-boarding new process areas/document types, new methods of ingestion, etc.
     

  • Established a single, global, point of truth for all product related documents and certifications.
     

  • Project pilot completed in 2021 with frequent releases, all under $250k for each process pillar.

future
ADDED VALUE

Pilot project pillar

  • Document heavy operational processes - $50,000 (Efficiency)
     

  • Bid list integration - $37,000 (Efficiency)
     

  • Pocessing simple customer requests - $12,000 (Efficiency)
     

Long term vision

  • Sales order inbox ingestion
     

  • Enhanced product search on eCommerce/websites
     

  • Mobile OCR to supplement eCommerce
     

  • Externally facing services or supplement to analytics
     

  • Contract auditing

Company Logo.png