Public Web Design System Library
Problem:
Square’s Public Web experience was very disjointed as Users flowed from one webpage to the next, web elements and Interaction Designer often was re-inventing each webpage and designing in silo’s. A rebrand was needed to create a cohesive visual language and our Public Web Design System team was formed to establish reusable Figma and web components in our CMS (Contentful).
Solution:
The rebrand needed to be applied to more than 40 of Square’s highest trafficked webpages. In order to facilitate and speed up this effort, as the sole Production Designer on Design Systems, supporting the rest of the Production Design community to ship—I created and built a library for templated page designs and web-based components in our CMS (Contentful). This library served as the source of truth for how web components were to be set-up in various page layouts. For efficiency, I also created many sticker sheets of pre-configured variations of each module. Other Production Designers and Designers were able to browse through this catalog to clone and copy into their design/build, reducing page launch timelines and level of effort in all web projects.
For faster filtering, I implemented a sorting function at the top of the library. I designed each tile to have its’ own page with either a Full Page Build to copy or a Sticker Sheet for the module/web component, along with documentation written for the types of variations the component has.
Our team created a corresponding Figma Component in the Design System Figma Library for each module.
