Other Work

09 / CLOSING REMARKS

After my summer internship, I continued working part-time while in school.

I lead design for all of our products: the shop flow, corporate website, and customer portal. Overall, I absolutely loved my experience at NIKU—it was a ton of fun! Although I left the team in February 2020 to focus on school, I'm forever grateful for the people I met and this opportunity for giving me my start in UX and product.

OPTIMIST On a mission to BRING BACK PLAY into software, design, daily life, and the world.

It is

10:05 AM

FOR KELLY

(c) 2024 Kelly Chong

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)

Type

Internship (Product Design, User Research, Usability Testing, Prototyping)

Team

Kelly Chong (Designer)

Michael Engerer, Myles Bennett (Development)

Jake Goldberg (Co-Founder)

Toolkit

Figma

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

Ordering a subscription box was tedious.

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 - difficulties ordering, questions about products, and website bugs. In fact, 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 a change was necessary.

02 / SCOPING

The biggest priority was transforming the shopping experience.

How can we make it easier for customers to build and purchase their box?

Before / After

Find out how this design came to life

03 / USER RESEARCH

Two sets of customers: first-timers and existing members

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 people within our target market and 10 existing customers to uncover these issues. On average, most of NIKU's customers are older women, ranging from 30-55+ years old.

3A / INTERVIEW TAKEAWAYS

New customers needed more context and guidance.

For people who have never purchased a box from NIKU, 5/7 interviewees commented on the confusion they had with information presented (or lack thereof) in the shop flow. It was unclear what products they were actually buying in a box subscription, what picking a farm meant, and how certain constraints were explained i.e. having to spend a minimum $ amount in order to checkout. A more step-by-step experience was desired.

Existing members needed more control and flexibility.

Repeat purchasers of NIKU boxes already know the drill. They know what goes in a box, and how to pick items for them. However, what they expressed was a desire for granular control, such as the ability to easily edit items they've selected (product quantities, removals/substitutions).

3A / THE CURRENT SHOP EXPERIENCE

It is difficult to make an informed purchase decision.

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

Exhausting 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 clarity

  • 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

3C / GOALS

Make it clear, reassuring, and accessible to purchase a subscription box.

Before beginning explorations, I wanted to make sure each design decision tied back to a user pain point. The redesign needed to be:

Clear

  • Use plain language over jargon

  • Product details are clear in both content and visual presentation

  • Easy to spot common actions like inputting promo code

Reassuring

  • Allow for flexibility of mistakes

  • Include a breakdown of product value

  • Guiding language, popups, and simple steps

Accessible

  • Defined information hierarchy

  • Responsive on all devices, especially mobile and tablet

  • Any visual aids are paired with text

  • Larger tap targets

01 / PROBLEM IDENTIFICATION & RESEARCH

How might we make 'building a box' simple?

With my early sketches, some problem areas I sought to tackle included (1) improving farm navigation, (2) implementing a shopping cart, and (3) adding a quick view to afford larger images.

Previously, there wasn't a 'shopping cart' feature for users to view items selected at a glance. Images were also very small and hard to read, and it was easy to miss the farm navigation as found in initial user tests of the existing UI.

05 / VALIDATION

Running two 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.

Findings

Box breakdown was still confusing

Originally, subscription plans were broken down and communicated by portion size and delivery frequency. However, feedback suggested portion size was unhelpful due to having no reference of how much food that actually is.

Cart feature had low visibility, confused for a chatbot

In the designs being tested, I had added a shopping bag icon in the bottom right corner to act as a user's shopping cart, as NIKU previously did not have one. This icon was perceived as a chatbot, and thus when I asked users to 'view their cart' they were hesitant to click it or ignored it altogether.

Difficult to navigate through flow

When discussing with engineering, customers who used the native back button on their respective devices while in the middle of the checkout flow would be taken back to the landing page rather than the previous step due to various web app constraints. As such, I needed to adjust for this in my designs and implement prominent navigation controls (back and next) that were easy to select on any device.

We then launched the new designs, but something was off.

After iterating on the designs based on feedback, in September 2020, my team launched the new redesigns. However, we experienced minimal growth in conversions after testing for a month, despite positive qualitative reactions from customers. To investigate why, I brainstormed and revisited the drawing board with my team. We wondered how conversions might be affected if customers paid first, and built their box after. I then iterated the designs based on that concept and we shipped another version that is currently live today.

06 / SOLUTION

Making it frictionless to get your pasture-raised meat delivered.

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.

Guiding customers through the shop, step by step

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).

Pay first, build later

After the September brainstorming, the new idea we came up with and shipped was allowing customers to select their box only after they have paid. What we found was that 'building a box' was the most tedious step in the shop flow for people, and caused fatigue before they could even reach checkout. By emphasizing checking out first, customers have less pressure to finalize what they want in their box right away. Of course, to supplement this we also created a separate products page on our website so that customers could still browse the selection for the week without paying.

07 / STYLE GUIDE

Evolving our visual design to be playful, clean, and trustworthy

Prior to launch, myself and a co-worker in marketing had proposed and finalized an updated refresh of NIKU's brand to align closer to their values of clean living.

08 / RESULTS, LEARNINGS, & FUTURE

Conversion rates increased by 200%

In October, the 'Pay first, build later' designs were shipped and A/B tested with the previous launch in order to control for variables when testing conversion rates. We saw a 200% increase in conversions for monthly sales, and 10% increase across same-day conversions.

What I learned

Test often, and test early

  • I didn't need a 'perfect' prototype in order to test my ideas, people were more than happy to comment on any small thing I had

  • You are not your user is a phrase I had to train myself to remember throughout testing

  • 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

  • Oftentimes, I found it was faster to just hop on a call or record a Loom video/take screenshots to get my point across

Microcopy matters

  • Much of the solution revolved around providing the right context to customers, which required clear language

  • I didn't realize how much time I had to spend focusing on solely copy, and that it was just as significant as the actual UI

  • I also learned to pay attention to areas where microcopy may be needed for additional context, or edited for clarity

Reimagining the shop experience for a sustainable meat delivery service