Common Sense Media
Creating a welcoming brand experience for all
More than 100 million families and one million educators use Common Sense. The multifaceted nonprofit gives kids, families, and educators the tools to make informed choices about media and technology. It advocates for laws to protect kids and help all families thrive.
Playful for the family app
Warm and trustworthy for reviews
Friendly for social media
Accessible and resourceful for website
Informed and helpful for emails
Formal and spare for research reports
The Rebrand
Goals
Cement the organization’s position as the leading resource on how tech effects kids.
Design to attract and engage the diverse population of families in the U.S.
Improve workflow efficiency and quality of brand work.
Align brand design with the Common Kit product design system.
Results
120% increase in workflow efficiency for creative services team.
Non-designers and writers improved speed, quantity, and quality for content output with new templates and tools.
A comprehensive look and feel, and messaging platform, for everything Common Sense does.
Common Kit for product design: Improved speed, efficiency, and standardization across two responsive web platforms.
My Role
As the in-house brand and design leader, I proposed the new brand system to help achieve organizational goals. Using only internal resources, we completed the project in five months while also delivering on the existing work stream.
I led our team through 5 key steps:
Create research-backed personas
Audit the brand determine next steps
Develop brand attributes for multiple personalities
Define the visual expression
Document and publish easy to use guidelines, templates, and tools
In-house Team
VP of brand & design (me); art director; senior product designer; copywriter/strategist; graphic designer; motion designer; and senior director of diversity, equity, and inclusion
Step 1. Create research-backed personas
To create a more inclusive and welcoming brand, we conducted qualitative interviews with Black and Latino parents to discover their values, concerns, and hopes around raising kids. We also reviewed published research on Black and Latino families. We defined demographic and behavioral personas — nurturing or protecting behavioral styles — for Black, Latina, and White moms.
-
Kids' ethnic-racial development shapes how they think about and make sense of their own — and other’s — ethnicity-race. Understanding how kids develop these perspectives can help parents and caregivers identify and disrupt problematic messages and stereotypes, and also steer kids to quality media that can support their healthy development. Source: The Inclusion Imperative: Why Media Representation Matters for Kids' Ethnic-Racial Development
Black and Hispanic/Latino children use more screen time than White children. Black tweens spend 1:57 more —and Hispanic/Latino tweens spend 2:31 more — a day than White tweens. Source: The Common Sense Census: Media Use by Tweens and Teens, 2021
Step 2. Audit the brand and assess next steps
We audited the existing brand elements and assessed them against our design principles, overall effect on brand perception, and relative return on investment. We uncovered a foundation to build on, and design debt that needed to go.
Step 3. Develop brand attributes for multiple personalities
The brand attributes make up the Common Sense personality — who we are and how we behave. Some traits may be dialed up or down depending on the audience, the message, and the channel.
Our Brand Spectrum codifies the variations. On the formal end is a leader and change-maker. The middle of the spectrum is a trusted source. The casual end of the spectrum is a helpful friend.
Step 4. Define the visual expression
For each design attribute, we defined guidelines based on the Brand Spectrum. Typography, color, photography, and design devices all can shift from a formal to casual presentation in order to meet audiences wherever they are.
Step 5. Create, document, and publish easy to use systems
The brand libraries are in Figma and Adobe. Templates for non designers are in Canva, Google Slides, and Adobe Express.
Words matter. The Messaging Frameworks helps writers spin up content quickly, and ensures it consistently speaks to the value we deliver. It isn’t final copy — it’s a jumping off point to create downstream content (web and email copy, press release boilerplates, etc.).
Related Style Guide
The Common Kit: Atomic Product Design Guidelines
Goals
Create living guidelines for designers and developers
Improve speed and efficiency for design and development
Ensure consistency across digital experiences
Reduce design and tech debt
Maintain brand integrity
Results
Improved speed and efficiency for design and development
Consistent digital experiences
Greatly reduced design and tech debt
Elevated brand integrity
My role
Help ensure resources and time are committed to the ongoing project, oversee product designers, and UX copywriter
Team
VP of Product; VP Brand and Design (me); Sr. product designer and project leader; product designer, developers; UX copywriter; and product manager
The Common Kit design system for Common Sense Media is a central, shared repository for front-end patterns and code. With it designers and developers can ensure consistency across digital experiences and maintain brand integrity. The Common Kit is based on our design principles (see below).
For designers, it is a living, breathing document that describes many of our visual assets (components, iconography, color palettes, grids, etc.) and the guidelines for use. For developers, it provides a library of reusable, extendable, styled components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.
Atomic Design Methodology
The modular approach with components is categorized following this hierarchy:
Utilities: Core styles that be applied and shared across components. Ex: color, font, icon.
Atoms: Foundational building blocks of our design system - they cannot be broken down further without losing their meaning. Ex: button, tag, header.
Molecules: Group of atoms pieced together to take on new properties and form more complex and bigger functional patterns. Ex: form, popover, modal.
Layouts: Options for laying out content or components on a page.
The Common Sense Design Principles are derived from our users' needs, our brand position, and our mission. They provide a framework for collaboration and shape our decisions as we create, iterate, and refine our products. They help us strive for high quality experiences for our users.
We design to build trust. Our independent, unbiased products, reviews, and advice are grounded in research. We protect user privacy. We champion user needs.
We welcome everyone. We believe interface design, copy, and functionality should facilitate user-performance for everyone regardless of abilities, education, and socio-economic background.
We empower users to make the best choices for kids. Our design systems should highlight subject matter in a way that enables users to explore and discover what's right for them.