Wayfair's Design System Audit

As lead content strategist for Wayfair's design system site, I conducted a large scale design system audit. This audit identified several inconsistencies and gaps in our existing content model. 

By conducting this audit and identifying the gaps, the design system team was able to reconcile inconsistencies, gain approval to add new features, move out of the legacy version of of Contentful (our CMS tool), and kick off several additional work initiatives for the team.

When taking over content strategy leadership duties for the design system team, I had to familiarize myself with their tools. Part of this process entailed learning the CMS and content model. While doing this, I started to notice inconsistencies between fields in our content types (the content types are what makes up the content model). To confirm that the inconsistencies were in fact a trend, and not something easily rectified without engineering support I reached out to our Contentful representative and scheduled a deep dive into our system, while comparing it to the full scope of Contentful tools we had.

This helped us find out that we were running a legacy version of contentful, and each of these inconsistencies were hard-coded into the site as patch jobs. We had a larger problem on hand rather than just someone selecting the wrong type of field properties. None of the inconsistencies I found could be changed without changing the code.

Knowing this, and aware of the potential impacts to both scope and our roadmap I started a full scale audit. Mapping the content model and identifying all of the content types.

After listing all of the content types (and defining them, since more than half didn't have a description or definition). I was able to start identifying the fields that made up each content type.  When this audit started we have several variations of the same thing (ex. Fifty-Fifty Image, Two Up Model w/ Image), but not  justification for why we had more than one.

In mapping the fields, I identified 150+ fields for the whole content model. These fields (you guessed it) were duplicated. However, not only were they duplicated but they had naming inconsistencies and the properties that made them up were inconsistent. This is why multiple content types and hard-coding had been used to get the functionality
right. These tiny properties, buried inside of the fields of our CMS, were things that had been causing years of problems.

To better illustrate the issue, and make a case for the large engineering lift, I had to better illustrate the scope of the problem. For example, for the content field, we had seven instances, all missing the helper text (which made it so users of the CMS knew what to do with the blank fields), made up of a rich text or long text, and each having different settings and validations. This was certainly not the only example.

I sorted every single field, by name, to showcase the duplication and  inconsistencies. By mapping it out this way, I was able to give  leadership a quick visual that demonstrated the actionable items.

All of this work led up to creating a new initiative and allocating time and space from our engineering team to "Fix the Basics", one of Wayfair's primary goals. The design system team now had a clear idea of the problem, an action plan to solve it, and a way to track quick wins.

To get started, our first achievement was moving out of the legacy version of Contentful and integrating some of the new features, such as Compose, to better empower the design system team.