🔒 NDA Notice

Due to a Non-Disclosure Agreement (NDA) with Boy Scouts of America, this case study does not include internal files, detailed documentation, proprietary components, tokens, or source materials.

All visuals, descriptions, and processes shared here are high-level representations intended to illustrate my role, design approach, and problem-solving methodology without exposing confidential or sensitive information.

Specific implementation details, internal workflows, metrics, and system artifacts have been intentionally omitted or abstracted to comply with confidentiality requirements.


🧩 Problem

The Boy Scouts of America had multiple digital products—websites, mobile apps, dashboards, and internal tools—without clear visual or user experience consistency across them.

The only existing reference was the corporate identity manuals, which were primarily focused on branding and print, with very little guidance for digital products.

This led to several problems:
• Inconsistencies in colors, fonts, and components
• Lack of visual hierarchy and contrast
• Isolated design decisions between teams
• Constant friction between design and development
• Total dependence on Figma, a tool the developers were not proficient in

The need for a digital Design System focused on product, scalability, and collaboration was evident.


🔍 Validate

Before building the system, we validated the problem through:

• Visual audits of existing products
• Review of inconsistencies in UI and patterns
• Collaborative workshops to identify pain points and goals for each role

Direct feedback from:

• Designes
• Project Managers
• Developers

During these workshops, it was confirmed that the lack of a design system directly impacted:

• Delivery times
• Product quality
• Communication between teams


🔃 UX Process — Design System Workflow

The development of the Boy Scouts Toolbelt followed an Agile + Kanban + Atomic Design approach, supported by Design Thinking.



💡 Solution

The result was the Boy Scouts Toolbelt, a structured digital design system that includes:

• Clear design guidelines
• Typefaces with defined hierarchy
• Accessible color palettes
• Reusable components with states
• Documented tokens
• Centralized documentation in Zeplin

A system designed not only to look good, but to work at scale.


📈 Result

• Significant reduction in delivery times
• Less friction between design and development
• Elimination of unnecessary meetings
• Greater visual consistency across products
• Improved cross-functional collaboration
• Solid foundation for scaling digital products

The design system has gone from being an “idea” to a real, everyday work tool.


🎨 Brand Guidelines — Foundation

The starting point for creating the Boy Scouts Toolbelt was the official Boy Scouts of America Brand Guidelines, which defined colors, typography, and visual guidelines at the brand level.

However, these guidelines were primarily geared toward print media and branding, with little adaptation to digital products.

Our work consisted of translating these guidelines into a digital language, establishing clear usage rules for interfaces: typographic hierarchies, contrast, scales, component states, and consistent color application across web, mobile, and internal tools.

This allowed us to maintain the brand’s essence while improving readability, accessibility, and visual consistency across all digital products.









👤 User Personas — Designers & Developers

To ensure the design system met real needs, user personas were defined: UX/UI Designers and Front-End Developers.

These personas helped understand the goals, frustrations, and daily workflows of each role.

The designers needed speed, consistency, and ready-to-use components; while the developers required clear specifications, reliable tokens, and a single source of truth.

These personas guided key decisions about which components to prioritize, how to document them, and which tools to use, ensuring the system was useful, adoptable, and scalable for both teams.











🛠️ Tools & Utilities

To build a robust and accessible system, the process was supported with specific tools.

UI Colors was used to generate accessible palettes with appropriate contrast, facilitating the definition of primary, secondary, auxiliary, and status colors.

Type Scale (Layout Grid Calculator) enabled the creation of a consistent and scalable typographic hierarchy, ensuring coherence between titles, body text, and secondary elements.

Furthermore, the use of the Material Symbols plugin in Figma helped maintain standardized, clear, and easily scalable iconography, reducing unnecessary variations and improving visual consistency throughout the system.