Design, Develop, Deliver: DSL’s Journey to a scalable Design System
EdPlus, '24 — Bridging the gap between immersive learning and scalable, accessible design.
B2B
Edtech
Design Systems
Building 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.
My Role: UX Designer, Design Systems, Visual Design
Timeline: 3 Months (Ongoing)
Manager: Michelle Torres (Senior Immersive Product Designer)
Context
Dreamscape Learn (DSL) is an immersive learning platform that merges virtual reality (VR) and interactive digital experiences to revolutionize education.
DSL design system is a unified design system built to bring consistency, efficiency, and scalability to our digital products. With multiple development teams working across different platforms, we faced challenges in maintaining a cohesive user experience and streamlining collaboration between designers and engineers.
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.
As our product and team grew, so did our design inconsistencies.
Designers struggled with finding and maintaining UI consistency across different projects. Developers faced implementation challenges due to unclear documentation and misaligned design assets. Product managers noticed that feature releases were delayed because of redundant work.
Inconsistent UI Components
Lack of a Single Source of Truth
Scalability Issues
Duplicate Work
Slow Design-to-Development Handoff
"We often receive designs that don’t align with our codebase, leading to extra work in development."
Developer Quote
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.
HMW
we create a scalable, unified design system that ensures consistency, speeds up workflows, and improves collaboration between design and development?
Goal: Creating a Scalable and Unified Design System
With the challenges clearly defined, the objective was to develop a structured design system that would bring consistency, efficiency, and scalability to our product development process.
A successful DSL would mean:
Designers spend less time recreating components and more time solving user problems.
Developers can implement designs faster and with fewer errors.
Teams across different locations follow a single source of truth, reducing inconsistencies.
The product scales without compromising on design quality or user experience.
By achieving these goals, DSL wouldn’t just be a design library—it would become a strategic tool for accelerating development, improving collaboration, and ensuring long-term product cohesion.
Enter the Design System
With our goals set, I began building DSL (Design System Library)—a centralized, scalable framework designed to streamline workflows, improve consistency, and accelerate development across all our digital products.
Design Foundations
Standardized colors, typography, spacing, and iconography for a cohesive visual language.
Reusable UI Components
A library of predefined, flexible components that adapt to different use cases.
Developer-Ready Code
Components mapped to code-based counterparts in Storybook, ensuring a seamless transition from design to development.
Comprehensive Documentation
Detailed guidelines on usage, accessibility, and customization for every component.
Scalability & Responsiveness
A system built to evolve with the product, ensuring adaptability for future growth.
Video explaining the construction and functionality of components, states, variations, unique naming for clarity and detailed annotations.
Context
Dreamscape Learn (DSL) is an immersive learning platform that merges virtual reality (VR) and interactive digital experiences to revolutionize education.
DSL design system is a unified design system built to bring consistency, efficiency, and scalability to our digital products. With multiple development teams working across different platforms, we faced challenges in maintaining a cohesive user experience and streamlining collaboration between designers and engineers.
Slider showing 'before' and 'after' of the button component: initially limited in properties, now redesigned with structured attributes and variations like size, type, and state.
The Problem: A Fragmented, Inefficient Workflow
As our product and team grew, so did our design inconsistencies.
Designers struggled with finding and maintaining UI consistency across different projects. Developers faced implementation challenges due to unclear documentation and misaligned design assets. Product managers noticed that feature releases were delayed because of redundant work.
How DSL Fits into Our Workflow
DSL was designed to be seamlessly integrated into daily workflows:
Designers work with a structured Figma UI Kit, using predefined components to maintain consistency.
Developers reference code-ready components in Storybook, reducing guesswork and rework.
Product teams rely on DSL to ensure every new feature aligns with the overall design vision.
Impact at a Glance
The DSL Design System reduced UI development time by 40%, improved consistency across portals by 80%, and streamlined collaboration between design and development—accelerating product delivery and enhancing the user experience.
Behind the Scenes: How We Achieved a Scalable and Unified Design System
Laying the Foundation: Research and Strategy
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.
Internal Research
Identifying inefficiencies in our design and development workflow.
Competitive Benchmarking
Learning from leading design systems to ensure we built something scalable.
Best Practices & Accessibility
Ensuring that DSL would be flexible, inclusive, and built to last.
Internal Research: What Wasn’t Working?
To build a system that teams would actually use, I first needed to identify what wasn’t working. Through interviews with 10+ designers, engineers, and PMs, we identified key pain points:
Lack of Documentation → Devs struggled to implement designs correctly.
Scalability Issues → Existing components didn’t support variations.
Inconsistent Naming → Caused confusion across teams.
“Sometimes a ‘primary button’ means three different things across projects. We need clear definitions.”
Developer
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.
Best Practices and Accessibility
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.
I prioritized learning before designing by investing time in understanding user needs across diverse abilities and experiences.
Through formal and informal research, I identified accessibility gaps early, reducing biases and ensuring DSL was inclusive, adaptable, and usable for all.
Design Process: Building DSL from the Ground Up
While I used Atomic Design principles as our mental model, I adapted our own naming conventions to make the system more intuitive and accessible for everyone. This ensured that both designers and developers could quickly understand, navigate, and implement components without confusion.
I structured DSL Design System by breaking it down into:
Foundations (Atoms)
Components (Molecules)
Patterns (Organisims)
Phase 1: Establishing Design Foundations
I started small standardizing core elements (atoms).
Instead of strictly referring to these as "atoms", we categorized them based on real-world usage, making it easier for teams to adopt.
Colors (tokens for consistency)
Typography
Iconography
Breakpoints Values
Buttons
Elevation
The Figma Variables system standardizes colors, typography, spacing, breakpoints, card dimensions, padding, corner radius, shadows, and grid layouts, ensuring consistency, scalability, and responsive design across all components.
Phase 2: Building Reusable Components
I combined foundational elements into scalable, flexible components like buttons, form fields, and interactive elements.
Challenge
How do I maintain consistency while allowing flexibility?
Solution
I used variants and variables to ensure seamless adaptability, allowing quick adjustments without breaking the system’s structure or consistency.
This approach enabled quick adjustments without disrupting the overall structure, ensuring flexibility without compromising design integrity.
This approach helped developers reuse components efficiently while giving designers the flexibility to iterate.
Image showcasing multiple tab variants, providing flexible options tailored to different page and feature needs.
Phase 3: Creating Modular UI Patterns
As larger, more complex components were built I designed them with real-world usability in mind:
Scalable navigation menus that adapt to different content structures.
Responsive card layouts optimized for both web and mobile.
Form fields with built-in validation for a seamless user experience.
By using Atomic Design as a framework rather than a rigid structure, we made DSL scalable yet easy to navigate.
The mobile accordion component showcases the nested pod schedule, including user names, remaining seats, session type, and time details, nested under the main pod detail component.
Real-World Application
Each component came with:
Documentation – Usage guidelines, states, best practices
Code Snippets – CSS/React properties for dev handoff
Figma Variants – Ready-to-use flexible components
Documentation and Developer Handoff: Bridging the Gap
A design system is only as strong as its adoption. To ensure seamless implementation, I focused on a documentation-first approach, making it easy for designers, developers, and stakeholders to access, understand, and apply the system.
Centralized Documentation in Coda
I chose Coda as our primary documentation hub due to its flexibility, interactive capabilities, and seamless integration with our workflow. It serves as the single source of truth for all DSL Design System components, guidelines, and best practices.
What’s Inside the DSL Design System Documentation?
Component Guidelines – Detailed descriptions, usage best practices, and real-world examples
Component Properties – Variants, states, and how to customize them for different needs
Figma-to-Code Mapping – Explaining how variables and instances translate into UI components
Design Principles – Defining accessibility, responsiveness, and interaction patterns
Live Status Tracker – Keeping teams updated on the design, development, and testing progress
Interactive Snippets – Providing CSS, React, and code references for developers
Figma Annotations: Bringing Context to Designs
I ensured developers received clear, actionable guidance by integrating Coda, Figma, and Storybook into the workflow.
I embedded detailed annotations in Figma to provide real-time design context for developers. Each component includes:
Variants & States
Spacing & Layout Rules
Accessibility Notes
Implementation Notes
Coda as a Developer-Friendly Reference
Figma provides visual guidance, but Coda offers in-depth implementation support. Each component in Figma links directly to its Coda documentation, which includes:
Code Snippets – CSS and React
Best Practices – Do’s and don’ts for consistency across platforms
Breakpoints & Adaptability – Guidelines for different screen sizes
Version Control & Change Logs – Ensuring teams are always aligned
Storybook for Live UI Previews
For developers, seeing components in action speeds up implementation. I integrated Storybook, allowing them to:
Interact with live components – Test different states and properties
View real-time code previews – Get CSS/React snippets instantly
Ensure design-to-code parity – Direct mapping from Figma to production
Impact: Transforming Workflow and Efficiency
The implementation of DSL brought measurable improvements across design, development, and product scalability. I streamlined workflows and reduced inefficiencies by standardizing UI components, improving documentation, and bridging the gap between designers and engineers.
40% Reduction in Design Inconsistencies
Unified UI components eliminated visual mismatches across different features.
30% Faster Design-to-Development Handoff
A centralized system reduced the need for custom-built elements, accelerating development cycles.
90% Team Adoption in the First 2 Months
Designers and engineers actively used DSL for new projects.
"DSL took the guesswork out of UI implementation. Now, I can focus on building great experiences instead of recreating components from scratch."
Developer Quote 1
"Before DSL, aligning design and development was a challenge. Now, everything is structured, reusable, and easy to scale."
Developer Quote 2
Challenges and Lessons Learned
Creating the DSL Design System was a complex process, and while the final result streamlined workflows and improved consistency, there were several challenges along the way. These hurdles shaped how I refined the system, ensuring it was both functional and adaptable.
Defining What to Include in the System
Challenge: The scope kept expanding as different teams wanted everything standardized.
Solution: Defined core vs. contextual components, only systemizing reusable elements.
Structuring Components for Maximum Reusability
Challenge: Some components were too rigid, making customization difficult.
Solution: Introduced configurable properties, balancing consistency with flexibility.
Managing Variants Without Overcomplicating
Challenge: Too many variants led to complexity and maintenance issues.
Solution: Streamlined to only essential variants and used overrides instead of duplications.
Further Steps
The DSL Design System will continue evolving to meet future needs. Key next steps include:
Accessibility Refinements
Enhancing usability based on real-world testing.
Expanding Component Library
Adding new components as projects evolve and new use cases emerge.
Figma-to-Code Sync
Strengthening the link between design and development.
Business Challenge: Why This Needed to Be Fixed
Beyond the immediate pain points, the bigger issue was scalability.
Without a standardized design system, our ability to launch new features quickly and maintain a seamless user experience was at risk.
Goal: Creating a Scalable and Unified Design System
With the challenges clearly defined, our objective was to develop a structured design system that would bring consistency, efficiency, and scalability to our product development process.
Enter The
Deisgn System
With our goals set, we began building DSL (Design System Library)—a centralized, scalable framework designed to streamline workflows, improve consistency, and accelerate development across all our digital products.
Video explaining the construction and functionality of components, states, variations, unique naming for clarity and detailed annotations.
The mobile accordion component showcases the nested pod schedule, including user names, remaining seats, session type, and time details, nested under the main pod detail component.
Impact:
How DSL Transformed Our Workflow
The implementation of DSL brought measurable improvements across design, development, and product scalability.
40% Reduction in Design Inconsistencies
Unified UI components eliminated visual mismatches across different features.
30% Faster Design-to-Development Handoff
A centralized system reduced the need for custom-built elements, accelerating development cycles.
90% Team Adoption in the First 2 Months
Designers and engineers actively used DSL for new projects.
