Colors: A New Accessible Palette

According to the survey results, defining a new EXOS brand color palette was the highest priority. With WCAG 2.1 guidelines, the tech community finally started to clear standards and good practices to follow. Unfortunately, the color contrast between white and the action button colors in the existing color palette (blue/green/red/yellow) did not pass the AA-level compliance requirement.

To define the new primary color, we conducted a series of research from company branding, in-product application, and color combination accessibility perspectives.

After a month of careful analysis and comparison, we created our new color palette with naming conventions, application scenarios, and recommended accessible color combinations.

Typography: dynamic System Fonts

After evaluating the commercial subscription and development customization effort, we decided to take the "dynamic system font" approach - using the operation system font instead of one selected font. Although it is not the best option for brand identity, it is the most practical strategy given all the conditions. After that, we identified font classes with style details and application scenarios for each platform.

Iconography: visual Consistency

After evaluating the commercial subscription and development customization effort, we decided to take the "dynamic system font" approach - using the operation system font instead of one selected font. Although it is not the best option for brand identity, it is the most practical strategy given all the conditions. After that, we identified font classes with style details and application scenarios for each platform.

Button

4 Colors can be applied to the buttons. Blue is the standard color with neutral meaning; green means success; and red means danger. In addition, Text Button also has a gray version which indicates neutral meaning with lower importance(subordinate).

Regular Button has 3 different styles that indicate the level of emphasis: Contained > Outlined > Text. Icon Buttons also has 3 different styles that indicate the level of emphasis: Icon Contained > Icon Light > Icon Only. Cross Card Button works both as an interactive button and a page section divider. It only has a light blue version.

Input

Text Field allows users to enter information(letters, numbers, and special characters) using the keyboard or other input methods (such as voice). Hint text indicates the acceptable information format. Adjustable Text Field allows users to adjust the height of the text field by dragging its right bottom corner so that a long paragraph can fit into the field.

Single-selection list allows the user to select one item from a set. Dropdown and radio buttons are the two common components we use to present a single-selection list.

Multi-selection list allows the user to select one or more items from a set. Checkboxes are the most common components we use to present a multi-selection list. A checkbox does not apply the settings at an instant. Instead, it requests a “submit” button and takes effect after the user presses it. Toggles always indicate whether settings are on or off. When users turn a switch on, they expect an instantaneous action as soon as there’s a change in the visual cue. Therefore, toggles don’t require a “submit” button to trigger the action. Chips are an alternative to checkboxes(multi-selection) or radio buttons(single-selection). They display options in a compact area and bring extra visual emphasis to the selected options.

Card

Layout Cards are used to create the layout and define the boundary of information groups. Modal Cards are used to present information or actions that the user needs to focus on. There are 2 types of Modal Cards: Pop-up Card appears at the center of the screen; Slide-out Card moves in from the left or right side of the screen.

A card’s height and width can be either responsive or fixed. To set up a card with a responsive width, you can simply define how many columns this card takes at each viewport.

Tags

We use Attribute Tags to differentiate items and highlight specific characteristics that users need to pay attention to. The two commonly used attribute tags are “order attributes” and “provider attributes”. We use Status Tags to show the status of an order or a process. A status tag contains two elements: an icon with color indication and the label text.

Modals

Pop-up Modal shows up at the center of the screen. It contains 3 sub-elements: Header (the title of the modal), Body, and Footer (action buttons). Slide-out Modal moves in from the left or right of the screen. It also contains 3 sub-elements: Header (the title of the modal), Body, and Footer (action buttons).

A Modal can serve various purposes such as provide controls for users to complete a task, display view only content, and ask for a decision.

Navigation

Application Navigation visualizes the structure of the app and guides users to find the information they need.
‍
A - Primary Top Navigation allows users to navigate between top-level entities (such as lines of business and products), and to access global actions such as user profile and search.
B - Secondary Top Navigation appears directly under the Primary Top Navigation and allows for navigating between features within the selected product.
C - Side Navigation appears on the side of a screen and allows users to navigate through a set of sub-features within the selected feature.

A card can have its own navigation bar (as the card header).

Planning & Collaboration

As the UX Lead of the project, I work with the UI Lead to create the project plan, initiate discussions, and manage progress. Each release consists of three periods: the design sprint for research and creation, the development sprint for building and testing, and the post-release period for communication and feedback gathering.

To guarantee the quality of the final products and eliminate communication gaps, we must ensure the consistency between the components the designers use and the code snippets developers apply. Therefore, we keep our XD UI Kit Components and Design System Code perfectly matching by utilizing design tokens.

A design system should never be a set of disciplines for people to follow but a cocreated toolkit to empower the team. My biggest fear with a design system is that the team would start to rely on the design system too much and lose the motivation to challenge the existing solution or think out of the box. Instead of forming a deligated design system team, we encourage all the UX team members to contribute freely and directly. With an "In Progress Component Playground" XD file, all the designers get a chance to drop in ideas and comment on the components the others are working on; with a Weekly Design System Meeting, the designers and developers get to exchange ideas and debate solutions.