Reducing Food Waste Should Not Be a Waste of Time:

A Challenge to Improve the UX of Imperfect Produce’s Shopping Flow

Jemma Pearce
Jul 21, 2017 · 10 min read

Note: I am not affiliated with Imperfect Produce, this is a concept UX project.

Background

The Imperfect Produce delivery service offers a 30 to 50% discount on fruits and veggies that fail grocery store standards and so would, sadly, have gone to waste. Customers subscribe to a pre-made produce box and receive notice of a 2-day window in which to customize items in the box.

Problem

I used this service regularly and felt very confused and disappointed when trying to figure out how to customize my box. Friends who use the service have similar complaints about this lengthy and painful process, one even stopped using it due to frustration.

Screenshots of Current Flow

Complications

Being a hypothetical project, there were some complications to deal with:

  • No access to information about business needs
  • No quantitative data on their users
  • No knowledge about the technical feasibility of building this feature

These limitations beg the question:

How might this problem be solved with limited access to information?

  • Make assumptions about business needs and technical capability
  • Apply a design-thinking, problem-solving process
  • Understand the problem space by doing research, explore solutions space with prototypes, testing and iterating​​

Understanding the Problem Space

Analysis of Reviews

Analyzing reviews of the company led to insights from a broad range of users. These reviews confirm the assumption that the customize flow has poor usability, that the time-window is confusing and illustrates the lack of transparency around billing.

“Website is terrible — hard to navigate and it hasn’t even worked for me on a few occasions . The period in which to custom one’s order is screwy — I don’t understand when I can edit my order — it always seems like I’ve passed the date” — Carly W.

“The quality of the website is very, very bad. Ordering your box and customizing it is a very painful process and has resulted in making mistakes when I think I am cancelling or adding an item.” — Paige S.

“Website is difficult to navigate with hidden charges” — Aditee K.

Competitive Analysis

A SWOT analysis of the customize flows of Farm Fresh to You, GrubMarket and Farm House Foods gave initial insight and was essential for planning interviews and usability testing.

Competitors’ Research: User Interviews and Usability Testing

3 users were interviewed and observed using Farm Fresh to You, GrubMarket and Farm House Foods ordering systems.

Farm Fresh to You

Takeaways

  • Having a single page with all products and a running list of the order made the experience easier to understand, took much less time and was less stressful, some users thought that this page looked like typical shopping page
  • 2 users were drawn to the “Info” button and were influenced to add items based on the story
  • Pricing was not immediately transparent and some users felt mistrustful of the company
Farm Fresh to You

GrubMarket

Takeaways

  • Discounted pricing was exciting and users understood the price breakdown
  • Photography was enticing
  • Users thought the site looked commercial and didn’t trust where the produce was coming from
  • Users found the checkout process familiar and had no problems checking out
GrubMarket

Farm House Foods

Takeaways

  • The credit system was confusing
  • Categories were easy to navigate
  • Users didn’t know what was in their cart
  • Users felt unexcited by the UI design but happy to support local
Farm House Foods

Imperfect Produce Research: User Interviews and Usability Testing

3 regular users and 3 potential users were interviewed and observed. The regulars were asked why they use the service and what the like and dislike about it while the potential users were asked about their current produce buying habits. Each group walked through the customize flow, talking out loud. At the end of the flow they were asked what changes would improve their experience.

“There are too many clicks here, why am I not there already?” — Eric D.

“Did that go through? Did my price change at all? I’m not sure…should I click customize again to check? I hope I didn’t waste my time with all that ordering.” — Eric D.

“How do I customize now? I have no idea, it doesn’t appear that it can change. Where’s the button?” — Camille B.

“This is so time consuming. I hate having to type in zero” — Michael T.

“I think it would be better to have buttons instead of having to type it in. It would also be nice if there were columns of pictures so I didn’t have to scroll so much” — Alex R.

“I’m scared to go back because I’m worried that I might reset my box and lose my changes” — Alex R.

“The second save changes button is really confusing. I thought I already saved everything. I would have hoped that it saved the first time but now I don’t know. This is the most confused I’ve been in this whole process.” — Andy X.

Journey Mapping

Creating user journey maps synthesized the interviews and testing to identify common pain points, happy moments and opportunities.

Key Research Insights

Imperfect Produce users:

  • Concept is key. Regular customers keep coming back because they believe they are doing good by buying food that would have been wasted. First timers are excited by the proposition to do good and save money.
  • Customizing is important and most customers would not use the service without this feature. Some complained of forgetting to customize and then wasting some of the random assortment of produce that IP sent.
  • Customize flow is very confusing and lengthy, especially for first time users.
  • When asked what they would change, most users wished for less clicks to get to the customize window, less scrolling, no manual input, more information about the produce and a clear confirmation page at the end of the flow.

Competitor’s users:

  • Users felt comfortable with more typical shopping layouts.
  • The ethical values of the company were make-or-break.
  • Transparent pricing created trust.

Exploring Solutions

​Guided by the insights from research a new flow was created. The user was now taken directly to the task of choosing produce, eliminating the redundant account summary and order summary pages. The login page was also removed after talking to an engineer who verified that a user would be allowed access their account via email authentication.

Redesigning the Flow

Paper Prototypes

