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.
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.
As half of the two-woman team working on this system, my responsibilities included:
- Screen testing
- UI Auditing
- Atoms (Colors, Buttons, Icons)
- Components (Cards,
- (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.