Zencargo design system - cards

Overview

Card was one of the most challenging components to work on during the upgrade of our design system: there were more than 30 different components that can be called "cards" on Zencargo platform.

What defines a card in our design system?
How to categorise all the "cards" on our platform?
What should and what shouldn't be included in a card?
How to create consistent yet highly flexible card variants?

My work answered all the questions above.

Time

2021 - 2022

Tools

Figma, ZeroHeight, Storybook

Tasks

Design, QA, documentation, maintenance

Outcome

Improved visual and interactional consistency by creating the new card component that aligns over 30 different components across the Zencargo platform.

The component

Anatomy

• Heading is the only required element pinned to the top of a card. It should be short, clear and descriptive;
• Icon is an optional element to indicate the content of the card;
• The actions element is used by actionable cards. It contains one or more actions to the card. When it contains call to actions, the element should live on the bottom;
• Content should be a summary of the card. It is fully customisable and can include multiple elements.

Implementations

• Cards should follow the grid system or occupy the full width of their containers;
• Grouped cards should have the same height;
• Cards can be static, clickable or actionable, static and clickable cards don't contain the actions element;
• Card contents should relate to one specific subject;
• Use cards to focus on a single task or break more complicated tasks into multiple flows.

Examples

Static card

Static cards simply display information. They contain no actions or interactions.

‍

Clickable card

Clickable cards are entry points to more detailed information. They can be hovered and clicked.
‍

Actionable card

Actionable cards contain one or more actions to the content of the card or the card itself.
‍

Identify existing "cards"

Identify existing "card" components

Maintaining a design system at a young and fast-growing startup like Zencargo was difficult. After a successful series B in 2021, our design team finally had the capacity to tend the UX garden and upgrade our design system using atomic design methodology.

Card is one of the components I get to work on. It was also one of the components we need to redesign from the scratch. My first task was to walk through the platform and identify every existing components that can be a card.

Existing "card" components on the platform

Find similarity in inconsistency

There were more than 30 different components that can be called a "card": a container with information relating to a specific subject, although they weren't following a certain visual or interaction pattern.

My second task was to find similarity, group and categorise those "cards". To make it quick and easy, I simply grouped the "cards" based on their contents and interactions:

1. Static cards: displaying information with no interactions;
2. Clickable cards: entry points to more detailed information;
3. Actionable cards: containing one or more actions to the content;
4. Expandable cards: expandable;
5. Information board: contain compound structure of information.

Define the cards in Zencargo design system

The definition of cards

After identifying and grouping all the existing "cards", one question came to us: should all those "cards" be cards? What defines a card in the new design system?

I went through some of the best design systems. Their definition of cards are similar with our existing "cards": a component displays content and actions relating to one specific subject, although every design has different card anatomy and behaviours according to their content and structure.
‍
As a digital freight forwarding platform, Zencargo manages a huge amount of complex data for our users. We would like to keep our platform visually clean and simply to avoid overwhelming our users.

To make the card component simple and consistent, we decided to exclude the existing "information board" from cards in the new design system. Cards will contain a summary of one subject and allow users to act on it.

Actions and interactions

Based on the new definition, we also decided to exclude "expandable cards" from cards in the design system: cards should only contain a summary of information which shouldn't be hidden.

Therefore, the remaining components that were eligible to be cards could be clearly categorised by their actions and interactions:

1. Static cards: simply displaying information (including empty states);
2. Clickable cards: entry points to more detailed information;
3. Actionable cards: containing one or more actions to the content.

Compositions, consistency and flexibility

The composition of cards

Looking at the existing "cards" on the platform, the card subjects usually relate to a piece of shipment information. Depending on the type of the subject, a card may contain: an icon (optional), a title of the subject, a summary that describes the subject, and one or two buttons.

Compositions of some of the existing "card" components

The balance between consistency and flexibility

As we have known the existing interaction patterns and compositions of "cards", the next step was to design the cards that are flexible yet visually consistent for different subjects on Zencargo platform.

One of the challenges was to make the interactions of clickable cards and actionable cards more consistent. Clickable card is the only type of cards having a hover state - a drop shadow effect. To make the cards more visually consistent as well as align the interaction patterns with other components, we decided to replace the drop down shadow effect with a more subtle interaction effect for clickable cards.

Previous hover interaction of clickable cards

Another challenge was to create flexibility for different actions in actionable cards. Based on the existing subjects and action types, the actionable cards could have following scenarios:

1. one primary action (primary or icon button);
2. a pair of opposite actions (e.g. approve and reject);
3. a series of actions in menu button;
4. one supporting action hidden in menu button (delete, unpin, etc)

Variants of actionable card

Empty states

All three types of cards (static, clickable, actionable) have different empty states.

1. Static card empty state simply show an empty result. Data can be added outside the card if possible;
2. Clickable card doesn't have an empty state, as empty content has no further detailed information;
3. Empty actionable card can only contain an action of adding data. Users can directly add data inside the card.

Empty static card v empty actionable card