Entrust Design System

Goal

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.

The goal of this design system is to create consistent guidance and patterns for Entrust platform and make it scalable, extensible, and manageable.

Outcomes

This case study mainly focuses on the design process of the design system. Other case studies of this project: the exam platform and the content creation platform.

Role

UX/UI Designer

Time

Feb. 2020 - Jun. 2021

Client

Stanford University School of Medicine

motivation

Why do we need a design system?

I'm the sole 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 adopt new ideas and changes. It offers flexibility to cross platforms.
Boost the efficiency of the team: It simplifies repetitive and iterative development work and leaves designers to concentrate 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 the name "on secondary" and "on Denotative" instead of "White". Such notation provides high flexibility to make potentials adjustments due to functional 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 Content Creation Platform

Icons for the Exam Platform

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 the Google Cloud Platform. To keep consistency across different platforms, I leveraged the Angular material from Google and customized each component based on 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 their 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: atomic design

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. 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 decision-making, postoperative management

Outpatient settings: preoperative evaluation, intraoperative decision-making, postoperative management

optimization

For a web-based tool like Figma, 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 function of the variant 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.