A design system that is created in Figma with its auto layout and variants functions
02/2020 - Present
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.
This case study presents the following stages:
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
Who will use this design system?
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
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
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
Illustration assets created by myself with the reference images provide by clients
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
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
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 feature allows adjustment of the layout with customized spacing and formats automatically.
Auto layout properties
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 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 are collections of atoms that form relatively simple UI components. The examples of modules are: buttons, dialog, tabs, etc.
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.
Part of the Toolbar Components
Part of the Card Components
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 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
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
What I learned
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:
© 2021 Yulin Cai