Whisk Design System

Standardization of Poll Everywhere’s design system, aligning cross collaborative teams and driving team efficiency.

Design System

DATE

PROJECT TYPE

2021

TEAM

Design: Geetha Pai, Janet Li, Oscar Ko
Engineering: Daniels Lee, Shibo Fang

Product Designer

COMPANY

Poll Everywhere

ROLE

THE CHALLENGE

Achieving Team Alignment and Boosting Productivity

It’s 2020, teams were effectively starting from scratch with each new project or phase kick-off. This process was very repetitive since I had to create a new components library every time. This meant that we just kept redoing many elements whilst changing their appearance slightly, to fit new use cases. This method resulted in teams doing repetitive work and lacked consistency between design and implementation.

If There’s No Source of Truth, Create One

The Design team was using Figma as our source of truth, while the Engineering & Product teams were using Notion. This was identified as our first point of friction. We needed a single source of truth that was accessible to ALL teams, now introducing Storybook!

Previous Workflow

  1. Design new component

  2. Document component use case and specifications in Notion

  3. Engineering refers to Notion for implementation

New Workflow

  1. Design new component

  2. Add new component to design system

  3. Document component use case and specifications in Notion

  4. Engineering adds component and specifications into Storybook

  5. Teams refer to Storybook for component implementation and usage

THE BENEFIT

The Impact of a Centralized Design System

  • Centralized repository for components, patterns, and styles

  • Scalable management of design updates across projects through a unified system

  • Shift designer focus from visual tweaks to solving complex problems, ensuring visual and functional consistency

  • Accelerate design process by using pre-built components and elements

  • Minimize redundancies and maintain design consisteny

  • Streamline communication between design and development teams, reducing wasted effort

THE APPROACH

01

Laying the Foundation

I started with the basics, loosely following the Atomic Design Methodologies to create a style guide for the Design team to follow.

The style guide consists of:

  1. Logos

  2. Colors

  3. Typography

  4. Iconography

  5. Border Radius

  6. Spacers

  7. Effects

02

Accessibility Baked-in

Higher-ed comprised 65% of Poll Everywhere’s user base. I knew that we had to start by prioritizing accessibility standards at a fundamental level. For example formulating the color palette to be able to accommodate light and dark modes. I worked closely with QA, Product, and Engineering to align the team on WCAG standards.

Other key principles taken into account were:

  • Color contrast checks

  • Font sizes & tap targets

  • Adding aria labels for icons

COMPONENT LIBRARY

Pragmatic Creativity

While maintaining consistency with the new style guides, the team needed to balance pragmatism with innovation. I encouraged designers to thoughtfully introduce fresh elements, ensuring the system remained flexible and evolved with our needs.

The ever growing component library consisted of:

  1. New components

  2. Variants/State changes

  3. Breakpoints

  4. Design Specs

RESULTS

Final Thoughts

The creation of the Whisk Design System was a major collaborative initiative involving Design, Product, and Engineering teams. Its implementation significantly improved team efficiency and alignment by providing a single source of truth. This system remains an evolving project, empowering the Design team to continuously refine and expand upon its foundation.