Building Better Building Blocks - a restructure of the messaging component

Team

2 Designers

Design Systems Team

Mobile App Design Team

Role

Product Designer

Timeline

Jul 2023 - August 2023

6/7 Weeks

Tools

Figma

Airship

Zeroheights

cbsmocks-header.png

Overview

I was a summer intern on Playbook— CBS Sport’s Design System.

This is used across all CBS Brands: CBS Sports, MaxPreps, Sportsline, 247 Sports, and Fantasy.

Playbook is a documentation and component library. The team helps build tools for designers and developers to make it easier to create at scale, with speed, and with visual unity.

My co-intern Allison Nakajima and I had ownership over the project where we redesigned the Feedback Indicator components and documentation used by designers and developers.

Screenshot 2023-09-13 at 1.23.03 PM.png

context-mocks.png

Internally, messaging was synonymous with feedback indicators. It is defined as a way to convey information to a user. Within the current user interface, several examples of messaging include (1) actions, (2) snackbars, and (3) error messages, among others.

The Problem

As a designer, I want to encourage user exploration within the app by providing relevant information. However, I can’t find an existing component that suits my design needs prompting me to create a one-off design solution.

Over time the repetition of this process led to more and more instances and components, resulting in a lack of design standardization and accumulating design debt over time.


Accomplishments

During the audit and redesign, I created 7 distinct components that simplified the design workflow. These visually aligned components closely adhered to our brand marketing and came supplied with clear documentation and guidelines, making them easier for designers to access and versatile for various contexts. This improvement significantly enhanced designers' ability to effectively convey messages to users.