GRID Design System
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,
- Have a well-documented system and library of components to be easily-digestible for all GRID team members.
- 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.
More Design Work
F&B Corporate Website Study
