As a Summer Product Design Intern for NIKU Farms, I helped re-design and ship new checkout flows that increased conversion rates by 200%.
May - Oct. 2020
(6 months)
Product Designer
Design: Kelly Chong
Development: Michael Engerer, Myles Bennett
Figma
Adobe Illustrator
Customers order online → Farms pack orders → NIKU delivers
The existing UI vs. my final re-design
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.
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.
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).
After conducting a personal site audit, I noticed 3 key issues:
Before beginning explorations, I wanted to make sure each design decision tied back to a user pain point. The redesign needed to be:
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
Icon illustrations drawn by me
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.
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.
Pictured:
(Left) Screenshot of a virtual team call: holiday edition.
(Right) An illustration I made for the team as a parting gift; a bittersweet moment!
