Imperfect Foods delivers groceries on a mission to eliminate food waste and build a better food system for everyone.
A modular system built to improve Imperfect Foods' workflows, prototyping, and brand consistency.
Lead Designer: Sara Utz
PM: Ben Kane
EM: Jason Arnold
Developer: Tim Farley
When Imperfect Foods refreshed its homepage in early 2021, hundreds of outdated content pages remained on its domain. Not only were they off-brand, they weren't serving its customers properly. A small team came together to take on that challenge.
We set out to find an easy way to update content pages that did not require ongoing engineering support. Plus, we aimed to build cohesive growth landing pages internally for quicker testing. We chose to tackle these two needs with a Landing Page Design System.
I began creating this system in Figma by pulling the foundational styles and components from the homepage revamp. Then, I mapped out all the necessary modules to build a basic landing page. I created each module across desktop, tablet, and mobile devices for easy prototyping.
These modules were then developed and built into a CMS by the engineering team. Lastly, everything was QA-ed in advance to expedite future page builds.
The completed Landing Page Design System empowered our Marketing and Product teams. They now had the ability to easily create or update any landing page at any time using the documentation and components in Figma aligned with the corresponding CMS.
This modular system quickly scaled and expedited page creation. Following its launch in summer 2022, several key content pages were refreshed, Imperfect's impact report pivoted from a PDF to a content page for the first time ever, and growth landing pages began utilizing CMS templates for testing and optimization.
