Imperfect Foods

The Ask

Imperfect Foods is a grocery delivery service (and Public Benefit Corporation) on a mission to reduce food waste. After raising their Series D ($110M) in early 2021, they needed to quickly upgrade their marketing site, which receives about 2 million visits per month.

They had already invested in an extensive redesign with detailed annotated mocks. What they needed was implementation, so they brought in the agency Mutations Ltd, specifically requesting developers with a lot of experience in CSS animations and "highly interactive" React components. Those happen to be two of our specialties, so Mutations subcontracted us into the technical lead role, mentoring and directing two other developers on the project.

The goal was modular, well-documented components via Storybook, with accessibility for keyboard and screen reader users.

The Process

The annotated mocks, opinions included

We built several interactive components that are still on their site:

Pantry Component: A carousel scrolling through product categories, with each slide animating via a background wipe and fade-in foreground. This one was Cory Alvernaz's baby; with our help he programmed in the swipe animations and the auto-playing feature.

The Pantry component doing its background wipe

Badge Carousel: Large buttons arranged in a semi-circle along the left side. Clicking each triggers coordinated animations showing specific products. Rob Kayson and Karina worked on this together, and he knocked it out of the park. The trickiest parts were animating so many disparate SVGs to work in perfect harmony and aligning the badges in a semi-circle. It was fun to dust off our high school geometry knowledge!

The Badge Carousel, geometry homework included

Impact Slider: A slider showing how much water, food, CO2, and time could be saved by using their service. This one was a solo effort. The scrolling numbers were hand-rolled in plain JavaScript rather than an animation library (the code is up on CodePen), with SVGs animated via CSS.

The Impact Slider, made of accessible divs

The slider was built with divs but made accessible with proper ARIA attributes:

<div aria-valuemin="0" aria-valuemax="2" aria-valuenow="1" aria-orientation="horizontal">

The Outcome

The components launched as part of Imperfect Foods' major site refresh, each delivered with full Storybook documentation so their internal team could maintain and extend the work. Years later, they're still live on the site, animating away for a couple million visitors a month.