title_pics_ChemPoint.jpg

CHEMPOINT

UX & UI Designer

the
PROJECT

ChemPoint, an integral part of Univar, is an international chemical distribution and management company. For an industry that deals with dangerous and volatile substances, safety and proper handling are a primary concern.  Documentation is the critical and required vehicle regarding safety, application and consumption of said chemicals.  This created the need for a document engine capable of extracting the necessary data to generate insights and drive proper product stewardship for ChemPoint and its Partners.

Visual Design

Interaction Design

UX Design

User Research

User Testing

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.  I was engaged in every facet of the project's development including, tool/process audits, user interviews, personas and journey mapping, conceptual dataflow and site map generation, workflows, wireframes, high-fidelity prototypes and design system integration through UAT.  The first release established a consumable service that could scale as future needs and endpoints change.

Adobe Photoshop CC

Flowmapp

Invision

Lucidchart

Microsoft Office 365

Sketch

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

Conceptual Dataflow

Conceptual Dataflow.png
“I need to have a single centralized library to search for and store product collateral,”
PCS, Product Collateral Specialist
PCS - User Journey Map.png
user
RESEARCH

Product related documents and certifications are a core necessity of ChemPoint's business. An audit of current tools and systems revealed 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.

Extensive interviews, detailed personas and journey maps yielded a solid problem statement, user roles, their respective workflows and a unified vision. After our discovery sessions, I had sufficient information to begin laying out a site map.

Document Management App.png

DMS Site Map

Lucidchart_screen.png
ux
DESIGN

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 and low-fidelity wireframes according to each individual user permission and story.  These allowed me to work through page goals, content, storytelling and the user's journey before beginning the UI design.

high-fidelity
WIREFRAMES

While the low-fidelity wireframes allowed me to make structural and UX 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.  I purchased a comprehensive UI kit and began laying out the high-fidelity wireframes in Sketch.

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 touchpoint.

colors_CP.jpg
desighn_system.jpg
high-fidelity
PROTOTYPE

Before getting lost in the nuances of final design, I finalized the wireframes and honed in on the visual design of the UI kit - capturing content strategy and the application's foundation first.  The application is designed to serve as a management platform for a vast disarray of product documentation.  Effortless navigation was front and center.  The final application design did just that.  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.

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

sketch.png
invision.png
hi-fi_prototypes.jpg
prototypes.jpg
project
SUCCESS

The application is projected to establish a singular, global, point of truth for all product related documents and certifications, while decreasing fines for improper record keeping as well as positively affecting workflow and freeing up resources for business expansion.

Company Logo.png