Fresh digital customer experience for FMCG brand

Supporting positive disruption for B Corp fruit and veg subscription box provider, Pikt

B Corp fruit and veg box delivery service, Pikt, wanted to work with an agency who could actively suggest ways to improve their site and keep it performing at its best.

Pikt wanted their existing WooCommerce site to adapt with their growing business. We onboarded their existing site and supported them with monthly design and development work through our Always Evolving model.

What the client wanted

About Pikt

Pikt is an organic fresh produce brand that is proudly independent, family-owned and customer-led.

Selling organic fruits and vegetables, Pikt is a positive disruptor that is committed to doing right for everyone – their team, farmers and growers, and customers.

The team at Pikt are true specialists in what they do and their methods are governed by B-Corporation and Soil Association certifications.

Taking on an existing WooCommerce store

Our first challenge was re-platforming this WooCommerce store away from a basic third-party theme that couldn’t deliver our planned work.

We replaced this with a flexible yet robust framework built in-house by Atomic Smash called Snap, which is easy to extend and customise over time, for an online store that can keep growing and evolving.

UX & UI design updates for modern look and feel

The site that was inherited needed to be freshened up, making the look and feel more modern and pleasant to browse, engage with and buy from.

Re-thinking the customer experience

In parallel with UX work, we looked closely at customer convenience, streamlining the customer journey, and improving customer communications. Our solutions reduced pressure on Pikt’s order management team, with automations and improvements for digital CX.

Opportunities for up-selling

We also introduced new ways to position products in front of customers, such as a customer-to-customer referral scheme and a side cart connected to their basket that shows suggested products they might like.

Integrating Atomic Smash’s framework

Getting Pikt’s existing site running on our framework enabled us to save time rolling out components like carousels and the navigation menu and speeding up deployments.

We were also able to introduce new features to the site such as search functionality and various new content blocks including more engaging call-to-action blocks.

Using the framework, these could be more rapidly integrated rather than built from scratch. This saved on production time so the client could invest their resources into bespoke features and functionality, creating greater value for Pikt.

Homepage redesign

Early in our collaboration, we redesigned the homepage for Pikt with a new header, visual ‘how it works’ process to communicate information easily, and hover-over animations making the site feel more interactive and engaging.

Our work also included:

• Better utilisation of branding and typography
• Visual distinguish between product categories
• Consistent layouts for product cards to reduce visual clutter, eliminate unnecessary cognitive load, and improve cohesion. For instance by standardising button heights and alignments
• Clearly present Pikt’s key USPs and values in a way that connects with, and demonstrates benefits to, consumers
• Identifying areas to signpost to elsewhere on the site, ensuring the homepage is effective for customers who are limited on time or attention
• Better use of CTAs, best-selling boxes and promotions

New navigation bar

The navigation bar is a flexible space for communicating information to customers. It can include an order window countdown, delivery standards, seasonal announcements and promotions.

We were tasked to re-think this section so it could become more aesthetic and engaging, while also displaying key information to customers quickly:

1. Order time – clearly demonstrating how soon the customer should complete a purchase in order to receive the order by a specified date
2. Delivery cost – explanation outlining delivery cost boundaries so customers will know if their purchases will be delivered free of charge or subject to shipping costs
3. Service interruptions – a notice about seasonal delivery dates to set customer expectations, particularly important for a business selling fresh produce
4. Banner – a site-wide banner that can be seen on each page (unless closed by the customer) and a space for the client to share for key information like offers, promotions or important notices, as relevant

Refreshed design for product pages

We refreshed Pikt’s key WooCommerce product page through our monthly Always Evolving design and development work.

The goal was to create a better experience for customers who were selecting fresh, organic fruit and veg produce for their Homey Box.

Here are a few examples from the wide range of UX and UI design improvements:

1. Showing customers the live stock status through a countdown timer that starts when the customer loads page
2. Sticky box summary sticky that ‘follows’ the user as they scroll down the page.
3. Tweaked design to highlight the cart button
4. Products organised into categories
5. Including more product information such as country of origin
6. Responding to user feedback after go-live and revising UX for the add-to-cart and quantity functionality, with a particular focus on improvements for customers using mobile devices

Using the Homey box page template as a base, we then rolled out a set/seasonable-box template with a small amount of design effort and development time to account for any content or functionality that is unique to those boxes.

Site-wide design improvements

We made improvements to the user interface design and rolled out site-wide tweaks such as an updated typography. We also introduced a new footer with:

• Mailing list CTA so customers have an option to sign up on every page
• Logo section to display the Pikt company values and green credentials
• Tweaks including brush-stroke graphics to make the footer section visually interesting and more consistent with the style used across the site

Updates for product bundles

Product bundles were freshened up to make them more visually appealing and convenient for potential customers.

Key information about the product was presented on the card so customers wouldn’t have to search for this on a separate page, and we also made it easier for customers to add product bundles to their carts.

The product bundle cards include:

• Price and description
• A list of the items included within each product with the country of origin
• “Best seller” and “subscription available” badges for the client to toggle on/off for relevant bundles
• Button to add the bundle straight to your cart instead of having to click through to a separate page

We also improved order flexibility by enabling products to be added through coupon codes.

Streamlining the customer journey

Tasked with reducing the pressure on Pikt’s order management team, we worked on streamlining communication throughout the customer journey.

This involved various automations and adjustments for an improved customer experience as well as more efficient processes within the business, such as:

1. Integration with a new CRM system
2. Import batches of bulk orders from CSV for ready-made boxes
3. Chatbot for immediate on-site customer communications
4. Custom functionality for Klaviyo integration to create personalised customer recommendations
5. New email confirmation template designed and pushed live, complete with order delivery codes included for customer convenience, plus editable CTAs for the client to adapt as needed
6. Cookies notice for compliance

Vital tech improvements

Diagnosis and fixes deployed to provide seamless and thorough communication between WooCommerce and third party order fulfilment software.

In addition, we carved out time for speed and performance improvements, reducing and replacing plugins, image optimisation, site updates and maintenance.