Case study 06 of 10 · E-commerce · Independent concept project

Imperfect Foods

Selling ugly produce means selling trust: a storefront that makes the sustainable order the easy one.

5 min read

Role
Concept study, end to end
Type
Independent concept project
Year
2022
Platform
Desktop web
Scope
Competitive research, user journey, design system, hi-fi UI, usability test plan
Industry
Sustainable grocery delivery
Authorship

An unsolicited concept study built around Imperfect Foods, a real grocery brand with a real shipped storefront, made without any affiliation, commission, or endorsement. The study deliberately reuses the brand's visual world, its name, logo, product photography, and voice, so any resemblance to the production site comes from that borrowed material: the research, page structure, and system work shown here are my own unpaid exploration, and none of it was adopted or shipped by the company.

The hard part

One page has to teach food rescue, defuse subscription anxiety, and sell groceries at the same time, without any of the three slowing the other two.

Look for

Notice how every mission moment sits directly beside a low-friction action, so conviction and conversion never compete for the same click.

The sustainable choice has to be the easy one

People already want to fight food waste. What stops them is a storefront that makes rescuing groceries feel like homework. Imperfect Foods sells produce that is perfectly edible but cosmetically rejected, through a weekly subscription. That model inherits every doubt of online grocery, then adds two of its own: is imperfect food actually good, and what am I committing to?

  • Affordable and healthy read as opposites, so shoppers assume the sustainable option costs more.
  • Sourcing is opaque on most platforms, which is fatal for a brand whose whole pitch is where the food comes from.
  • Subscription language triggers commitment anxiety before the value is ever demonstrated.

Desk research compared Misfits Market, Thrive Market, FreshDirect, and Whole Foods via Amazon Fresh across value communication, product clarity, and onboarding friction.

The calls that shaped it

A cart that starts full and stays editable

Pre-filling the box removes the cold start, but only if the copy hands control back in the same breath. The competitive scan showed commitment anxiety killing signups: Misfits Market gates products behind an account, Thrive Market gates them behind a membership. So the service section leads with the opposite promise: your favorites are already in the cart, and you can add things in, take things out, and order exactly what you want. The hero reinforces it before the pitch even lands, with no commitment and no fees stated above the headline. I considered the standard alternative, an empty cart fed by a preference quiz, which signals control just as well but stacks steps in front of the first moment of value. Pre-filling carries its own risk of feeling presumptuous, which is why the copy is built from editing verbs rather than recommendation language.

Cream section with the headline Affordable groceries delivered weekly to your door, copy about starting with favorites already in the cart, a magenta Get started for free button, and an illustration of an Imperfect Foods box overflowing with produce.
The box arrives pre-filled and fully editable: add things in, take things out, one weekly delivery, no store trip.

Mission proof at every scroll stop, action always adjacent

The mission earns attention only if it never costs a click. The journey map located the real doubt at evaluation: is the food fresh, can I trust this brand, are the prices actually lower. So instead of quarantining sustainability content on an about page, proof is threaded through the scroll: a running tally of food saved rides above the hero headline, an impact section breaks one weekly box into food recovered, water conserved, time saved, and carbon avoided, and a slider lets the reader scale that story across weeks. Each of these moments keeps a CTA within reach, so being convinced and getting started are the same gesture. A dedicated impact page was the considered alternative: it would let the story breathe but pulls exactly the hesitant readers off the conversion path at their most persuadable moment. The tradeoff is density, managed by giving each proof point its own section rather than stacking statistics.

Impact section titled Taking a bite out of food waste, with four icon stats for food recovered, water conserved, time saved, and carbon avoided, a week slider labeled slide to see how your impact grows, and a magenta Get started for free button.
Impact broken down per weekly box, with a slider that scales the story across weeks and a CTA waiting under the answer.

A warm system for a utilitarian errand

Warmth is not decoration here. It is the argument that imperfect means charming, not defective. The product is cosmetically rejected food, so the visual language has to do persuasion the copy cannot: odd produce framed by a cold, clinical interface reads like damaged goods. The system pairs natural greens with a confident magenta, keeps Roboto as a plain-spoken workhorse for reading, and spends the personality budget on handwritten annotations and illustration, a delivery van looping one neighborhood road, a beet parachuting into the footer box. Competitor analysis pointed the same direction from the other side: Thrive Market's premium polish was logged as a weakness because it deters the price-conscious, and Whole Foods reads generic inside Amazon. The considered alternative, an all-photography art direction, would look more premium but flatten exactly the friendliness that makes the mission approachable. The bet is that a grocery errand done in a warm system starts to feel like participation rather than penance.

Magenta footer with a whimsical illustration of a beet descending by parachute into an open Imperfect Foods box, navigation links arranged around it, and a bottom row with logo, B Corp mark, social icons, and an App Store badge.
A beet parachutes into the footer, so even the sitemap does brand work instead of ending the page on a link dump.

One scroll from skeptic to subscriber

The homepage is sequenced as an argument: prove the food is good, prove the model is easy, prove the impact is real, then answer what is left.

Homepage hero with the headline Groceries that help you fight food waste, a green badge showing total pounds of food saved, a magenta Get started for free button, and a yellow photo of a pink Imperfect Foods box stamped For: Thoughtful Eaters.
The hero pairs pitch with proof: a tally of food saved rides above the headline, and the CTA leads with no commitment.
Product section on a pink background listing pantry, produce, snacks, plant-based, dairy, and meat and fish, with meat and fish highlighted beside styled photography of packaged salmon, shrimp, and beef, and a See our food button.
Categories read like a menu, not a database: six plain words beside appetizing product photography, one CTA to browse.
Section titled Grocery delivery, done the right way, with copy about one van serving a whole neighborhood, an inline ZIP code field with a Get started button, and an illustration of a delivery van on a looping road past small houses.
ZIP entry lives inside the eco-delivery story, so checking coverage gets answered in place instead of at checkout.
Partners who share our values section showing product shots of Tillamook cheese, La Croix, Organic Valley milk, Cento beans, and a snack mix, above a row of partner logos including Imperfect Foods, Tillamook, Impossible, and Cento.
Familiar partner logos vouch for unfamiliar imperfect produce, lending the category a trust signal it cannot generate alone.
Community section headlined Our customers have saved 139 million lbs of food, a magenta Join the movement button, three testimonial cards with quotes about weekly boxes, photos of delivered produce and a smiling customer, handles removed, and a small net-zero by 2030 pledge banner above.
Testimonial cards stack under the collective impact headline, with the account handles redacted for this case study.
FAQ section titled Hungry for more with a See all FAQs button and four collapsed rows: how Imperfect works, what products exist, what makes food imperfect, and whether signup costs money.
The FAQ leads with the four questions that block signup, collapsed by default so each answer is one tap away.

How I planned to test it

Size up the serviceFind a productTrace your impactCheck testimonialsGet questions answered

Walking a first-time visitor through these six scenarios could reveal whether the homepage answers each doubt in the order the journey map predicts, and where the scroll loses people. It could not show whether that confidence survives all the way to a paid box on a doorstep, and since no walkthrough has been run, even the first question stays open.

Everything in this chapter is test design for a concept homepage, not evidence from live sessions: no participant ever attempted these tasks, so no claim here is validated by real use.

What I learned

Pre-filling is a promise about control, and the copy has to keep it. The moment the cart starts full, every sentence around it must be an editing verb, because a pre-filled box described in recommendation language flips from convenient to presumptuous. The words are load-bearing infrastructure for the flow, not polish on top of it.

Mission content converts as proof, not preamble. Sequencing sustainability into the scroll, tally, impact breakdown, slider, testimonials, each with an action beside it, treats the mission as evidence for a purchase decision rather than a values test the visitor must pass first. The discipline is refusing to let any mission moment exist without an adjacent next step.

A visual system can carry a positioning argument the copy never states. The warmth of the palette, the handwritten notes, and the parachuting beet all make one claim, that imperfect means charming, and they make it continuously, in the background, on every section. Choosing where a brand spends its personality budget is a product decision, and here it was spent reframing the product's supposed flaw.

Appendix: foundations and system

The system underneath the warmth is strict: a fixed desktop grid, stepped color ramps with named families, and a defined button set. The looseness on the surface is only affordable because the structure below is not loose at all.

Grid system spec for a 1440px desktop layout showing twelve pink columns with labeled margin, column, and gutter widths and an overall content width of 1230 pixels.
Desktop grid at 1440 with a 1230px content area: generous margins give the illustrated sections room to breathe.
Secondary color ramp named Bowser Shell showing eight green swatches from a deep olive 700 down to a pale 50, each labeled with its hex value.
The Bowser Shell greens step from deep to near-white, giving the sustainability register a full working range.
Button component sheet showing magenta filled, outlined, and text-only label buttons with chevron icons, plus circular icon-only buttons, each in enabled and muted disabled states.
The button set defines filled, outline, text, and icon-only variants in brand magenta, with disabled states specified up front.
Next storyW*nder →