Webflow Icon

Dell Design System v.2.0: Redesigning components to meet WCAG 2.1 AA standards

Dell Design System v.2.0: Redesigning components to meet WCAG 2.1 AA standards
Project overview

During my tenure as a Product Designer at Moonraft, I had the privilege to collaborate with Dell Technologies on the Dell Design System v.2.0 project. This initiative aimed to create a cohesive and comprehensive design language to enhance the accessibility, inclusivity, and usability of Dell's digital products. This project was publicly shareable, unlike other Dell projects under NDA.

Role and Responsibilities:
In this project, I worked with cross-functional teams to design key components used across all Dell digital platforms. Additionally, I was responsible for designing and documenting the components and providing guidelines on how to use them effectively. The components were designed and engineered in partnership with the Accessibility Center of Excellence (CoE) to ensure they met global Web Content Accessibility Guidelines (WCAG 2.1).

Buttons (External link)
Goal: Ensure buttons clearly indicate their function to enhance user interactions.

  • Actions: Crafted labels and styles for buttons to clearly describe their actions, ensuring consistency and clarity across applications and websites.
  • Learnings: I learned the importance of clarity and consistency in design elements to improve user experience and reduce confusion.

  • Tables (External link)
    Goal: Present data in an organized and easily interpretable manner.

  • Actions: Designed tables to display data in rows and columns, highlighting relationships and making comparisons straightforward.
  • Learnings: I gained insights into effective data visualization techniques and the importance of structure in making complex information accessible.

  • Cards (External link)
    Goal: Create concise containers for information to improve content discoverability.

  • Actions: Developed card designs to feature key information, related content, and navigational choices, enhancing user engagement and interaction.
  • Learnings: I discovered the power of modular design in presenting information efficiently and the impact of visual hierarchy on user navigation.

  • Badges (External link)
    Goal: Convey status and highlight content succinctly.

  • Actions: Designed visual labels and indicators (badges) to provide quick, at-a-glance information about content status and importance.
  • Learnings: I learned how small visual elements can significantly enhance content comprehension and user decision-making.

  • Impact Metrics:
    The accessibility compliance rate was 95%, with design components meeting or exceeding WCAG 2.1 AA standards. The user adoption rate exceeded 85%, with Dell's digital products implementing the Dell Design System v.2.0 components within the first six months of its release.

    (Client)
    Dell Technologies
    (Service)
    Design System
    (Timeline)
    6 Months
    (My Role)
    systems Designer Visual Designer
    (Team)
    2 UX/UI Designers

    If you've reached this far, you are awesome! 😎 Let's keep going?