Enhancing Brand Identity with a Scalable Design System
Yes, M.I.S.S. Inc. Design System
Designed by Kathy Kamangar
PROJECT OVERVIEW
Yes, M.I.S.S. Inc., a nonprofit organization focused on empowering young women in high school, needed a cohesive design system to enhance its online presence and internal communications. To support its mission of mentorship, real-world skills development, and college/career preparedness, I created a comprehensive design system in Figma, alongside detailed documentation in Notion. This system includes UI components, styles, and icons to ensure a consistent and scalable design for future digital products and initiatives.
The Goal
• Develop a unified design system to provide consistency across digital platforms
• Create reusable components, design patterns, and documentation
• Ensure scalability for future digital interactions while maintaining brand consistency
• Support Yes, M.I.S.S. Inc.'s mission of empowering young women through accessible, user-friendly designs
• Create reusable components, design patterns, and documentation
• Ensure scalability for future digital interactions while maintaining brand consistency
• Support Yes, M.I.S.S. Inc.'s mission of empowering young women through accessible, user-friendly designs
The Problem
• Inconsistent branding and user experience across digital platforms
• Lack of reusable design components and scalability for future projects
• Need for a comprehensive design system to improve project efficiency
The Product
Yes, M.I.S.S. design system
Role
UX/UI Design
Responsibilities
Research
UI Designing
Documentation
Prototyping
Usability Testing
Tools
Figma
Notion
Adobe Photoshop
Adobe Illustrator
Adobe Photoshop
Adobe Illustrator
Google Drive
Deliverables
Design System Documentation
Component Library
Prototypes
Prototypes
Team
Kathy K.
Freya M.
Duration
4 months
RESEARCH
To establish a scalable and consistent design system, we conducted a detailed analysis of 10 industry-leading design systems, including Material, Carbon, Spectrum, and Polaris. This research focused on identifying recurring trends, best practices in accessibility and scalability, and modular, reusable components. The findings informed the foundational principles of our system, to ensure it is adaptable across diverse use cases while maintaining consistency.
The system also reflects the needs of high school students, one of the brand’s key audiences. Vibrant visuals, modern typography, and engaging imagery cater to their interests, while maintaining clarity and usability to support a tech-savvy, young audience.
STYLES
We incorporated the brand’s Style Guide as a foundation, adopting the established colors and typography to create a cohesive framework. This approach allowed us to develop consistent, and reusable components aligned with the brand identity.
Typography
The original style guide provided general typeface choices, Lato and Poppins. We expanded these guidelines by defining specific styles, introducing structured categories like Displays, Headings, Body, and Labels to enhance readability and ensure a cohesive visual hierarchy across the design.
Color Style
Color style establishes a cohesive visual identity through primary, secondary, neutral, and semantic categories, enhancing both aesthetics and accessibility across the design. We’ve incorporated the brand’s original palette, adding neutral and semantic tones to support a wider range of functions and improve usability.
Layout Grid
We structured our layout with grids that define columns, gutters, and margins to ensure content remains well-aligned and accessible across all devices. This approach helps maintain consistency in spacing and organization, from desktop to mobile.
Spacing
Spacing follows a modular scale based on 4- or 8-bit increments, creating a harmonious rhythm throughout the design. This approach ensures clarity, balance, and consistent visual alignment across all elements.
Elevation
By utilizing shadows effectively, we enhance the user experience with a clear visual structure and intuitive interaction. We apply four levels of elevation to create depth and define hierarchy, helping to distinguish elements and guide the user's focus.
Images
To create an engaging experience for high school students, the design system integrates modern illustrations to connect with the new generation, while incorporating real photos to build trust and credibility. The combination of dynamic visuals and authentic imagery establishes a balance that resonates with the target audience.
Iconography
To streamline the process, we utilized pre-designed icons for standard elements, while designing custom icons from scratch for unique needs. Additionally, we provided two sizes for each icon to ensure versatility across different screen sizes and contexts, making sure they remained consistent and legible on all devices.
COMPONENTS
The components in our design system serve as building blocks for consistent, scalable, and reusable UI elements across digital platforms. They are crafted with precision to align with the overall design vision, ensuring seamless integration into user interfaces.
Types of Components
The design system includes essential components such as Buttons, Chips, Text Fields, Cards, and Switches, each designed with multiple variants to support various use cases and maintain consistency across different platforms.
Design Specification
We defined each component with flexible variants that offer flexibility in size, style, and color. Additionally, we documented all interactive states, such as hover, focus, and disabled, to ensure consistent and clear behavior across user interactions.
USAGE EXAMPLE
This Usage Example showcases a dialog box design, featuring a structured combination of UI elements, including a heading, body text, and image for context, alongside functional components like text fields, a checkbox, and a call-to-action (CTA) button. An icon adds visual clarity, making interactions more intuitive. Together, these elements demonstrate the cohesive application of typography, iconography, and interactive components, highlighting how the design system creates a polished, consistent user experience across dialog interfaces.
DOCUMENTATION
We documented the design system in Notion to create a centralized, accessible resource for both designers and developers. Yes, M.I.S.S. documentation is divided into three main sections with a well-structured setup:
Styles: Covers foundational elements such as Typography, Color Styles, Layout Grid, Elevation, Spacing, Images, and Iconography
Components: Provides one page for each component with detailed specifications to guide consistent usage
Icons: Offers each icon in two with SVG downloads
Each section includes clear images and detailed specifications, to ensure accessible reference and practical guidance for design and development teams.
To view the design system documentation, click here.
TAKEAWAYS
Challenges
Balancing brand consistency with flexibility and maintaining accessibility were key challenges during the creation of the design system. To address consistency, we standardized foundational elements such as typography and colors, while designing adaptable components that cater to diverse use cases without compromising the brand identity.
For accessibility, we incorporated WCAG-compliant contrast ratios, clear typography, and spacious layouts, ensuring the system is inclusive and user-friendly. These solutions enhanced the usability and scalability of the design system, aligning it with the needs of its diverse audience.
Impact
This design system is set to streamline the design and development process, reducing inconsistencies and improving efficiency. Its reusable components and detailed documentation will empower teams to create cohesive, user-friendly experiences across platforms. By addressing scalability and usability, it positions the organization for smoother future projects and stronger engagement with its target audiences.
Thanks for watching!
Kathy Kamangar
