GRID Design System

The atomic design system framework meets Webflow’s no-code functionality for GRID Magazine’s growing content functions.
UI Design
UX Research
Webflow Development
View Project Site
View Prototype
Client
GRID Magazine
Tools Used
Figma, Webflow

Brief (The Problem)

In mid-2020, we in GRID’s digital team were in the middle of migrating from Wordpress to Webflow. Simultaneously, we began building a design system that would give us easily scalable design components without having to rely heavily on a developer. GRID’s previous site hosted on Wordpress was a custom template with dedicated responsive pages for stories, categories, contributors, and utilities.

The GRID store website was also on Wordpress but the ecommerce template restricted us from adding new designs.

The site was doing well, but my senior web manager, Kyleen, and I saw the urgency to ship out additional changes or features. Having to translate our Figma designs through a developer or plugin would be tedious and ineffective with the projects we had in our pipeline. Seeing Webflow’s reliable hosting plan gave it more brownie points after we had encountered multiple issues with our previous hosting provider.

All signs were pointing at a scalable website on this growing no-code platform, having a design system would be its core foundation.

Goals

With GRID having a lean team, we wanted to involve the art and editorial teams in the process,

  1. Have a well-documented system and library of components to be easily-digestible for all GRID team members.
  2. Incorporate atomic design structures across our Figma designs and Webflow classes for a streamlined design process — this ensures its scalability in the long run.

Responsibilities

As half of the two-woman team working on this system, my responsibilities included:

  • Documentation
  • Screen testing
  • UI Auditing
  • Atoms (Colors, Buttons, Icons)
  • Components (Cards,
  • Templates
  • (Radar Calendar, Watch & Listen,
  • Updated page designs: Contributors,
  • GRID Store redesign

In January 2021, about 6 months after kick starting the design system, I was assigned full responsibility over the design system on Figma and Webflow. I translated any editorial or sales needs to webpage designs and any corresponding components.

Design documentation

How did this help the GRID team?

After establishing the design system, I got to lead design for the magazine’s first digital collection. I go more about it in a separate case study, but to sum it up, the design system provided even our editorial and art teams to reference characteristics of current components and contextualize them into the new collection of stories we were working on.

In the design and build phase of that project, I had more time to find optimized tools to present our stories (via Mapbox). Plugging in color and typography styles became a matter of a short conversation with our art director and on we went to test the microsite.

What went well — Review Goals

Global classes allowed us to be flexible in site structure

  • Header tags can be adjusted to aid SEO without compromising styles
  • .header or .mobile-subheader classes allowed for style flexibility while sticking to header hierarchy (H1, H2, H3, etc.) for SEO
  • Button classes can be used for elements other than buttons when needed
  • Flexibility when creating new components
  • Having the library readily available gave more room to creative innovation instead of micromanaging design. If we wanted to break a few rules (in the case of full-width items within the margin restrictions), we had to defend the decision. This was the case for some of our newer pages (Expedition collection and Hometown), the rest of the layout remained within the system, maintaining the visual language.
View Project Site
View Prototype

More Design Work

UX Research
UI Design
Webflow Development

Gajah Gallery Singapore

Gajah Gallery was my client for about a year, throughout which we collaborated on interactive pages coded from scratch then migrated to WordPress.
UX Research
UI Design
Webflow Development

Bea Policarpio Portfolio Redesign​

A Wordpress + Elementor site designed for the artist's easy customization with minimalist templates to highlight her paintings.