Compass
Compass is the design system powering the Alchemy learning management system (LMS). Built to unify the product's visual language and streamline design and development, it offers scalable components and thoughtful guidelines that support clear, accessible, and intentionally crafted learning experiences.
This case study presents a modified version of the original work to maintain client confidentiality.
- Role
- Design Engineer
- Timeline
- August 2024-January 2025
- Tools (design)
- Figma
- Tech stack (development)
- React, TypeScript, CSS
The challenge
The goal was to create a scalable design system to support Alchemy, a learning management system (LMS) developed by the Center for Applied Management Practices (CAMP). Compass needed to be functional, accessible, and easy to maintain, while providing a cohesive visual identity.
Design process
Compass was designed from the ground up to establish a consistent, scalable design foundation. It was created to serve two primary user groups: learners and educators.
Themes & modes
To distinguish experiences for these two user groups, I introduced two themes:
- Teal (tourmaline) for learners: a color often associated with calmness, focus, and trust, creating an inviting and supportive learning environment.
- Purple (amethyst) for educators: a color tied to creativity and depth, signaling a more advanced interface designed for content creation and management.
Both themes features light and dark modes, offering flexibility and accessibility for different user preferences and environments.
Typography
I chose Lexend as the main typeface because it was designed for readability and reduced visual stress, ideal for an educational platform. Every design decision prioritized simplicity, accessibility, and clarity, ensuring that both learners and educators could confidently interact with the LMS.
Tokens
To make the system easier to maintain and scale, I developed a comprehensive set of design tokens for color and typography. These tokens created a single source of truth for both designers and developers, simplifying handoff and reducing inconsistencies.
Impact & takeaways
Compass streamlined both design and development at CAMP, reducing inconsistencies and accelerating the creation of new features. By establishing a shared visual language and reusable components, it improved collaboration between designers and developers while enhancing the user experience for educators and learners.
Building a digital product? Let's team up.
Whether you need help shaping a new SaaS product, refining an existing web or mobile experience, or building a scalable design system, I'd love to hear from you.