• Schoolyard

  • *

  • Snacks

  • Schoolyard

  • *

  • Snacks

  • Schoolyard

  • *

  • Snacks

From zero to hero on a short timeline, streamlining both frontend and back.

From zero to hero on a short timeline, streamlining both frontend and back.

Project

Details

A data-first approach to UX design creates a higher converting PDP that still aligns with the branding and shopping experience The Cereal School (Schoolyard Snacks) wants to deliver. Migration to Shopify Plus increased the site’s ease of management and provided a solid foundation for the company’s growth.

Year

2019

Timeline

6 Weeks

Service

Digital
Digital

Challenge

The founders of The Cereal School had a revolutionary idea: produce a delicious cereal that brings out customers’ nostalgia for Saturday morning cartoons with a sugary bowl of cereal, minus the sugar. Industry experts they approached thought their dream was unrealistic, but in their kitchen, the founders were able to create a low carb, high protein cereal with no sugar (ever). Old school cereal made the new way. The Cereal School had two flavors sold direct to consumer (D2C) through their website, but with the rate they were growing and the third flavor they were adding to their line up, they decided to call in outside help to make their website reach its conversion potential, both for desktop and mobile. Gamma Waves was called in to help The Cereal School revamp its product detail page (PDP). They have a single PDP, which is unique. Instead of a standard product catalog, they set-up a one-page shop all option. One page for all of their cereal flavors and bundles.

Goal

Modernize the PDP, add a new flavor, implement bundling and make the page more mobile-friendly – all without dropping the already high existing conversion rate in the transition.

Result

In a six-week time frame, Gamma Waves was able to migrate the site to Shopify Plus, redesign the PDP page, add the new flavor, add the option to bundle, remove dropdowns, and increase the mobile-friendliness of the site overall. Gamma Waves and The Cereal School teams recognized that a single page for purchasing was more conducive to mobile purchases when drop-down menus were eliminated. The drop-down menus on the PDP were replaced with swatches for flavor selection and flavor mix. The swatches were also a great solution for bundling products on the same page as the products themselves, a unique set up that was not available by default. Currently, there are no robust options for easily displaying product bundles on a single page within Shopify, but The Cereal School and Gamma Waves showed that the unique, single page shopping option contributes to a more efficient conversion funnel with fewer steps and less friction. On the operator side, the page layout also allowed The Cereal School to have all of the bundles displayed on the PDP page directly and avoid some of the traditional hassles of dealing with independent products or “dummy” bundles. The solution used for The Cereal School is a strong option for D2C companies who want to provide product bundle options on a single PDP or otherwise. In order to make the page even more user-friendly, Gamma Waves' developers helped Cereal School move away from their page builder app to native inline use of metafields. This shift helped improve page load speeds and allow for easier and better image rendering. This strategy also made it so site operators don’t have to toggle between a webpage admin and an app to build the page.

schoolyard snacks website on desktop monitor screen
schoolyard snacks website on desktop monitor screen
schoolyard snacks website on desktop monitor screen
schoolyard snacks website on desktop monitor screen
schoolyard snacks website on phone screen
schoolyard snacks website on phone screen
schoolyard snacks website on phone screen
schoolyard snacks website on phone screen
schoolyard snacks website on two phone screens
schoolyard snacks website on two phone screens
schoolyard snacks website on two phone screens
schoolyard snacks website on two phone screens