School Loop Component Library
DESIGN SYSTEMS & PRODUCT DESIGN

Role: Director of Web Design & Development

​

In the early design phases of School Loop's new CMS, School Loop Standard 2.0 (SLS2), I led the creation and evolution of the platform’s Design System and Component Library. As the Director of Web Design & Development, I was responsible for establishing the foundational visual and functional standards used across all school and district websites built on SLS2.

​

Project Scope & Deliverables

​

My work focused on building scalable and flexible components that supported a wide variety of school and district needs:

• Design System Creation: Developed the initial visual language and design guidelines used across all modules and templates.

• Component Library Development: Designed over 50 reusable components that served as the core building blocks for all customer websites.

• Beta Site Integration: Refined the system through implementation across 18 custom beta sites to ensure consistency and versatility.

• Developer Handoff: Delivered clean design specs and usage documentation to front-end developers for implementation.

 

Design Process & Tools

​

The project required balancing ease of use with design integrity and technical adaptability:

1. Foundation Design: Created an initial set of approximately 20 components based on layout patterns, user goals, and aesthetic cohesion.

2. Iterative Refinement: Expanded and improved the library over time based on real-world use in school and district sites.

3. Responsive Standards: Designed all components to function seamlessly across devices, stacking cleanly on mobile and scaling fluidly for desktops.

4. Customization Flexibility: Ensured all components looked polished out of the box but could also be enhanced with custom CSS for advanced users.

​

Key Achievements

​

• Scalable Design Infrastructure: Built a design system that scaled from simple school sites to complex district-wide implementations.

• Rapid Template Development: Enabled efficient template creation through a modular component approach.

• User Empowerment: Created components that worked beautifully without customization, while still supporting advanced user styling needs.

​

This project highlights my ability to architect robust design systems that support both scalability and visual quality. The SLS2 Component Library was foundational to the success of the CMS and empowered users to create modern, responsive, and professional-looking websites with ease.

​

An example below shows the 3 Showcase Component, which displays three grouped modules in a row. On mobile devices, these modules automatically stack vertically for an optimal viewing experience.