Reimagining the shop experience for a sustainable meat delivery service

skip to prototype

Reimagining the shopping experience for a sustainable meat delivery service 🍗

Project Overview
As a UX/UI Summer Design Intern for NIKU Farms, I helped re-design and ship new checkout flows that increased conversion rates by 200%.
Duration
May - Oct. 2020
6 months
Role
UX/UI Designer
Team
Michael E. (Dev)
Myles B. (Dev)
Toolkit
Figma
Project Overview
As a Summer Product Design Intern for NIKU Farms, I helped re-design and ship new checkout flows that increased conversion rates by 200%.
Duration
May - Oct. 2020
(6 months)
Role
Product Designer

Team
Design: Kelly Chong
Development: Michael Engerer, Myles Bennett
Toolkit
Figma
Adobe Illustrator
01. CONTEXT

NIKU Farms delivers 100% pasture-raised meats to customers across Ontario 🌾

Most meat in commercial grocery stores come from a broken system that negatively impacts farmers, animals, and the environment. NIKU Farms was built to bring farming back to sustainable basics - they partner with local Ontario farms to deliver pasture-raised, grass-fed, non-GMO and antibiotic-free meats to their customers.
Customers order online → Farms pack orders → NIKU delivers

COVID-19 birthed a surge in online delivery needs, demanding new UX solutions 💡

When the pandemic hit, many consumers sought online alternatives for their typical routines. NIKU's delivery service thus led to a boom in sales, but with it came an increase of customer frustration over the shop experience - customer complaint tickets and calls were so severe that the company phone number was even removed from the website to prevent an excess amount of calls.

NIKU was ill-prepared for the sudden influx of new customers. It was clear that patchwork UX solutions previously tolerated in its initial product experience could not adequately scale, and there needed to be change.
02. PROBLEM STATEMENT
How can we transform the shop experience to make it easier for customers to order?
Before
After
03. user research

The voices of both first-time customers and existing members needed to be heard.

Once a customer purchases from NIKU, they become a member as part of their subscription-based model. Thus, although I was primarily concerned with re-designing the shop for the first-time customer, I also had to keep in mind how the experience would differ in the shop page for existing members. I interviewed 7 members of the target audience and 10 existing customers to uncover these issues.
Interview Takeaways
Group 1: First-timers
Onboarding should be seamless
Since there are so many constraints I would prefer if I could be onboarded with more guidance and a step-by-step experience.
Needs breakdown of box value
How much meat is in one box? How many servings are there, how long will it last, how many meals am I getting?
Lack of information
Why can I only buy from one farm?
I didn't realize this was by subscription. What if I don't want to subscribe?
Group 2: Existing members
Visually exhausting
I can't even zoom into these images and they're super hard to read.
I get that the plus/minuses are supposed to make things quick, but they just make things harder for my brain to process.
Needs more control
I think a cart feature would be cool so I can easily change product quantities and remove items.
On the screen to review my order, everything is unchangeable. I would like a spot to see everything while being able to make changes.
User Personas

Usability Audit

After conducting a personal site audit, I noticed 3 key issues:
Poor mobile experience
  • Confusing for users to checkout due to URL redirects
  • Small target areas
  • Difficult to compare products quickly
Inaccessible visual design
  • Some products had images, others did not
  • Product information was displayed as text inside images; tiny & blurry
  • Plus and minus buttons for adding products cluttered the page, causing overstimulation
Lack of information
  • Unclear that a user can only purchase from 1 farm upfront
  • Product value proposition not being effectively marketed
  • Lack of substantial differentiation of subscription plans

Setting goals: The redesign must be...

Accessible
  • Clear information hierarchy
  • Responsive on all devices, especially mobile and tablet
  • Visual aid alongside text
  • Larger target areas
Reassuring
  • Include a breakdown of value
  • Back and forward actions comply with user expectations and native device behaviours
  • Easy to spot common actions like inputting promo code
A frictionless, seamless experience
  • Clear and concise language
  • Product details are clear
  • Guiding language, popups, and simple steps
With these goals in mind, I set out to start designing 🚩.
"The easier it is to understand — the faster the buy-in.”
~ A reminder I constantly told myself throughout the process.
05. TEST. ITERATE. REPEAT.
Running 2 rounds of testing with both user-segments
After creating the wireframes for the mobile view of the website I ran two rounds of testing: one with new users, and one with existing customers. Each round of iteration got us closer to a design ready for launch, tackling the goals we set out to achieve.
The result? There was a universally positive reaction towards the new designs:
"Love the new images, it's way clearer what each cut of meat actually is!"
"The page is a lot cleaner than what it was before, intuitive for me to place an order."
"I like the herbs and olive oils, makes the meat feel more earthy and true to its value"
In September 2020, my team launched the new redesigns, however experienced minimal growth in conversions after testing for a month. Needing to revisit the drawing board, I brainstormed with my team and made tweaks to produce the iteration currently in place on the website today.
06. final solution
How might we make the shop experience easier for customers to checkout?
Creating a custom checkout flow
NIKU originally relied on a 3rd-party modal to carry out checkout processes, which led to users dropping off on mobile due to a forced URL-redirect, as well as users clicking "back" on desktop but accidentally exiting the flow. By designing and shipping our own customer checkout flow, we could mitigate these issues and simultaneously make the design language in the shop experience consistent.

Designing a frictionless, step-by-step shop experience for customers.

In the design that got shipped, I added a cart feature that didn't exist before, displaying it alongside the products so customers could easily see what they're adding. Additionally, numbers were added to each header and subsequent sections were hidden until the user finished the task of the previous step in order to guide the user in the process. Lastly, more details were communicated in the subscription plans to answer some of the frequently asked questions users would have previously about their subscription box (portion size, meat weight).
Revised user flow
07. learnings, impact, & future
Overall, the redesign increased conversion rates by 200%, increasing same-day conversions as well as monthly sales.

What I learned

Test often, and test early
  • You are not your user is a phrase that constantly rang in my head during this project; taking a step back from my designs and getting feedback from actual members of our target demographic yielded more insights than I could've discovered alone
Speak the same language with your developers
  • It was my first time working with developers on a team, so I had to very quickly learn how to communicate feedback in a way that made sense to my developers during handoff and QA - without any extra design jargon
Data is king
  • Gathering accurate data from users were crucial in justifying design decisions and implementing flows
  • Accessing secondary research sources like online articles save a lot of time in the design process rather than conducting new research yourself

Future

  • Working on onboarding popups originally envisioned
  • Continuously iterating and finding ways to improve CRO of the flow
  • Navigating the challenge of purchasing from multiple farms