Procuring a Design System for the Supply Chain

UI Design
UX Design
Product Design

Context

Following the successful launch of the Design System, I led the design initiative for a new product at iTradeNetwork. Through user interviews, market research, and industry analysis, we identified a clear opportunity: clients needed a modern dashboard to better support their daily operational decisions.
Company
iTradeNetwork
Industry
Perishable Supply Chain
Timeline
2020-2021
Role
Lead Designer

Title

Paragraph

Challenge

Following the successful launch of the Design System, I led the design initiative for a new product at iTradeNetwork. Through user interviews, market research, and industry analysis, we identified a clear opportunity: clients needed a modern dashboard to better support their daily operational decisions.
Company
iTradeNetwork
Industry
Perishable Supply Chain
Timeline
2021-2022
Role
Lead Designer

Title

Paragraph

Process

Following the successful launch of the Design System, I led the design initiative for a new product at iTradeNetwork. Through user interviews, market research, and industry analysis, we identified a clear opportunity: clients needed a modern dashboard to better support their daily operational decisions.
Company
iTradeNetwork
Industry
Perishable Supply Chain
Timeline
2021-2022
Role
Lead Designer

Title

Paragraph

Solution

Following the successful launch of the Design System, I led the design initiative for a new product at iTradeNetwork. Through user interviews, market research, and industry analysis, we identified a clear opportunity: clients needed a modern dashboard to better support their daily operational decisions.
Company
iTradeNetwork
Industry
Perishable Supply Chain
Timeline
2021-2022
Role
Lead Designer

Title

Paragraph

Figma Prototype

Paragraph

Figma Prototype

This is some text inside of a div block.

Component Demos

In addition to the styles of components, states and interactions had to be defined to bring the product to life.

Product Navigation

Cards

Data Table

Prototypes

Paragraph

Component Library — Buttons

Component Library — Input

Prototypes

Paragraph

Final Screens

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
1
2
3
4
1
2
3
4
5
6
7
8

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Next Project

Learn More →

Kristopher Shogren's Portfolio

Feel free to send me an email:
hello@cmykris.com
Site Menu
Social Media
Copyright © 2026 CMYKris LLC — All rights reserved.
Section 1

Overview

Faced with fragmented UI patterns across the platform, I built a cohesive design system that improved usability and reduced design/development redundancy.

Timeline

• 2020 – 2021

Role

• Lead Designer

Tools

• Figma
• Storybook
• Angular JS

Collaborators

• Development Team
• UX Team
• Product Managers

Section 2

Problem

The new team did not have a unified look and feel or UX principles, processes were slow, teams were disconnected. Problem exemplified even more due to the unforeseen impact of the Global Pandemic.

Problem Statement

As the platform expanded, the lack of a unified design system made it difficult to scale new features efficiently. Teams frequently rebuilt components from scratch, slowing delivery and creating usability inconsistencies.The existing UI lacked accessibility standards, responsive rules, and a cohesive visual system, creating barriers for users and limiting the platform’s ability to evolve.

Hypothesis

By defining usability standards, a component library, aesthetics, accessibility, the product team would increase the efficiency and output capacity with which to enhance current experiences and build new ones.If we centralize reusable components, then we can reduce duplicated work and minimize time spent rebuilding similar UI elements.If we standardize core UI components and patterns, then the platform will deliver a more consistent and intuitive user experience across all products.

Section 3

Objectives

These factors were a guide to understand project timelines and if I was doing a good job.

Primary

By defining usability standards, a component library, aesthetics, accessibility, the product team would increase the efficiency and output capacity with which to enhance current experiences and build new ones.If we centralize reusable components, then we can reduce duplicated work and minimize time spent rebuilding similar UI elements.If we standardize core UI components and patterns, then the platform will deliver a more consistent and intuitive user experience across all products.

Secondary

By defining usability standards, a component library, aesthetics, accessibility, the product team would increase the efficiency and output capacity with which to enhance current experiences and build new ones.If we centralize reusable components, then we can reduce duplicated work and minimize time spent rebuilding similar UI elements.If we standardize core UI components and patterns, then the platform will deliver a more consistent and intuitive user experience across all products.

Success Metrics

50%
Increase Design & Development Speed
50%
Component Adoption
50%
Inconsistencies Reduction
50%
Clear Documentation
Section 4

Discovery

Before jumping into the designs I needed to understand the industry and the users that we would be designing for.

User Interviews

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Card Title
This is some text inside of a div block.
Card Title
This is some text inside of a div block.
Card Title
This is some text inside of a div block.

Personas

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

External

Heading

  • List Item A
  • List Item B
  • List Item C

Heading

  • List Item A
  • List Item B
  • List Item C

Heading

  • List Item A
  • List Item B
  • List Item C

Internal

Heading

  • List Item A
  • List Item B
  • List Item C

Heading

  • List Item A
  • List Item B
  • List Item C

Heading

  • List Item A
  • List Item B
  • List Item C
Section 5

Process

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

A

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

B

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

C

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

D

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Section 6

Solution

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Figma Prototype

Section 7

Impact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Section 8

Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Card Title
This is some text inside of a div block.
Card Title
This is some text inside of a div block.
Card Title
This is some text inside of a div block.