Design System Upgrade

Overview

For all users of NAB’s current enterprise product line who need to use it to accomplish their tasks, Light Blue Web is a design system based on Google’s Material UI that provides a solid, consistent and scalable foundation for all future enterprise products to be more productive, reliable and user-friendly.

Unlike other web application design systems, Light Blue Web provides a clean, elegant, and modern look and feel, which is suitable for the upcoming wave or ordinary end-users.

I led the initiative with 2 other designers to work on the documentation, design, and contribute to the front-end development of the design system.

My Contribution

Coordination
Information architecture
Documentation
UI Design
Front-end Development

Team

3 designers
1 project manager
3 engineers

Year

2017


Problem Statement

The very first user interface that we built is for the content management system (CMS) that lets the content manager manage all comic titles on our flagship comic reader mobile app. At the time, there was no internal product design team yet, so the development team naturally took on the responsibility of deciding how the interface was going to look like. They settled on Bootstrap UI.

I started out as a consumer product designer and was gradually assigned to the enterprise product position out of necessity, due to my strong background in front-end development. When I took on the product, I documented all the existing design systems and components so that it’s easier for me or any other people to start designing for new features of CMS.

I documented the old UI system

The system was notoriously hard to use, which ended up costing us a lot of money in terms of hiring and training users for the position. I tried to improve the user experience bit by bit, but because I was included too late in the process where much of the product has been defined, it was hard to make a significant change.

In 2017, the company direction changed and we were having this idea of a complete line of publishing tools that every artist could use to publish their comics to readers all around the world. It would start with said artist submitting their comic to us for review, we approve it, they decide how it would look like and publish it to readers and earn money from them.

With that direction in mind, the current design system was deemed unsuitable for the new target users. We need something more approachable, friendly, and user-centered. Hence, I led an initiative to construct a new design system for all upcoming products in this product line.

Scope

The goal was a design system that’s maintainable, extendable, adaptable, and specific to the domain of content creation and publishing.

Due to time and resources constraint, we decided to start from a solid existing foundation rather than doing everything from scratch. After doing a bit of research on what are the available design systems out there, we settled on Google’s Material Design.

Google’s Material Design System contains the core philosophy and principle of design, however, the official library of components was available for Android only. We found an unofficial community-built library and start customizing it to tailor to our needs.

Process

The design system was actually developed alongside the product design process. First, we would try to replicate a good enough version of the components in Sketch to construct the screens. Once we got enough key screens to get an overview of how the product looks and feels like, some people were dedicated to the design systems.

The steps that I took were to divide up to design system into smaller parts to be handled by different people, this way ensuring that we can run parallel. I personally oversaw both the product design and design system documentation.

Grid System

The grid system dictates all of the screens’ layouts. We decided to go ahead with a 12 column grid and defined clearly the width and breakpoints for the grid on different devices.

Grid System
Breakpoints

Typography

We decided to stick with Material Design’s default font Roboto and went on to define some text styles that are going to be used over and over again. Setting up text styles is important for maintainability so that later on changes we made to the design system can be applied globally.

Text Styles

Colors

We came up with a set of neutral colors and accent colors. Taking previous feedback that the old CMS blue was too pale, we amped up the saturation of the color to create a more exciting feel.

Colors Overview

Iconography

Material Design already has a huge library of icons, so we decided to stick with them.

Icons

Components

The reusable components are the meat of the design system, and we have a lot of them. We categorized them into 2 different types: Elements and Components, based on their scale and reusability.

Elements

  • Buttons
  • Text Fields
  • Checkboxes
  • Radio Button
  • Select
  • Badge

Components

  • Date Time Picker
  • Tables
  • Tab Bar
  • Search Box
  • Item Grid
  • Item List
Elements Overview

The components were created in Sketch and later Figma. We added in more states as the product design required it. One of the key requirements was that they need to be resizable without breaking, so that we can use the components in a variety of scenarios.

Documentation

Everything is documented down in Frontify – a cloud-based brand guidelines creation and storage, so that both the developers and designers can reference it.

Live Documentation Site

Check out the design system documentation

Real-world Application

This is how the design system looks like when used in the product design process.