TOXSquare - Scalable Atomic Design System, PlayStation Visual Arts
Project Summary: I led the creation of TOXSquare, a scalable design system that ensured consistency and efficiency across PlayStation Visual Arts Studio tools and applications.
My Role: Visual Design / UX Design / Leadership / Design System Architecture / Documentation
Software Developer
Engineering Team UX Designers
Cross-platform
Dev - QT Design - AdobeXD
6 Months
Challenge
Designers and Engineers faced challenges with no unified design language, redundant components and scalability issues.
Business Goals
Build a system that is intuitive, flexible, brand-aligned and supports our product development cycle by reducing design, prototyping and development time.
Stakeholders
Director of Engineering, Director of Tech Art, Director of Animation, Director of Innovation
60%
Reduce Design Time
100%
Increase in adoption rate
50%
Reduce Development Time
Process
Research & Analysis: Conducted an audit of existing tools to better identify needed components and opportunities for consolidation. Benchmarked other successful design systems such as Spectrum, Polaris, and Material to better align to best practices and ensure a holistic array of reusable components.
Ideation & Strategy: Defined the core foundations for our design system by crafting a Style Guide and setting guidelines for Typography, Colors, Images, Layout, UI Patterns and more.
Design & Iteration: Started by creating the Atoms, which were the foundation of the entire Atomic Design System. During weekly design reviews, I collaborated closely with the software engineer to ensure the components were built with performance and accessibility in mind.
Final Solution - Main Features:
A fully documented library of reusable components was made available to designers and engineers with clear usage guidelines to help with onboarding and implementation.
Full Design System Library of Components created for designers.
Full library of reusable development components created in QT by developers to use when building and developing tools.
Reduced design and development time for new tool features by 40%.
Unified the visual language across PlayStation Visual Arts Studio’s suite of tools.
Positive feedback from cross-functional teams, who cited increased efficiency and confidence in using consistent components.
Lessons Learned
If I were to continue evolving TOXSquare, I would explore how to integrate dynamic theming for different internal teams and expand accessibility guidelines even further.
“Merilly has repeatedly demonstrated an unparalleled ability to turn complex problems into elegant, user-centric solutions. I'm thrilled to have had the chance to work with a top-tier UX Designer like Merilly and she has truly changed the way I approach project initiation and planning.”
Becca Abel
Senior Software Engineer | Sony Entertainment Interactive