Portfolio Loading
Hello World

Pip and Nut

Pip & Nut is an all-natural nut butter brand aiming to disrupt the perception that healthy food is bland. They needed a website that reflected this mission and provided customers with an easy-to-use e-commerce store to purchase and subscribe to their products.

Responsibilities

  • UI & UX Design
  • Prototyping
  • Animation

Industry

  • Ecommerce
  • Shopify

Date

Live site

Cover image for Pip & Nut Shopify website design project

Objectives

My primary objective for this project was to combine the company's friendly and playful brand with the principles of a conversion-focused e-commerce website. I aimed to create a fun and engaging website highlighting the products and converting visitors into loyal customers.

Design of the Pip & Nut homepage on mobile
Logo design for Pip & Nut by B&B Studio Branding and packaging design for Pip & Nut by B&B Studio

Approach

For this project, I aimed to showcase the client's nut butter product range and its unique benefits. I made the products stand out visually by utilizing the brand's typography and color scheme. To further enhance the user experience, I incorporated various subtle interactive elements, hover effects, and animations that can be seen throughout the site. The end result was a website that was not only visually appealing but also engaging for users.

Priorities

The product pages were the top priority for this project, and I aimed to make it easy for customers to navigate through the wide range of nut butter products and complete their purchases. I prioritized designing an easy-to-use navigation system and product filtering options to achieve this. To convert users, I focused on creating detailed product pages that highlight each product's benefits and nutritional values. In addition, the product pages include clear and prominent UI elements such as price, various selection options, and call-to-action buttons, making it easy for users to complete their purchases or subscribe to the products.

Product page design for Pip & Nut on mobile

Details

To bring Pip & Nut's fun and playful branding to life, we collaborated with them and their branding agency, B&B Studio. With their help, we created fun nut-men mascots, which I animated and incorporated throughout the website as incidental elements. In addition, various subtle interactive features, such as button, link, and thumbnail hover effects, were prototyped and designed by me to make the site more engaging and user-friendly.

Photo of the Pip & Nut jar by B&B Studio showing the branding and design

Results

Since launching this new website, Pip & Nut has achieved impressive results, with monthly revenues increasing from zero to £50k within 12 months of embarking on this Shopify site. The conversion rate also increased significantly, from 1.5% to 4.9%. Additionally, they built a loyal customer base, with over 1000 active subscription customers.

Design of the Pip & Nut responsible business section on mobile