Design System Analysis

Below are some of my research notes for this particular case.

Please prepare and share a critique of REI’s design system, Cedar. We’re specifically interested in your assessment of the design system itself, and only secondarily how it’s been applied. 

What do you find successful or not?

My observation is that the Cedar Design is a mature design system. Helper classes like component variables is complete. On the website, the name spaced prefix of "cdr" is found throughout the entire composition of the webpage, indicating at least successful implementation on at least one product.

If you were to take over leadership of this system, where would you start?

Not knowing what the current challenges are, I would focus on something straightforward and impactful. I would add a top-level navigation for selecting the type of audience (developer, designer, content writers, marketing etc.) and start looking at opportunities to communicate more granular details for each audience to maximize the documentation's usefulness.

What recommendations would you make to improve it?

  • Expand on designer documentation to cover more interface guidelines

    • Ex: In a Button, pairings of Primary/Secondary can be swapped with Primary/Tertiary and in certain contexts the latter is better if the primary action is preferred over the alternative action

  • Improve spacing scale

    • The best scale is split into two (one for spacing between elements and one for layouts)

    • Use a more ergonomic naming scheme (phase out fractional names for levels or actual spacing values)

  • Investigate native iOS/Android UI kit implementation

    • Possibly document and centralize already built iOS and Android components if they are already using the tokens for styling

  • Add knobs

    • Not a dealbreaker, but component variations can be more easily discovered by developers by adding interactive knobs and a code snippet area with the generate component with its props

  • Introduce a ramped Typography scale with multiple weight categories (Display, Heading, Label, Paragraph)

    • Structure is for implementation of dynamic text for accessibility

  • Organize an illustration assets library if there are resources in-house to design them

  • Icon system should support ligatures for implicit labeling (screen readers would read icon as plain text)

  • StyledComponent’s ThemeProvider can be leveraged to solve issues across accessibility problems including low vision colour modes and enlarged typography ramps

  • If every product (icon, Vue.js library, docs, etc.) had its own versioning, the design system could move faster since each piece could be updated individually

What steps might you take to get everyone on board? 

This really depends on the problem. If it's about understanding the value of the design system, then the focus may need to be on educating stakeholders on the improved workflow and systematic influence of the aesthetic and technical standards a design system creates.