Design System for Online Catalog and Estimation Tool RSMeans Data Online

Establishing a design system for more effective collaboration

View In Adobe XD

Project Date: 12-20-2021

The primary benefit of this design system is the ability to replicate designs quickly by utilizing pre-made  UI components and elements. My goal is to provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As an added bonus, any major visual rebrands or redesigns can be managed at scale through the design system.

  • Simpler UI elements are created already and reusable, design resources: UX teams can focus less on tweaking visual appearance and more on more-complex problems (like information prioritization, workflow optimization, and journey management). While this payoff might seem small when you create only a small number of screens, it becomes substantial when you must coordinate efforts across dozens of teams and thousands of screens.
  • It creates a unified language within and between crossfunctional teams. When design responsibilities shift or when teams become geographically dispersed, a unified language reduces wasted design or development time around miscommunications.
  • It creates visual consistency across products, channels, and (potentially siloed) departments. Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and  experiences that seem fragmented or unrelated to the brand.
  • It can serve as an educational tool and reference for junior-level designers and content contributors. Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.