Role

User Research

UI Design

Layout Design

Component Design

Role

User Research

UI Design

Layout Design

Component Design

Tools

Figma

Tools

Figma

Scholastic Dollars Catalog UI Component Kit

Plug-and-Play UI Component System

Built a plug-and-play UI component library for designers and developers to rapidly copy, customize, and scale designs, ensuring visual consistency and seamless alignment with hard-coded AEM components across Scholastic businesses.

Implemented responsive breakpoints for multi-device visualization (large desktop, small desktop, tablet, mobile), prioritized using nested components within masters, clearly labeled layers for ease of use, and provided detailed annotations for each component type.

Reestablished component guidelines, constraints, and character limits.

Process

Reviewed existing AEM components across desktop, tablet, and mobile breakpoints to ensure visual and functional accuracy before design translation.

Designed standardized UI components for three primary breakpoints, ensuring consistency, flexibility, and scalability across use cases.

Built a reusable Figma component kit with clear documentation and accessibility guidelines to support consistent implementation by designers and developers.

Process

Reviewed existing AEM components across desktop, tablet, and mobile breakpoints to ensure visual and functional accuracy before design translation.

Designed standardized UI components for three primary breakpoints, ensuring consistency, flexibility, and scalability across use cases.

Built a reusable Figma component kit with clear documentation and accessibility guidelines to support consistent implementation by designers and developers.

Process

Reviewed existing AEM components across desktop, tablet, and mobile breakpoints to ensure visual and functional accuracy before design translation.

Designed standardized UI components for three primary breakpoints, ensuring consistency, flexibility, and scalability across use cases.

Built a reusable Figma component kit with clear documentation and accessibility guidelines to support consistent implementation by designers and developers.

Results

Established a unified set of responsive UI components aligned with AEM, reducing design inconsistencies across teams and products.

Enabled designers and developers to work more efficiently through reusable, plug-and-play components with clear documentation.

Established a scalable foundation for future products, enabling easier updates, maintenance, and cross-functional collaboration.