Building DDS Color Gallery V2: discovery to handoff
Reading time: 7 minutes
Introduction
In December 2022, I joined Dell's Design System Team – a robust product that supports over 150 client-facing and internal products worldwide. The squad I was part of, among other responsibilities, took care of the DDS (Dell Design System) website, including the Color Gallery section, which provides essential information and documentation on color usage and accessibility.
​
As the team evolved, the existing Color Gallery no longer met our users needs, especially with the Data Visualization Squad developing new color palettes. Focused on dashboards and accessibility, these new palettes required detailed documentation that the previous website component couldn't adequately provide. Looking to enhance the user experience, I was responsible to create a new feature to show case the DDS colors.
Dell Color Gallery V1
Designing the new color gallery
I conducted a discovery process to identify all the requirements for the new color gallery. Firstly, I collaborated with the Data Visualization Squad (DV) to understand the requirements for the new palette and accessibility standards - crucial for Dell's product.
​
Secondly, I talked to developers and designers to gather insights on their preferences and pain points concerning color guidance within the current gallery. Additionally, I worked closely with developers from the DDS to understand coding requirements and constraints, ensuring feasibility of new feature implementations.
​
To conclude the discovery phase, I conducted a Competitive Analysis of over 50 design systems, identifying trends and best practices to inform our approach moving forward.
Framing
I compiled all requirements from developers and designers meetings and created a Comparative Table to analyses all the data collected from the Competitive analyses. The goal was to understand what was the common practices, what information should be displayed and learn from other design systems.
​
Understanding the best practices and users needs, I moved to the next step.
Ideation
I generated multiple low-fidelity options for the color display feature. While initially experimenting with DDS current components such as Accordion, the requirements proved to be highly specific. The most promising designs were taken thorough review during a Design Critique session involving the entire Dell Design System Team, including designers, developers, and directors. Following this, I progressed to high-fidelity design iterations.
Refinements
To develop the high-fidelity feature, I collaborated with UX Writers and sought guidance from the Accessibility Center of Excellence. The feature aimed to present essential information on text color contrast, code, and usage.
​
Leveraging the newly launched identity style by Dell, I opted for modular design to showcase colors. Each module served as a comprehensive component, enabling users to explore color palettes effortlessly.
​
Furthermore, I incorporated interactive elements such as hover effects to enhance user interaction and facilitate additional information display. Following refinement, I conducted another Design Critique session to gather feedback before proceeding with the handoff process.
Handoff
To develop the handoff, I paired once again with the engineering team to understand what information they needed in detail and what was the preferred way to consult that. Following our discussions, it was determined that a visual handoff would be most effective. As such, I structured the documentation with minimal text, prioritizing visual clarity.
​
The handoff documentation was divided into two sections: the color palette component documentation and the website page. I presented detailed insights into the construction of the color samples and webpage, illustrating their anatomy, behaviors, states, variations, sizes, keyboard navigation, and specifications. This comprehensive information was designed for easy access by developers, streamlining the implementation process.
Takeaways
As a result of this project, I not only improved the usability and interface of the feature but also engaged in cross-functional collaboration throughout all design stages. Applying the methodology while keeping accessibility, user needs, and brand requirements in mind was crucial.
​
Key takeaways from this project include:
​
-
User-focused solutions: By engaging with users early on, I was able to identify their needs and pain points. The next step for this feature is to undergo user testing to further understand areas for improvement and continuously enhance the experience.
-
Cross-functional teamwork: Collaborating with developers, UX writers, the Accessibility Center, and the Branding team enabled the creation of a feasible solution that meets diverse needs.
-
Developer-centric handoff: Understanding engineering requirements and providing design documentation tailored to the development team's needs can streamline the implementation process.
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.