Compliance Metrix
An end-to-end redesign for an end-to-end supply chain management solution.

Part One

Compliance Metrix…

is a full service supply chain management software company who’s product has multi-national reach and is used by the largest restaurant brands in the world.

develops a product with use-cases that range from quality assurance departments managing, creating and resolving food recalls, food ingredient specifications, supplier on boarding, and general supplier relationships.

develops products for a multi-national user base that manage, maintain and provide insights for food product specifications, supplier on-boarding, food recalls, audit, quality management and general supplier relationship.

are transitioning themselves from being a platform company to product company.

develop and maintain a proprietary platform which includes an in-house programming language, and integrated development environment (IDE).

Our opportunity was …

to create a holistic design language that delivers recognizable, repeatable, reusable solutions in order to ensure and build on the effectiveness of our supply chain management solution.

design for complex supply chain workflows, and difficult supply chain problems into a simple, insightful and productive tool for all members in a supply chain.

We were challenged by…

an engineering centric culture whom is just being exposed to human centered design for the first time.

a dated and limiting software development platform that is behind the curve in terms of rendering an interface as well as flexibility in implementation when compared to modern client side and open source solutions.

Part Two
The Design System

Define the Problem

When examining our product there are numerous glaring and obvious user experience red flags. With such an extensive and dated system you see unestablished and reckless interface patterns that emerge from years of design debt collected due to lack of interface design ownership in the company and the pursuit of deadlines and short term gains over a longer term product strategy. Therein lied an important mission of which a design system played a part in, how might we design an impactful experience for our customers in an engineering centric culture that is just being introduced to human centered design.

Pictures Before Design System

Heuristic review main points...

  • Lack of context, visual hierarchy, cohesive visual communication and organization
  • Inconsistent, unrecognizable and unestablished interface patterns
  • Various conflicting design guidelines that developers use as reference
  • Lack of useful signifiers that show the user a clear path to completion or communicate status.

Who was the Design System For?

Because the design team is an army of two, creating a design system for other designers was not part of the problem we were trying to solve for. On a deeper level, the primary focus for us was to design a trusted resource for developers. Deliberately placing focus on developers helped us build trust and come to an understanding that the motivations for both developers and designers come from a place. We are both invested in building something great for our customers. Communicating this sentiment helped build trust and collaboration between teams. Instead of trying to forcefully institute this design system, we started to find a way to join forces. Creating a design system that is meant to work and be trusted by developers helped build a stronger working relationship between teams.

A developer at Compliance Metrix felt…

  • Confused as to what are the best practices when interfacing solutions
  • Frustrated by customers complaints and their lack of understanding of the product
  • Unmotivated because days of programming and engineering would result in little to no usage on the solution requested and developed.
  • Frustrated because developers were largely unassisted from a interface design perspective
  • Dissonant as to how their “ticket” or task would result in something meaningful to the customer

Exploring the Space

There is a range of design systems out there from many different companies. They all exist for different reasons and serve different people. Nevertheless, you can pick out key methodologies for how they look to scale large design languages.

Some of the main takeaways were …

  • Modularity is for efficiency, growth and speed
  • Co-creating and flexibility are key to scaling and adopting
  • Atomic design methodology is the standard because of flexibility and sustainability
  • Be sure the design system site is a one stop trusted source for a developers needs

The First Phase

The first immediate goal that to be able to “flip a switch” from a legacy implementation to the new “Fabric Design” implementation. Moving in this direction the first phase involved standing up the basics of the design system and begin transitioning to a more modern front-end framework.

  • Start redesigning already existing legacy components to then build more complex modular patterns
  • Introduce Atomic Design as a methodology
  • Begin introducing “Personas” as a resource for the design system
  • Introduce the modern Bootstrap 4 capabilities to our platform

Provisional Personas

The significance of creating personas was…

  • Better frame user centered conversations and discussions from the inception of a project
  • With a software that is used by many people across the largest supply chains, personas helped use encapsulate a better picture of who plays what role in a supply chain.
  • Consolidating company knowledge on customers and users

Provisional Personas are not used to…

  • used as a definitive source of truth to represent a specific user, rather provides an aggregate view.
  • Simply provide demographic information

Component Redesign

This section could be a case study of its own but for simplicities sake we will look at the main outcomes. For countless components I redesigned and introduced modern best practices for. In addition to a redesign, I included code snippets and usage guidelines. Some of the components include data tables, list items, activity feeds, cards, input fields, tabs, chips and more. Here is examples of before, and after once I documented on the design system. The design system site was build nativity on our platform, of which developers could easily access the source code through their IDE at all times.

