Building the Design System from the Ground Up at Elevate K-12

When I joined Elevate K-12, we immediately needed to unify our platform’s look and feel to streamline our internal processes and enhance the learning experience for students and educators interacting with our products. Recognizing that a cohesive design system would be foundational to Elevate K-12's success, I spearheaded the creation of a design system from the ground up, ensuring that it would scale seamlessly across all of our internal and customer-facing platforms.

Objective
The goal was establishing a centralized, consistent design language, allowing product, engineering, and design teams to work together more efficiently. I set out to create a scalable system that would provide intuitive usability and prioritize accessibility—critical requirements in the education sector, where our users span a range of ages, tech proficiencies, and access needs.

Approach
I began by setting clear expectations with leadership on the need to focus on building a design system that would serve as the foundation for all future product development. I also ensured that when hiring designers, they understood that part of their role would be to contribute to creating this system. To understand the current state, I conducted an in-depth investigation into how design was working at Elevate K-12, reviewing existing efforts to create a design system and identifying gaps and inconsistencies.

Working closely with engineering, we assessed the frameworks being used across the platform. We discovered that since React was already being utilized, Material Design would be a natural foundation for our design system. I also audited our products to identify UX issues and pattern inconsistencies, focusing on elements like color schemes and typography to ensure user accessibility. As part of the design process, I made critical decisions around color choices and other design elements to align with accessibility standards, ensuring our system adhered to WCAG guidelines.

I then began building the design system by focusing on the most common patterns and foundational elements, such as typography and layout principles. In parallel, I worked with engineering and product teams to create adoption plans to guide the redesign of our flagship products to integrate the new system. We established a meeting cadence to review progress and address issues regularly, and I organized a standing design meeting to align on system needs and make informed decisions.

Impact
The design system was successfully integrated into our three flagship products and became the foundation for building internal tools. This implementation significantly improved the efficiency of design and development processes, enabling teams to work more cohesively and with greater alignment. By providing reusable components and clear design standards, we reduced development time for new features and improved the quality and consistency of the user experience.

Integrating the design system also fostered more vital collaboration across design, engineering, and product teams, as everyone could rely on the same shared components and guidelines. This alignment not only improved the speed of delivery but also ensured that every product update and new feature was consistent with the overall design language, enhancing both the user and developer experience.

Legacy
The design system at Elevate K-12 now serves as a robust, scalable framework that will continue to support product development for years to come. It has provided the foundation for more efficient, consistent, and accessible product design, allowing Elevate K-12 to deliver a unified user experience across all products. This system is essential to our ongoing mission to improve and expand the virtual learning experience for students and educators alike.