Creating a consistent and trustworthy product experience
Team
Goals
My Role: Oversee sr. product designer and UX copywriter
The team: Aditi Bahri — project leader and sr. product designer, jr product designer, developers, UX copywriter, and product manager
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
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
We use a modular approach with components categorized following this hierarchy:
Utilities: Core styles that be applied and shared across components.
Atoms: Foundational building blocks of our design system - they cannot be broken down further without losing their meaning.
Molecules: Group of atoms pieced together to take on new properties and form more complex and bigger functional patterns.
Layouts: Options for laying out content or components on a page.
The Common Sense Design Principles Derived from our users' needs, our brand position, and our mission these principles provide a framework for collaboration and shape our decisions as we create, iterate, and refine our products. They help us identify opportunities, balance tradeoffs, and strive for high quality products and experiences for our users. Whether you're a developer, designer, content creator or PM, you can use these guidelines to critique and improve your own workflow.
TRUST
We design to build trust. Our independent, unbiased products, reviews, and advice are grounded in research and cognitive development standards. We protect user privacy. We champion user needs.
Earn trust by making research-backed decisions whenever possible
Be consistent: use similar elements for achieving similar tasks.
Have an independent, honest voice and a point of view
Design for emotion (as much as facts); develop empathy for the experience of caring for kids
Keep people informed and aware through feedback.
Interview and test with users to understand their evolving needs and use the findings to improve their experience
ACCESS
We welcome everyone. We believe interface design, copy, and functionality should facilitate user-performance for everyone regardless of abilities, education, and socio-economic background.
Design for responsiveness
Design using our accessibility guidelines
Remain platform agnostic
Optimize for speed and performance even on slow networks
Grade-level writing
Consider solutions for multiple languages
Imagery that celebrates all backgrounds and abilities
Realistic and relatable depictions of family, school, community, and childhood
GUIDANCE
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.
Focus on real human tasks and contexts
Respect other people’s perspectives and needs
Value people’s time and attention; provide direction over limitless choices
Form follows function: Support and highlight multiple content types by using a flexible and scalable design language.
Navigation should feel intuitive; always provide a clear way forward
Design for emerging trends and topics to anticipate user needs and support them as they face new challenges