Sherwin-Williams’ Design System (Dropcloth) helps designers, developers and product teams work together to create premium and consistent user experiences across all Sherwin-Williams digital products.
Before using Dropcloth, there was inconsistency in design and development, varied styles and components leading to a disjointed user experience.
After using Dropcloth there is now a unified library of components that ensures consistency in both design and implementation, fostering a cohesive user experience.
I led the effort to implement the 8 point grid spacing to the design system to ensure digital products and website pages are accessible and promote a premium aesthetic to our customers.
I collaborated with Sherwin-Williams' Design Lead and Tech Lead to align all our components to the 8 point grid for consistency and scalability. I used the 8 point grid system to simplify scaling across different screen sizes. Using multiples of 8 for layout, dimensions, padding, and margin ensures consistency across devices.
Accessibility is about making sure that an experience is open to all. When everyone has the same opportunities to participate in that experience, regardless of their abilities, that’s when it is truly usable. Accessibility on the Sherwin-Williams site is not only accomplished through image creation, page designs and alt-text, but also through component creation.
Accessible design helps everyone, not just people with disabilities. Additionally, disabilities exist on a spectrum and can affect anyone.
While updating our design system, I prioritized accessibility by ensuring they adhere to the WCAG guidelines. I took the following steps to make sure the components were accessible:
1. Component touch targets were at least 48 px in height (designing for users with low mobility)
2. Appropriate contrast between foreground and background for better visibility (designing for users with low visibility)
3. Pairing iconography with text for users to understand context (designing for users with cognitive disabilities)
4. Having clear and concise copy wherever necessary (designing for users with cognitive disabilities)
Updating Sherwin-Williams' component libraries to the 8 point grid system helped teams become more efficient and create unified user experiences for our customers.
Prioritizing accessibility expressed the brand's voice not only through language, but in all aspects of experience design.
In many design processes, “accessibility” feels like something we only think about as a final step to avoid ADA lawsuits. Not only is this narrow definition of accessibility bad for users, it’s bad for companies.
At Sherwin-Williams, we wanted to expand our thinking to make accessibility an integral part of the design process from beginning to end.