Input Fields - Before & After

Buttons - Before & After

Choice Selection - Before & After

Part Three
App Redesigns

Atomic Design Methodology tells us that just like chemistry you start from small building block to large ones. From a design perspective this means building and designing components like buttons, input fields and dropdown first, then you create pages and templates. This proved limiting from a design perspective. It was hard to get a grasp of large more overarching UI patterns when going from the bottom-up as Atomic Design Methodology suggest.

"A system is a whole that cannot be divided into individual parts"
Dr. Russell Ackoff, Pioneer of Systems Thinking

start at 1:40

What this meant for me is that improving the individual components will not have a strong impact on he whole of our software. Instead we need to impact the interaction of the parts.

The new direction…

My new goal was to first redesign whole products for an upcoming client then refine the components and patterns used/created. What this will allow me to do is to consolidate, deprecate or create more impactful patterns because we will better understand how they impact the whole experience.

The guinea pig client for this overhaul was a large national restaurant chain who already purchased our solution years back but never used it for more than a month. They were contractually obligated to continue payments for our solution but aside from that, CMX abandoned efforts to improve or upgrade their product.

Food Product Specifications

Prior to Fabric Design System

Food product specifications is our biggest app we make. This app lets you manage formulations, finished product standards, process control points, packaging, labeling and graphics and shelf life requirements. Controlling a standard in your supply chain is key to effective management.

Currently the industry standard to manage and maintain product specification is a complex system of excel sheets. This involves managing a shared drive, formatting and managing revisions/variations. This approach created many conflicting product specifications, and resulted in untrusted source for specifications and consequently a convoluted supply chain that became harder to manage. 

The situation with our guinea pig client was that they already had purchased our food produce specification module but for years there was no activity in our system. This was in large part because their "habits of the present" or inertia with their existing solution. Additionally, this was compounded by a large learning curve that exemplified their cost of switching.

Our customers who manage and maintain product specification are creating convoluted lists of product specifications because they do not have a reliable process to input and revise their specifications. If we can solve this problem, it would impact our customers who manage and maintain quality in a supply chain because they can more effectively and reliably impact their supply chain to adapt to their changing needs. Additionally these same customers are having trouble gaining a broader understanding of the lifecycle and context of a food specification because they use many different systems for to manage food specifications and approval processes. If we solve this problem, it would empower users to learn more from their commercialization process as well as have more productive relationships with supplier partners.

Lo-Fidelity Iterations

Hi-Fidelity Iterations

Final Food Product Specification Solution

Brand new user experience and interface lets you better understand what stage your specification is on and how you can bring it to completion.

New Navigation
No more need for tabs on top and seperate navigation. Now they are all consolidated into a single UI pattern that is the same on mobile, tablet or desktop.

Easy to Get Started
To start creating a product specification, you get guided steps that make it easy to get started.

Contextual Action Bar
What was a technical limitation at first became a valueable addition to the interface. This is a contextual bar that houses all the primary actions based on where you are in the workflow.

Gallery of Full Redesign

In a similar process as "Food Product Specifications" I led many of the major redesigns such as on-boarding requests, sourcing, approval requests and much more. Here are some before and after shots.

Part Four
What's Next?

With less emphasis on supporting the legacy products I can begin to surface more meaningful interface patterns. A key learning in this step is understanding how that to make interface patterns that are understandable and learnable. Creating strong UI patterns means consolidating and removing pattern so you end up with less patterns that are more distinct to each other. This was an important premise to the following.

Overview of Tables
Clear filtering, sorting and arrangments makes it easier to find what you need from tables.

Overview of Workflows
Contextualizing and consolidating patterns allows the user to easily see the path to completion for a given workflow. Additionally providing tools gives the user more power to get insights.

One Pattern for All Workflows
A clear, flexible and informative interface pattern to handle all kinds of complex workflows. Whether a workflow has gateways, flows in parallel, requires approvals, they can all use the same pattern.

Get a Broader Understanding
When you are looking to understand root causes in a supply chain, it is important to follow the web of related parties or events. Here you get quick access to related processes and information from related apps in the system.

Redesigned Navigation
Instead of all the apps in a single large navigation, you can navigate easier based on the product category you may need.

See Who's Holding You Up
Paired with the left side navigation and this new view of approvals you can see who is holding up progress.

Contextual Toolbar
A dedicated space to get the tools you need when you need them. Compare, export, copy and collaborate.

Designed & coded from scratch by Eduardo Hernandez