Parcel Design System

Visual Design, Design System Documentation

RapidResponse is a product that has been building and expanding over the years. At Kinaxis, many departments contribute to the product’s growth. However, there have been inconsistencies with some of the UI components. This happens because of misunderstandings due to unclear direction. Members of the UX and Development teams pitched the idea of building a design system — a collection of UI components and guidelines. The design system’s name is Parcel.

Problem

Parcel's documentation pages needed to be designed. Also, the design system needed a visual identity, since it will be made available to Kinaxis’ clients in the future.

Objective

To design and document where each of the UI components are being used. I will need to review and update the UX style guide consistently, so that the Development team can refer to it while creating design system components.

What is a Design System?

It’s not just a Pattern Library

Design systems group all the elements that allow teams to design, realize and develop a product. This includes UI components, branding and identity, accessibility, technical documentation and a lot more.

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”

- InVision’s handbook

Why a Design System?

A Design System is necessary because they:

Using Storybook

The design system components will be documented in Storybook. Here are a few good reasons to use Storybook as the Design system platform:

  • It makes it easy to build components in isolation, outside of your app.
  • It increases developer awareness of existing components.
  • It serves as a living style guide and documentation.
  • It makes it easy to visually test edge cases.

“Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.”

Brand Identity

I needed to create a visual identity for Parcel. It was important to design something related to the product, RapidResponse (supply chain management).

The Logo

The logo needed to be simple and modern. It was inspired by modern tech brands. The concept of the icon is a box containing a parcel. This is a reference to the supply chain industry.

Eagle's Nest final logo

Icon

Typography

I chose Allumi Std as the primary typeface. It has a professional and modern, yet approachable feel. The font is also a Google web font, which makes it accessibile for web. This is important considering Parcel is a digital brand.

Colours

These colours were chosen to make the brand feel approachable and modern. Gradients are popular among modern tech brands, so some inspiration was drawn from that. White and black can also be used for backgrounds and logo variants.

Logo Guide

I created a guide for the Parcel logo. The logo guide outlines specifics such as colours, typography, clear space, etc. To see the full logo guide, click here.

Documentation

I wasn’t a part of building the design system from the ground up; but I still had an important role to play. I was tasked with designing the documentation pages — pages that display UI components, guidelines and usages.

Inspirations

I needed to get an idea of how to document the components. I looked at some of the most refined and well-documented design systems out there including: Shopify, Google and IBM. Their documentation pages are very thorough and provided lots of detailed examples.

Shopify’s Polaris Design System
Googles’ Material Design System
IMB’s Carbon Design System

What I needed to include

There needed to be content that would be useful to the UX and Development teams. I had to limit the amount of content for documentation since the design system was still in its infancy. We only needed enough to propose the idea of a design system to product management.

Components & Details

UI components will be shown first, with detailed descriptions. Some components may allow for filtering, due to the sheer number of them (ex: search bar for icons).

Component Code

It's important for developers to have easy access to a component’s code. Developers will be able to toggle on/off the component’s code; they can also copy the code directly.

Props

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. Props are very useful for Developers who are familiar with React JS.

Usage Guidelines

These guidelines indicate what to do and what not to do with the UI components. The guidelines will also need to show visuals, for extra clarity. Guidelines will help ensure consistency throughout the UI.

Documenting in Markdown

Before creating mock ups, I was asked to write all the documentation as markdown. This would allow the web developers to implement my documentation into their code. The markdown also served as a template, which I used as a guide while designing the rest of the documentation pages.

“Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).”

- Daring Fireball

I wrote the markdown in a code editor called Atom. Afterwards, I pasted the text into a helpful tool called markdown-it, which converts markdown text as HTML. My documentation markdown can be seen in the left column, and the HTML output in the right.

Mock Ups

Using Miro, I created low - mid fidelity mockups of component documentation. I made sure that each page followed the same general layout I have designed. I had to work alongside UX designers and web developers to make sure the layouts could be implemented properly.

High-Fidelity Mockups

I've finalized a design for the documentation pages. All future documentation will follow this format. However, the Design System is still in its infancy, which means that a lot of content will be added overtime.

I have the buttons component page broken down below:

Components & Details

Component Code

*This mockup uses placeholder code; it isn't actual component code.

Props

*This mockup uses placeholder props; they aren't actual component props.

Button States

Usage Guidelines

Review Implementation

After handing off my designs/assets to the development team, I had to follow-up and make sure the designs were implemented properly. I would attend bi-weekly front-end sprint demos to see the progress of the design system documentation. I had to make sure I was communicating closely and frequently with the development team.

An Ongoing Process

Myself, a fellow UX designer and 2 web developers presented Parcel to product management. My manager and the product team were impressed with the idea, and saw the benefits it will bring to the company. However, not all of the components are in Parcel; so I will need to keep updating the UX Style Guide/Parcel Documentation.

What I can take away

I learned a lot about how crucial design systems can be for products. I also realized how important it is to have consistent UI components, and how to create/update UI component documentation. Working on Parcel has also showed me how important it is to collaborate with web developers. It is important to communicate different ideas, and discuss limitations.