Documenting components

Context-aware documentation model: The content hierarchy prioritizes "agency" by presenting information based on the user’s immediate context—such as their specific role (designer, engineer), use case (e.g., building a form), or the web application framework (Vanilla, Angular, React).

Decision-oriented content: Component and pattern documentation emphasizes decision matrices and contextual guidance rather than just rules. This content helps users understand the "why" behind choices, enabling autonomous application of the system.

A scalable contribution model

As the content strategist helping to create a scalable model for design contribution across the organization, I was responsible for structuring the communication, documentation, and workflow protocols that govern the submission, and adoption of new components. This project directly addressed the challenge of maintaining a cohesive and relevant design system.

Key contributions:

• Workflow documentation: Developed clear, step-by-step documentation detailing the contribution process within Figma. This included criteria for submission, stakeholder roles , and expected outcomes.

• System communication strategy: Created a clear strategy for communicating the new model to over 200 designers and engineers company-wide, ensuring high adoption rates and understanding of the new process.

• Governance and clarity: Defined the taxonomy, ensuring every proposed design was properly categorized and documented for future reference and implementation.

• Cross-functional collaboration: Partnered closely with the design system team, engineering leads, and product designers to streamline the handoff between the Figma file submission, the engineering review for coding standards, and the final documentation phase.

• Knowledge management: Managed the content within the design system's documentation website, ensuring seamless integration of newly adopted components with existing guidelines and documentation patterns.

Outcome:

The contribution model resulted in a 30% increase in qualified design submissions within the first quarter of launch, significantly enriching the design system’s UI Kit while maintaining quality and consistency standards.

AI component selector

This project focused on the design of an "AI Component Selector" tool, aimed at simplifying the complex process for users to select the right components for their needs. As the content strategist, the approach was highly user-centered and data-informed, ensuring the final design was intuitive, efficient, and content-forward.

Key contributions:

Ideation: From beginning to end, I led the ideation of this tool.

Research: Led foundational research to understand user mental models and existing pain points. A card sorting exercise was conducted with target users to uncover intuitive categorization schemas and terminology, ensuring the information architecture aligned with how users naturally think about components. This was complemented by a comprehensive competitor analysis to benchmark existing solutions, identify industry best practices, and pinpoint opportunities for differentiation in user experience and content clarity.

Decision trees: Applied insights from the research phase, which directly informed the structural design of the tool. Key user pathways and decision points were mapped out using decision trees. This content strategy exercise was critical for structuring the AI logic and ensuring a clear, guided journey that anticipated user questions and provided context-sensitive guidance.

Outcome:

The resulting design provides an efficient, user-friendly AI tool that streamlines product selection and enhances the overall user experience.