I’m currently working on a self-directed project to document the design system used on Science.org.

Since our redesign launched in 2021, we’ve continued to expand on our site style, adding new elements as needs arise. Over time, I realized that we needed a formal reference in order to keep our designs consistent.

I taught myself Handlebars in order to build this Patternlab library from scratch, starting with basic CSS and utility classes, then building up to more complex templates.

In addition to documenting our site styles, I’ve also built in some tools for internal users, such as this one that allows users to preview how an image will display in certain templates. This gives internal users the freedom to experiment, iterate, and test quickly, without having to edit actual content, improving efficiency and promoting more familiarity with the site.