Designing for Consistency and Scale: The Atomic Principles Behind IXL's Design Library
IXL Learning Case Study

Designing for Consistency and Scale: The Atomic Principles Behind IXL's Design Library

Dylan Tarre
Dylan Tarre

Table of Contents

In my role as Design Lead at IXL Learning, I had the opportunity to build a comprehensive design library and design system using atomic design principles. Leading the design system initiative, I played a pivotal role in facilitating effective collaboration and communication within the design team. One way we achieved this was through regularly scheduled touchpoint meetings.

On alternate Fridays, we would hold a Discussion meeting where we talked through the status of design system additions and addressed any blockers that team members were facing. This was an opportunity for designers to share tips and best practices, ensuring that everyone was aligned on the progress and goals of their respective tasks. Importantly, all library owners were expected to attend this meeting, contributing their insights and knowledge to support the overall success of the design library.

On the opposite Friday, we would have a Review session with a smaller group of auditors. During this session, we focused on maintaining and organizing the design library. We addressed any blockers or issues that surfaced during the last meeting, and worked together to find solutions.

These alternating meetings enabled us to maintain a high level of organization, address any challenges that arose, and foster collaboration and knowledge sharing within the design team. By actively engaging in these meetings, we were able to identify and resolve blockers efficiently, ensuring that our design library remained effective and up-to-date.

Two important principles within the IXL Design System were consistency and scalability, so I divided the IXL Header into different atomic elements as an example to the team. 

By breaking it down into smaller components such as buttons, icons, and text elements, I was able to create a flexible and modular system. This approach allowed for easier maintenance and updates.

In addition to breaking down the header, I also paid close attention to the specific components and measurements to ensure consistency across the IXL brand. I meticulously implemented design standards such as color schemes, typography, and spacing rules, which helped maintain a cohesive and harmonious visual identity across different platforms and devices.

When incorporating atomic design principles, I always kept in mind the importance of reusability. By structuring our design library in this way, I enabled the IXL team and its subsidiaries, including Rosetta StoneVocabulary.com, and Education.com, to efficiently leverage the existing design assets while encouraging a consistent brand experience between the student, parent, and teacher interfaces.

By leveraging atomic design principles and implementing specific components and measurements, I was able to build a design library that facilitated consistency and scalability across the IXL brand and its acquired subsidiaries.