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).
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.
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.
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.
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.
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.
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.
The significance of creating personas was…
Provisional Personas are not used to…
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.
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.
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 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.
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.
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.
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.
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.
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.
A dedicated space to get the tools you need when you need them. Compare, export, copy and collaborate.