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