Design System

A design system that is created in Figma with its auto layout and variants functions

Role

Tools

Duration

Team

System Designer

Figma
material.io
material.angular.io
type-scale.com
Funkify

02/2020 - Present

Solo Project

Overview

The goal of this project is to create a design system to support the Entrust project I did for Stanford University School of Medicine, in order to make the project scaleable, extensible, and manageable to be used by institutions of multiple counties. Entrust is a surgical decision-making assessment web platform. It provides an end-to-end solution from authoring cases to taking exams and assessing performance.

For detailed information about theEntrust project, please refer to the Entrust case study.

This case study presents the following stages:

Motivation

Brand Identity

Accessibility

Consistency

Patterns

Opetimization

Reflection

motivation

Why do we need a design system?

I'm the solo UX/UI designer and visual designer of the team. Entrust is a complex system, where corresponding designs need domain expert supports from stakeholders. Also, all team members are expected to work part-time for a long design-while-developing period (more than one year).

I found creating a design system is essential if the design want

  • To mutualize the components: We're able to easily make modifications on a part of the system and sync to the rest of the system.
  • Design consistency and scalability: It guarantees the design is consistent to adapt new ideas and changes. It offers flexibility to cross platforms.
  • Boost the efficiency of the team: It simplifies repetitive and iterative development work and leave designers concentration on the experience of the products and the users.
  • Strengthen my system thinking ability: It provides a clearer view to the inspect overall complex design from different hierarchies.

Who will use this design system?

  • Potential designer(s): They can rely on the design system to extend the designs for future purposes. A thoughtful, scalable design system will make sure the potential designers onboard quickly.
  • Programmers: The design system leverages the Angular components, which helps me and programmers speak the same language.
  • Stakeholders: The system helps stakeholders to quickly test an idea via tangible UI components and eventually reduce the cost of communication.

Brand Identity

Typography

The clients want the impression of this product to be trustable. We decided to use Roboto font because it looks clear, calm and is widely used in web platforms. With the help of type calculation (type-scale.com), I created the font system properly, which is organized by categories and text properties.

Overall Text styles

Text properties

Text details

Color Palette

We decided to use blue as the primary color because it's the color of the gown that doctors wear in the operating room. I use a material design color palette tool to choose yellow as our secondary color to emphasize certain parts of the UI, such as the submit button.

In terms of naming convention, I differentiate them by functions instead of color names. For instance, the text color on primary and denotative are the same, but I separate them into two color styles and name "on secondary" and "on Denotative" instead of "White". Such notation provides high flexibility to make potentials adjustment due to function changes.

Overall Color styles

Color properties

Color details

Iconography

Icons are differentiated by different platforms to consider the different types of users (such as authors and examinees). The Authoring Platform icons are created based on material design icons. The Exam Platform icons are designed by myself based on the reference pictures that doctors provide.

Icons for the Authoring Platform

Icons for the Exam Platform

Illustrations

Illustration assets created by myself with the reference images provide by clients

Accessibility Design

Color Contrast & Legibility

By using Contrast Checker and material design palette tool early, I was able to make sure the color contrasts satisfy the WCAG 2.1 standard.

Contrast: primary color & text

Contrast: secondary color & text

Contrast: dangerous/error color & text

Red/green color blind simulator

By using the web-based Funkify simulator, I checked the readability of the whole web. Specifically, I designed with a consciousness of the accessibility for red/green color blind users momentarily. 

Normal vision mode

Red/Green color blind mode

Design consistency

Angular Material

By leveraging the existing web dev tools, I provided professional, cohesive design solutions. For example, the Assessment Platform was built on Google Cloud platform. To keep consistency across different platforms, I leveraged the Angular material from Google, and customized each components based the need of each platform.

The angular material also has rich code templates for each component. By referring to this guidance, the programmers and I are able to communicate efficiently by speaking the same language.

Angular Material: the components section

Variants

By using the Figma Variants function, I mastered a better way to manage the components and its variations. I pre-defined different properties and variants when creating components. When used in the prototype, the dropdown menu and switch toggle enabled me to change the component to its different variations efficiently.

Design component variants

Use component variants

Auto layout

Auto layout feature allows adjustment of the layout with customized spacing and formats automatically.

Hide components

Show components

Auto layout properties

Components & patterns

Overview: Atomic Design

The system is expected to be a module system that takes care of both reusability, consistency and creativity. Thus, I found that atomic design methodology is useful in terms of organizing the structure of components. I organize the components into the following sections: atoms, modules, organisms, templates, and pages. From atoms to pages, the consistency is increasing while the creativity is decreasing.

By managing the Figma Variants function, I can organize the components to be easy to reuse, edit and combine together and make the evolutions of the product simpler.

Image credit to: https://atomicdesign.bradfrost.com

Atoms

Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface. The components have already been shown in the branding identity section.

Modules

Modules are collections of atoms that form relatively simple UI components. The examples of modules are: buttons, dialog, tabs, etc.

Button Components

Dialog Components

Tab Components

Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. In this system, they're navigation bars, menus, toolbars, cards, etc.

Navigation Components

Menu Components

Part of the Toolbar Components

Part of the Card Components

Templates

Templates place components within a layout and demonstrate the design’s underlying content structure. By using the Figma Variants functions, I created master templates with different variations. which are powerful, clean and easy to adopt.

With/without action bar

With/without subtitle bar

Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place. Below are examples of page components in the Entrust system.

Inpatient settings: preoperative evaluation, intraoperative, postoperative management

Outpatient settings: preoperative evaluation, intraoperative, postoperative management

optimization

File size

For a web-based tool like Figma, a small file size will save us a lot of "embarrassing" moments when displaying a clickable prototype in a zoom meeting. The file size could grow inevitably as the design becomes stronger. The main strategy that I use is creating two modes: the display mode and the adjust mode. By leveraging the variants function of Figma, I can switch between two modes seamlessly.

The adjust mode: more flexible of adjusting the objects in a page

The display mode: optimize the file size

Switch between different mode in the prototype

Reflection

What I learned

  • Reduce the cognitive overhead by using colors, patterns that users are already familiar with.
  • Leverage the powerful tutorials on Youtube UX/UI design channels to update my skillsets.
  • Paying time to learn and use cutting-edge techniques will eventually boost your design efficiency.

What I can improve

I understand that there are many things I need to do to optimize the design system. Here're what I can improve in the future:

  • Define clear design patterns with examples to help the team understand standards easily. It helps communication in a large working team.
  • Polish the layout and add more notes in each section to make it more readable and accessible.
  • Develop the dark mode if needed in the future.
  • Polish each section to make it generalizable to a broader use case.