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.
2021 - 2022
Figma, ZeroHeight, Storybook
Design, QA, documentation, maintenance
Improved visual and interactional consistency by creating the new card component that aligns over 30 different components across the Zencargo platform.
• 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.
• 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.
Static cards simply display information. They contain no actions or interactions.
Clickable cards are entry points to more detailed information. They can be hovered and clicked.
Actionable cards contain one or more actions to the content of the card or the card itself.
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
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.
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.
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.
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
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
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