top of page

BUILDING A SCALABLE SYSTEM

EXMPOWERED EDUCATION

In all my work, I build and maintain Figma design systems to streamline design, enhance collaboration, and ensure consistency across products.

THE PROBLEM:
Empowered Education did not have clear documentation and were not able to create consistency on their website. I tackled this by creating reusable components which the team could use to build out pages on their site.

Empowered Ed Mobile 1.png
Untitled-4b.jpg

UNDERSTANDING THE NEED

This project was about building a more efficient system within the team, understanding the skills of the designers and project management. 

For the first phase of this project, I learned about the team's overall skill and familiarity with Figma.

Considerations & Needs:

  • The components (modules) were meticulously designed with scalability at their core, ensuring they could be seamlessly integrated across multiple pages of the site. 
     

  • The design system was crafted with accessibility in mind, ensuring that junior designers could easily adopt and update it. 
     

  • A key consideration was incorporating components that preserved the integrity of SEO-driven content, including those with rich links and copy

Key Elements of the Design System

I prioritized creating key organisms that would have the most immediate impact and focused on establishing a solid foundation of fonts and color styles within Figma to ensure consistency & efficiency across designs.

What I built:

  • A thoughtfully designed library of over 20 versatile modules, crafted for flexibility and consistency across pages
     

  • A comprehensive, accessible color palette, seamlessly integrated into the Figma control panel for easy application and brand alignment
     

  • A full suite of meticulously defined text styles, available through the Figma control panel to ensure typographic harmony across all designs

Empowered_Education.png
Empowered_Education 3.png

REFLECTING ON THE FINAL DESIGN

Reflecting on the project overall, it's nice to see that the components I designed for Empowered Education are still being used today. We also achieved all of our goals as well as solved our initial problem.
 

  1. Scalable Components: I designed the components (modules) with scalability at the forefront, ensuring they were flexible enough to be reused across multiple pages. This approach allowed us to maintain consistency while adapting to evolving needs. As a result, the site has a cohesive look and feel, regardless of how many new pages or features are added.
     

  2. Ease of Use for Junior Designers: I kept the design system intuitive and user-friendly, making it easy for junior designers to pick up and update. By organizing the components clearly and providing detailed guidelines, I ensured that they could maintain the system with minimal supervision, empowering them to contribute efficiently and confidently.
     

  3. SEO-Optimized Components: The system incorporated components with heavy links and copy, which was essential for maintaining SEO integrity. I ensured that all copy-driven elements were structured to retain SEO value, which not only improved site visibility but also supported our marketing goals.
     

Today, the site is visually polished and performs well in both design consistency and SEO. The thoughtful architecture behind the design system has made it a seamless experience for both designers and users, with everything functioning as intended.

MORE PORTFOLIO EXAMPLES AVAILABLE UPON REQUEST

© 2025 by Katy Atchison

bottom of page