Creating a card component for a crossplatform (web & app) design system with hundreds of users
One of the most requested components for EE’s Loop design system was a card component. There were many types and styles of cards being used across the business so this component needed to be flexible to suit a variety of use cases. I researched, designed, documented and tested a new card component that is now being used across all teams in digital. The card component has helped drive consistency, improved reuse of design system components and reduced time to market across digital.
Project goals
01
Reusable across app and web
EE's design system covers both app (Flutter) and web (Next.js) so it was imperative that the component is built with both in mind and considers other factors, such as light and dark mode.
02
Accessibility baked in
Every Loop (EE's design system) component comes with accessibility, such as automatic aria-attributes and semantic code, built in.
03
Easily customisable
Cards were being used for a variety of journeys, ranging from product cards to in-life notifications in the app. The card component needed to easily flex to these varied use cases.
First we needed to hear about what people needed from a card component
A card component is one of the most widely used components in most design systems and comes in a nearly limitless variety of styles. In order to understand which features and configuration options would help our design system’s users the most, I scheduled interviews with designers and developers to hear about their wishlist and gather existing designs that use card components.
Then we could research other design systems and best practices
Before sketching out various potential component structures
Building the card component with design system tokens and atoms
And testing them with designers and developers for usability
Getting feedback from users in beta
