Design, Develop, Deliver: DSL’s Journey to a scalable Design System
A scalable design system that ensures consistency across DSL platforms, enhances collaboration between design and development, and minimizes time spent on redesigns, QA cycles, and bug fixes.
Client: Dreamscape Learn (DSL)
Role: UX Product Designer
Year: 2024-2025
Status: Shipped
What is DSL?
a collaborative venture between Dreamscape Immersive and Arizona State University delivering VR-based learning experiences through cinematic storytelling enabling students to step into immersive worlds and learn through exploration.
The Problem: A Fragmented Inefficient Workflow
As our projects at DSL scaled, I noticed a growing challenge: the absence of a cohesive structure within our design system.
Multiple DSL projects used ad hoc components, causing:
One-off Components without shared guidelines
Lack of a Single Source of Truth
Scalability Issues
Duplicate Work
Slow Design-to-Development Handoff
Developer Quote
"We often receive designs that don’t align with our codebase, leading to extra work in development."
Business Challenge: Why This Needed to Be Fixed
Beyond the immediate pain points, the bigger issue was scalability.
Without a standardized design system, the ability to launch new features quickly and maintain a seamless user experience was at risk.
How Might We
Create a scalable, unified design system that ensures consistency, speeds up workflows, and improves collaboration between design and development ?
Solution: Enter the DSL Design System
The Booking Admin Portal was designed as a decision engine, not just a booking interface. Every element was built to help admins act faster, stay informed, and manage complex operations with confidence.
1 / Modular, scalable Figma components
A library of predefined, flexible components that adapt to different use cases.
Video explaining the construction and functionality of components, states & variations
2 / Developer-Ready Code
Components mapped to code-based counterparts in Storybook, ensuring a seamless transition from design to development.
3 / Comprehensive Documentation
Detailed annotated guidelines on usage, accessibility, and customization for every component.
4 / Scalability & Responsiveness
A system built to evolve with the product, ensuring adaptability for future growth.
Use Case: The mobile accordion component
Research: How I Achieved a Scalable and Unified Design System
Before jumping into building DSL, I needed to understand the gaps in our current workflow, learn from industry best practices, and define the key requirements for a scalable, developer-friendly design system.
1 / Internal Research
First. I reviewed 100+ screens across DSL tools and products, identifying pattern overlaps, inconsistencies, and redundant components.
I collaborated with 5 cross-functional members (PMs, Devs, QA, Designers) to gather pain points, key flows, and requirements for the focus areas.
The Focus area
Through interviews with 10+ designers, engineers, and PMs, I identified key pain points:
Developer Quote
“Sometimes a ‘primary button’ means three different things across projects. We need clear definitions.”
2 / Competitive Benchmarking
Starting from scratch with a design system was challenging, and structuring components felt overwhelming.
While I looked to Atlassian, Apple, and Google for inspiration, their extensive systems weren’t a perfect fit for DSL.
a snippet from a session
3 / Best Practices and Accessibility
Through formal and informal research, I identified accessibility gaps early, reducing biases and ensuring DSL was inclusive, adaptable, and usable for all.
I prioritized learning before designing by investing time in understanding user needs across diverse abilities and experiences.
Component Framework
The turning point came when I adopted Atomic Design principles, breaking components into atoms, molecules, and organisms.
This approach brought clarity, making organization, scalability, and collaboration with developers much more efficient.
Phase 1 / Establishing Design Foundations
I began by defining the visual language of the system.
These foundational tokens ensured consistency across all components and laid the groundwork for responsive design and accessibility compliance.
Categories
Phase 2 / Building Reusable Components
I combined foundational elements into scalable, flexible components like buttons, form fields, and interactive elements.
I used variants and variables to ensure seamless adaptability, allowing quick adjustments without breaking the system’s structure or consistency.
image showcasing multiple tab variants
Phase 3 / Creating Modular UI Patterns
Designed 35+ atomic & compound components.
In this phase, I combined atomic components into scalable UI patterns.
These patterns were designed to be dropped into different DSL tools with minimal customization, speeding up delivery while maintaining visual consistency.
Documentation and Developer Handoff: Bridging the Gap
I chose Coda as our primary documentation hub. It serves as the single source of truth for all DSL Design System components, guidelines, and best practices.
Each component came with:
1 / What’s Inside the DSL Design System Documentation?
1 / What’s Inside the DSL Design System Documentation?
To reach our north star, we defined six principles that would guide design and technical decisions throughout the build.
A set of actionable, behavior-driven principles that informed every decision, from dashboard hierarchy to automation triggers.
2 / Figma Annotations
I embedded detailed annotations in Figma to provide real-time design context for developers.
3 / Checklists
I also included usage + QA checklist templates to reduce friction during dev implementation.
Design QA Goals
Impact: Transforming Workflow and Efficiency
Quantitative
Qualitative
✦ [Other Projects]
