A foundational language for a new application suite
In support of DreamWorks’ evolving internal production pipeline, the team needed a unified design system to bring visual and functional consistency to a growing suite of internal tools. I led the effort to design and implement a comprehensive design language system, establishing a foundational component library and scalable design standards. The system accelerated product development, ensured UX cohesion, and became a core part of how internal tools were designed and built. The DLS now supports multiple applications critical to DreamWorks’ movie production workflow.
Design Lead | 2020 - 2022
A visual system for technical users and high-density views
The design system was built to serve a highly technical user base—technical directors, engineers, and production staff—who expected dense, data-rich interfaces to do their work efficiently. The visual language prioritized clarity, utility, and scalability over decorative design, creating an aesthetic that supported high information density and visual clarity. Every component was designed with readability and hierarchy in mind, enabling users to quickly scan compact tables, navigate complex workflows, and identify action items across dense screens.
Ensuring consistency and continuity
Beyond visual consistency, the design system established shared UX patterns that ensured a cohesive experience across the entire suite of applications. In addition to a robust set of reusable components, the system defined larger interaction models and layout conventions that were applied consistently across tools. This allowed users to move between applications with confidence, recognizing familiar behaviors and interface logic. By aligning both the visual and experiential layers of the UI, the system helped each product feel like a part of a larger, unified ecosystem.
Faster ideation, iteration, and delivery cycles
The design system enabled faster ideation, iteration, and delivery. A comprehensive set of ready-to-use components and patterns, allow the team to quickly produce high-fidelity designs without reinventing common UI elements. This accelerated the design process, reduced ambiguity for developers, and allowed the team to focus on solving product-specific challenges rather than foundational UI decisions. The result was a more efficient workflow and shorter time-to-delivery across product design tracks.
Built for Designers & Developers
The design system was built to serve both designers and developers. Each component in the Figma library had a corresponding implementation in Storybook, ensuring visual and functional alignment across design and code. This dual-library approach made the system accessible and reliable for the entire team, streamlining handoff, reducing inconsistencies, and enabling a shared source of truth throughout the product development process.
Smoother development handoff
The design system significantly improved handoff to development by reducing the need for extensive design documentation. With a shared, well-defined library in both Figma and Storybook, developers could reference standardized components directly, minimizing ambiguity and misinterpretation. This ensured greater consistency in implementation and accelerated the development process.
0-1 in months, not years
The design system enabled us to design, deliver, and launch products rapidly, providing a solid foundation that streamlined every stage of design and development. With the reusable components and consistent patterns, we were able to build an entire suite of internal tools within just two years—accelerating timelines without sacrificing quality or cohesion across the product ecosystem.
A stable and scalable system to support future development
The design system established a stable and scalable foundation that continues to support ongoing and future development efforts. Its flexible architecture and clear governance enable the team to easily add new components and evolve existing patterns as needs change. This ensures the system will grow alongside DreamWorks’ expanding suite of tools, maintaining consistency and efficiency for future product development.
Ready for the next one?