top of page

Building DDS Color Gallery V2: discovery to handoff

Role: Senior Product Designer

Year: 2022-2024

color gallery.png

Introduction

In December 2022, I joined Dell’s Design System Team – a robust platform that supports over 150 client-facing and internal products globally. One of my responsibilities included the DDS (Dell Design System) website, particularly the Color Gallery section, which provides critical guidance on color usage and accessibility.

As the design landscape evolved and the Data Visualization Squad introduced new color palettes focused on dashboards and accessibility, it became evident that the existing gallery no longer met users’ needs. The outdated structure couldn’t accommodate the level of detail required for modern data visualization and accessibility compliance. To address this gap and improve the user experience, I led the redesign of the Color Gallery to showcase and document DDS colors in a more usable and scalable way.

context.png

Dell Color Gallery V1

Designing the new color gallery

The process began with a discovery phase to align on technical requirements and user needs. I collaborated closely with the Data Visualization Squad to understand the new palette structure and the accessibility standards essential to Dell products.

I also interviewed designers and developers to uncover current pain points—particularly the lack of clarity in applying color combinations and accessing documentation. By partnering with DDS engineers early on, I ensured alignment with technical constraints to avoid rework down the line.

I concluded this phase with a Competitive Analysis of 50+ design systems, identifying industry best practices, UI patterns, and documentation structures that could be adapted to meet DDS-specific requirements.

Framing

To extract insights from stakeholders and competitive benchmarks, I created a Comparative Table to identify trends and information hierarchy. This helped frame the baseline content and structure needed to meet both user expectations and compliance standards.

 

The framing phase allowed us to define a more scalable, accessible, and informative approach compared to the previous implementation.

Ideation

I explored multiple low-fidelity concepts for presenting color information, initially testing existing DDS components such as Accordions. However, due to the complexity of color use cases, new design patterns were needed.

The most promising ideas were presented in a Design Critique session with the full DDS Team (including designers, developers, and directors) resulting in alignment around an expandable, modular concept. This led to high-fidelity iterations that balanced brand identity with usability.

Refinements

While refining the high-fidelity prototype, I worked with UX Writers and the Accessibility Center of Excellence to ensure accurate content and WCAG compliance.

The final design introduced a modular system to display colors with comprehensive metadata, including hex/RGB codes, contrast ratios, use cases, and accessibility guidelines. I added interactive states such as hover actions and quick-reference elements to improve navigation and comprehension.

These changes resulted in a more intuitive experience for both designers and developers, reducing the time spent searching for accurate color information.

Image-Refinement.png

Handoff

For a smooth transition to development, I partnered with engineers to tailor a developer-centric handoff. Based on our conversations, I created a visual-first documentation approach, minimizing dense text and prioritizing quick visual scanning.
The documentation was divided into two parts:

 

  • Component-level documentation detailing anatomy, states, variations, keyboard behavior, and accessibility.

 

  • Website implementation documentation outlining the layout and behavior of the Color Gallery page.


This structured handoff contributed to faster implementation and reduced clarification requests during development.
 

Outcomes & Takeaways

Although we haven’t run formal usability tests yet, early feedback from designers and developers using the new gallery has been highly positive. Compared to the previous version, the redesigned gallery:

 

  • Reduced time to find color specifications by an estimated 30–40%.

 

  • Increased internal adoption of DDS color tokens across product teams.

 

  • Improved accessibility awareness by clearly surfacing contrast guidance and compliant combinations.

 

  • Streamlined collaboration across design and engineering through modular documentation.

​

​

Key Takeaways:
 

  • User-driven design: Engaging early with users helped ensure the final product addressed real frustrations and delivered practical improvements.
     

  • Cross-functional collaboration: Working with branding, accessibility, UX writing, and engineering ensured the solution was both creative and implementable.
     

  • Scalable documentation: Prioritizing developer needs during the handoff helped reduce implementation time and encouraged consistency across products.

Image-Final.png

New color gallery

Let's get in touch!

Contact me if you're looking for a product designer or just grab a (virtual) coffee and talk about design.

 

I'm always happy to chat!

bottom of page