Back

Kaplan

Kaplan Test Prep, a leading educational services provider, needed a unified design system to address inconsistencies in their digital products and improve collaboration across teams. The Atom Design System was created to provide students, authors, teachers, and administrators with a cohesive and scalable platform for educational materials.

Client

Kaplan Test Prep

Role

Product Designer (Design System Lead)

Year

2020

The Problem

Kaplan Test Prep faced several challenges that hindered design efficiency and product consistency:

1. No Design Process

Designers relied on Google Drive for file storage, leading to version control issues, overwritten work, and duplicated efforts.
Lack of a centralized design system resulted in inconsistent UI components and user experiences across products.

2. Lack of Alignment

Designers were siloed into cross-functional "pods," limiting collaboration and knowledge sharing.
Inconsistent design approaches across teams created a fragmented user experience.

3. Tool Fragmentation

Designers used a variety of tools (Adobe XD, Sketch, Principle), making it difficult to maintain consistency and collaborate effectively.

4. Resistance to Change

Teams were hesitant to adopt a new system, requiring clear communication of the problem and its impact on the business.

Goals

The primary objectives for the Atom Design System were:

Increase Consistency
Reduce design variations and create a unified library of reusable components.
Define Design-to-Dev Process
Establish a clear workflow for design and development collaboration, including version control and file management.
Improve Collaboration
Foster cross-team collaboration through shared resources, style guides, and code snippets.
Ensure Scalability
Create a system that could grow with the needs of the business and adapt to different clients.

Constraints

Pressure to Move Fast
The team faced constant pressure to demonstrate ROI and onboard paid clients quickly.
Siloed Teams
Teams were organized by role rather than feature, leading to different code stacks and fragmented experiences.
Timeline to Adoption
Convincing teams to adopt the new system required demonstrating its value and addressing their pain points.

Themes

To guide the design system's development, three key themes were established:

Theme-able
How can the design system accommodate various clients and easily adapt to different brand colors and styles?
Easy-to-Adapt
How can we ensure a seamless transition for teams adopting the design system?
Scalable
How can we future-proof the design system to grow with the needs of users and the business?

Process

The creation of the Atom Design System followed a structured, iterative process:

1. Research

Conducted audits of existing products to identify inconsistencies and pain points.
Interviewed designers, developers, and stakeholders to understand their workflows and challenges.
Analyzed competitor design systems to identify best practices.

2. Design

Created a library of reusable components (buttons, forms, typography, etc.) based on research findings.
Designed with flexibility in mind, ensuring components could be easily themed for different clients.
Developed comprehensive documentation, including usage guidelines and code snippets.

3. Testing

Conducted usability testing to validate the effectiveness of components.
Iterated on designs based on feedback from designers and developers.

4. Implementation

Collaborated with developers to ensure components were implemented correctly and consistently.
Established a version control system for design files to prevent overwriting and duplication.

5. Adoption

Conducted workshops and training sessions to onboard teams to the new system.
Created a dedicated Slack channel for support and feedback.
Monitored adoption rates and addressed challenges as they arose.

Outcomes

The Atom Design System had an immediate and measurable impact on Kaplan Test Prep's design and development processes:

Increased Consistency
Reduced design variations by 60%, leading to a more cohesive user experience.
Improved Collaboration
Cross-team collaboration increased through shared resources, style guides, and code snippets.
Enhanced Productivity
Design and development turnaround times improved by 30% due to streamlined workflows and reusable components.
Scalability and Adaptability
The system was successfully adapted for multiple clients, demonstrating its flexibility and scalability.

Lessons Learned

Communication is Key: Clear communication of the problem and its impact is essential for gaining stakeholder buy-in.
Iterate and Test: Continuous testing and iteration are crucial for creating a robust and effective design system.
Adoption Takes Time: Providing ongoing support and training is necessary to ensure successful adoption.

Conclusion

The Atom Design System transformed Kaplan Test Prep's design and development workflows, addressing inconsistencies, improving collaboration, and increasing productivity. By focusing on flexibility, scalability, and ease of adoption, the system has become a foundational tool for the organization, enabling them to deliver high-quality educational experiences to their users.

Next Steps:

Continue expanding the component library to meet evolving user needs.
Explore opportunities to integrate AI-driven design tools for further efficiency gains.
Conduct regular audits to ensure the system remains aligned with business goals and user expectations.