Making paper prototypes enabled rapid testing of different hypotheses.

Prototype 1: multiple page vs. single page

Can screens be eliminated to get the user straight to the task of customizing?

Prototype 2: pricing

Will transparent pricing establish trust? Will order totals be increased by showing discounts?

Prototype 3: story

How valuable is the story? Can it be hidden in a modal instead of displayed in info section?

Prototype 4: empty box

Is is better to have an empty box as a starting point or do users value the default filled box?

(Open question: what impact does this have on the business?)

Key Insights

  • Pattern was familiar and intuitive
  • Users valued seeing more products per page
  • “Submit changes” wording created unnecessary thought
  • 2nd submit button is not useful — 100% of users used bottom button.
  • Smaller image in “Your Box” may not be necessary
  • Discounts were very important, slashed prices proved to be more effective than % off
  • Seeing discounts made some users want to tell their friends
  • Users enjoyed the “More Info” feature, location was especially important
  • Users questioned how much waste produce was out there and how much they were helping the farmer
  • Users were largely unresponsive to the “Empty Box” feature

Solution

Style Guide

A style guide enabled continuity while designing the hi-fi’s. The UI was modeled from the current visual brand language of the company as this project is focused on improving a task, rather than a site-wide redesign.

Hi-fi Mockups

A hi-fi prototype was created using the key insights from testing paper prototypes.

Email Notification

The email is the primary call-to-action and needed to be more enticing. A catchy subject line, a photo of a produce box and some work on the hierarchy placed importance on the cut off time. This created a sense of urgency, evoking emotion and altering the emotional state of the user. The button wording was changed after a/b testing against “Customize my box” which proved to be confusing to first time users. “Choose” evokes a feeling of being at a market or grocery store and hand-picking produce.

Email Notification

Customize Page

The customize page was modeled on a typical shopping pattern that made the task easier with less scrolling, less clicking and more items per page. Ease of use helps the business by allowing users to order more, less painfully. Larger images bring more attention to the produce. Slashed grocery store prices highlight savings. “Add” and “Delete” buttons alleviate the effort of manual input. The call-to-action button is placed at the top of the page so that the “Your Box” section can continue to grow downwards as users added items — eliminating the need to scroll down to find the button. The wording was changed to “Pay x-amount” to provide clarity.

Customize Page

More Info

A “More Info” pop-up on each item adds value by creating a richer story and rekindles the value proposition of being connected to one’s food. The user can still see why the produce is imperfect. The story is enhanced with information about the farm and a map showing the farm location. This was designed in a single column layout with future mobile-responsive design in mind.

More Info Modal

Confirmation

A confirmation page instills trust that the task is complete and that the order is on its way. The “Give $10, Get $10” marketing opportunity addresses the essential business need of new customer acquisition. The “Savings” feature reconnects the user to the company’s core value proposition of saving money while combatting food waste and then prompts them to contribute by word-of-mouth marketing. The summary of the order gives the user confidence of completion and an opportunity to receive email/print receipt. The “Edit this order” button is nested at the bottom of the page as this is not the primary call to action.

Confirmation

Clickable Prototype

See the flow in action by using the clickable prototype.

Prototype

Next Steps​

There are still some challenges to work out. The wording in the email could be further tested. The “More Info” could be further developed by adding data about the exact amount of wasted produce left per item, creating a sense of urgency and driving the moral duty of consumers. Best case would be to test the design in the real world and get quantitative data to gauge to the efficacy of the project and the long term effects on the business.


Update 08/01/2017

Exciting news — Imperfect Produce has recently implemented a redesign which has confirmed many of my ideas! Below are screenshots of the new flow in comparison to my conceptual design.

Account Page

The account page has been reorganized. This was not a feature that I chose to redesign but it certainly looks and functions much better now, with a clearer CTA. More real estate was given to referrals, which was a key part of my confirmation page.

Imperfect Product Account Page

Customize Page

Similar to my design:

  • item and box layout
  • add and subtract buttons
  • delete item function

Different from my design:

  • fewer items per page
  • category tabs
Comparison of Customize Page

Cart Section

The new cart section is similar to my design. The new “About this Price” pop up is a nice touch which validates the insight from my research that customers desire completely transparent pricing. I believe that the ability to fine-tune the desired quantity of each item within the cart is still desired. I now recognize that my design does not communicate the important fact that the count per item is measured in pounds.

Cart Comparison

Savings Impact

This new feature illustrates my intention to connect customers to the story that initially sold them on this idea. My design included savings per pound of produce and savings off grocery store prices. The new design features gallons of water saved and pounds of Co2 out of the air which aim to further validate the story, keeping customers motivated to continue their subscription.

Savings Impact Comparison

Room for Improvement

While the new customize flow is much better from a usability standpoint, I still feel strongly that a confirmation page/pop up would be very effective in giving customers confidence that the task is completed. Clicking the “Save” button still takes the customer right back to the account page without any sign of change.

​Having higher quality, standardized images of the produce would also be a major improvement that I hope to see in the future.

You can find more samples of my work here: www.jemmapearcedesign.com

)

Jemma Pearce

Written by

Hi there 👋🏻 I’m a product designer based in San Francisco. Currently designing a tool for recruiters and hiring managers at Good&Co.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade