Rebuilding a produce-box subscription around one dashboard, not six pages.
A team redesign of Odd Bunch's ecommerce and subscription experience, validated and corrected by usability testing.
Odd Bunch rescues imperfect produce, but managing the box meant crossing six disconnected pages.
A produce subscription is a standing relationship, and yet every screen still behaved like a one-time checkout.
Odd Bunch rescues produce that would otherwise be thrown away for looking wrong: the carrot with two legs, the apple with a blemish, the crate of tomatoes a grocer will not shelve. It sells that produce as a weekly box, delivered to your door on a subscription a household keeps for months. That relationship lives in the account.
The account scattered it instead of holding it together, and that made the old experience frustrating to use. Everything a subscriber needed to do sat somewhere different. Account settings on one page, past orders on another, the subscription itself on a third, rewards on a fourth. The weekly harvest, the actual food arriving on Monday and the whole reason anyone signs up, was buried under all of it. Someone who wanted to skip a week, swap an item, or just see what was coming had to know which of six pages held the answer. Most did not.
The weekly harvest, the reason anyone subscribes, sat buried under the pages built to manage it.
A Nielsen-heuristics pass turned a vague sense of clunk into four failures any of us could point at.
Before we drew anything, the three of us audited the live site against Nielsen's heuristics, so the problem would read as evidence rather than opinion. Four failures came back consistently.
Nothing on the page told you where you were: no active-page marker, no breadcrumb, no system status (visibility of system status). The product pages never answered the questions a first-time buyer actually asks, which is how many items are in this box, what size household is it for, and what is in it this week (match between the system and the real world). Cards and buttons were styled differently from one account page to the next, so the interface felt like several sites wearing one logo (consistency and standards). And there was no cart and no profile icon anywhere, so you had to remember where things were instead of recognizing them on screen (recognition rather than recall).
Put together, the audit reframed the brief. Decoration would not fix any of it. The real task was to shorten the distance between wanting a box and getting one, then between having a box and managing it. We wrote the driving question on the wall: how might we make subscribing to Odd Bunch feel as simple as opening your front door.
account settings
past orders
subscription
rewards
weekly harvest
profile
dashboard
Three of us designed it, and I contributed most to the flow, the hi-fi, and the deck.
The user flow I proposed set the foundation the team wireframed on; the audit, testing, and presenting were shared, and the animations were Sean and Yuki's.
This was a three-person studio project at Emily Carr, with Sean Courtney, Yuki Shi, and me. I want the credit conservative, because most of the parts were genuinely shared.
The one part I led on my own was the proposed user flow and the information architecture, built in our team Figma file. That flow laid the foundation the three of us then built our lo-fi wireframes on. From there the work was shared: the heuristic audit was a joint pass, and each of us wireframed that flow on our own before we merged the strongest parts of all three into one component system. I produced most of the high-fidelity screens, and I built the presentation deck and shaped how it flowed, though we presented it together. We moderated the usability testing as a team, and Sean and Yuki built the prototype animations and interactions in Figma. The lo-fi system shown here is my own version, the one we carried forward because it was the most complete of the three.
We reshaped the journey around browsing first and committing later.
Serviceability check up front, account creation deferred, and one dashboard for the box you already get.
The through-line of the redesign was a change of order: browse and build a box first, commit later. Two bets sat underneath it, one about conversion and one about retention. Neither is proven yet.
The conversion bet was to strip commitment out of the top of the funnel. The old flow put account creation almost immediately after “Get Started,” before a visitor had seen a single box. We moved a postal code and serviceability check to the front, so the site's first act is to confirm it can deliver to you, and deferred account creation until after the box was built. The hypothesis is that fewer people abandon when they can see the product before being asked to register. If this were live, I would watch drop-off at the account-creation step and compare it against the old sign-up-first flow.
-
start browsingno account yet
-
postal code checkserviceability, automatic
-
browse boxes and juices
-
build a box
-
deferred account creationregister once the box exists
-
manage the boxskip, pause, swap, or cancel
-
skip · pause · swapcancel
The retention bet was to make staying easy. On the old site, the subscriber-facing verbs were mostly variations on cancel. We surfaced skip, pause, and swap as first-class actions on the box itself, so taking a week off no longer means threatening to leave. A subscriber who can skip a busy week keeps the subscription that a hard cancel would have ended, and the measure, if this were live, is the ratio of skips and pauses to outright cancellations over a billing cycle.
Both bets depended on collapsing the six account pages into one dashboard. This week's harvest, the next delivery, skip and swap, billing, all of it now lives on a single screen a subscriber lands on after signing in. One screen holds the whole relationship, where the old site scattered it across six.
Three independent wireframes became one shared component system.
Cards and one adaptive product template are reused across both catalogues, so the path to a box stays short.
Working from the flow I had laid out, each of us wireframed it end to end, so we had three complete designs to choose from. Rather than pick one and discard the other two, we pulled the strongest screen or pattern from each into a single shared component system. My own lo-fi was the most thorough of the three, a set of components numbered C01 through C27, so it became the base we merged into.
The system was built to be reused. The same product card and filter bar serve both the produce catalogue and the juice catalogue, and the product page is one template that adapts to the product type rather than a bespoke page per box.
The lo-fi carried annotations, named components, and red-line specs: the shape work takes when someone else has to pick it up. It scaled cleanly into the high-fidelity prototype, 32 components across more than 80 variants, where I built most of the screens and Sean and Yuki built the animations. A validated set of reusable, documented patterns gives a UI designer and an engineer something to build from, and it feeds a shared design system the same way.
Then we tested it, and the same problems surfaced in every session.
Three moderated sessions, two of them cold, and the basics people reached for were not on the screen.
We tested the high-fidelity prototype with three people, one at a time, in moderated think-aloud sessions. Three is a small number by design. Lightweight formative testing this early is meant to surface the problems that block most people, and by the third session the same issues were repeating, which is the sign the sample has done its job.
Two participants met the design cold, and their sessions converged.
They could not find the basics. No cart icon, no profile icon, and no clear way back to the dashboard. Ash, hunting for the account area, said plainly, “I'm not sure how I would get to my profile,” and asked for a visible cart “just so I know I'm not accidentally adding additional things.”
“Get Started” set the wrong expectation. Natasha read it as permission to look around, and instead it asked her to register. “Getting started, to me, meant reviewing options first,” she said, “and then choosing. But that is a little too soon for me. Like I'm not ready to sign up just yet.” She had never seen our brief, and she made the case for browsing before committing in a single sentence.
The status gap we had flagged in the audit showed up in use. Natasha kept asking which page she was on.
The third session was with our instructor, Shiwon Jang, and I count it as expert design critique rather than a naive-user test. Shiwon caught a first-run problem the others had accepted without noticing, a brand-new account greeted with “welcome back.” “This says welcome back. It's my first time,” she said. “We should have separate pages for a brand new account.” That session also reopened a decision we thought was closed.
| problem | Ash cold | Natasha cold | Shiwon expert critique |
|---|---|---|---|
| no cart or profile icon, no way back to the dashboard | surfaced | surfaced | not observed |
| “Get Started” read as browse or as sign up | not observed | surfaced | not observed |
| no active-page or system-status indicator | not observed | surfaced | not observed |
| wrong first-run state, “welcome back” on a brand-new account | not observed | not observed | surfaced |
The test we trusted most disagreed with a decision we had been sure of.
Account creation was locked behind placing an order, and the friction of that rule outweighed the margin it protected.
The decision was account gating. We had settled on a rule early: you could not create an account until you had placed an order. It matched how Odd Bunch itself handles new accounts, and it felt sound. Then the testing kept catching people on it, and Shiwon pushed on why the rule existed at all.
The reason turned out to be commercial, and worth taking seriously. First-order promotions are tied to email accounts, so letting anyone register freely opens the door to one person farming discounts across a dozen throwaway addresses. On a Shopify-backed store, account tiers and that kind of guardrail are entangled. That is a genuine constraint. It protects margin that matters.
The question was whether the guardrail justified its cost at the top of the funnel. Forcing sign-up before a visitor can even build a box is exactly the friction the browse-first flow was trying to remove. My argument, and the direction we took, was to defer sign-up and capture intent instead: let someone build a box and open an account without ordering, then recover the ones who drift off with an abandoned-cart nudge. The promo abuse can be handled closer to the discount, by address or payment, without walling off the account.
That choice creates work rather than removing it. Deferring sign-up means the dashboard has to handle a subscriber with an account and no subscription yet, an empty state the order-first rule had quietly let us skip. We took that cost on purpose, because the lower-friction flow was worth it.
The redesign collapsed six pages into one, and testing handed us a ranked list of what to fix next.
This is validated direction and an evidence-ranked backlog; shipped impact is a claim I have not earned.
The redesign settled something real. Six scattered pages collapsed into one dashboard. Skip, pause, and swap moved out of a cancel-shaped account area and onto the box itself. One component system now covers both catalogues, so the product holds together as it grows. That is the validated direction, and testing sharpened it into a ranked list of what to build next.
At the top: the cart and checkout, and the empty states, which the prototype never actually contained. Then the recognition fixes the cold sessions demanded, meaning cart and profile icons and an active-page indicator. Then the reordering Shiwon argued for, leading the navigation with produce boxes because that is the product, ahead of the weekly harvest. Below that, two things testers asked for unprompted: letting people choose their own delivery day, which Natasha wanted out loud, and making substitution inline in the weekly harvest instead of a separate detour.
I am not going to attach numbers to any of this. It was an academic project with no live traffic, so there is no conversion or retention figure to report, and inventing one would defeat the point of the study. The work produced an interface that testing made easier to move through, and a backlog ranked by evidence. If the top fixes shipped, the two I would measure first are funnel drop-off at the account step and the ratio of skips to cancellations.
We designed before we grounded, and the prototype's shape hid what the product actually needs.
A blueprint belonged before the wireframes, and the redesign should have started on the small screen.
Two of the things I would change are about sequence. We designed before we grounded. A light service blueprint and a bit of market research should have come before the wireframes, and if they had, the account-gating assumption would have surfaced as a question in week one, well before the testing room. We also tested a prototype that was intentionally incomplete: the cart and a few links were never built, so some of what we found was the prototype talking rather than the design. Next time I stub those flows before a session, so the findings stay clean.
The larger gap is platform. We built desktop-first, and Odd Bunch is a mobile-first product; most of its real traffic is on a phone. I would invert the order and design the small screen first. And the pass we never reached is the one the role turns on: accessibility designed in from the first screen, and instrumentation on the funnel so a future version could measure these bets directly.