Ollie is a US-based premium pet health brand, which delivers fresh, baked, and other healthy food products. All of Ollie's food products are from recipes developed in-house, specifically for dogs, with the same USDA standards as food for humans. Ollie works as a health-conscious subscription service, delivering the best selection of ingredients and nutrition to your four-legged friend, alongside benefits such as vet-tech access.

James DiGioia (Front End Tech Lead at Ollie Pets) and Joshua Cotton (VP of Engineering at Ollie Pets) leads Ollie’s Engineering & Development team of seven. They are responsible for Ollie Pet’s front-end engineering, with five US-based engineers and two South America-based engineers.

The Project

In an attempt to future-proof their tech stack in 2019, Ollie was looking for a new way developers could formally make changes to save time, be more efficient, and provide more unique user experiences. Any of their landing pages that they previously needed were hand-built/custom-built. Therefore, a lot of time was devoted to building and assembling these in a unified manner. Ollie also faced the challenge of requiring a developer's time for every change to be made.

The Origin Story & Challenges

In trying to make the most of their components, James sought to find a way to make them more reusable. The component design was rethought in order to address the problem of frontend code being intertwined with other parts of their application. This was where Ollie found Storyblok of interest for its native nature of being component-first through atomic design.

Ollie previously utilized a tightly-built and highly customized Django backend application. With the implementation of Storyblok, Ollie introduced a React build with the inclusion of Next.js to keep their frontend more application-driven while their backend is more API-driven. Part of their move in terms of the architecture (from their frontend perspective) was to be more API-integrated. This triggered the search for a CMS that could handle their tightly-knit coupling pain points to a solution that decoupled their front and backend entirely for more freedom and independence.

Why Storyblok: Choosing a CMS made for both developers and marketers

In relation to their old software, James & Joshua ran into many issues. Storyblok looked very attractive compared to the previous development-heavy implementation they had prior. This became a challenge that built up over years of usage on their previous setup until 2020 when a new CMS solution was needed. This long-overdue change to Storyblok was prompted to begin in October 2020.

The engineering team wanted to give their marketing team much more flexibility and independence to efficiently edit, manage, and orchestrate their content on Ollie’s sites. In order to move quickly within their investigation of a new CMS, they decided to research the CMS landscape through online review sites, internal developer Slack groups, and what analysts were saying, such as with Forrester. This investigation considered support levels, vendor communication, target audiences, product capabilities, real-life examples, and case studies. This then became a list of around 20 CMSs that the team at Ollie further dug into before shortlisting to four vendors that matched their working style and aspirations. Within the four shortlisted vendors, the main selling points to Ollie were transparent pricing, product flexibility, customizability of components, and the amount of technical, engineering, and support resources available to their team.

Ultimately, it was Storyblok’s Visual Editor and how they could build reusable components that sold it to Ollie.

  • Storyblok and its Visual Editor matched exactly what we were looking for and wanted to build going into the future

    James DiGioia

    Front End Tech Lead at Ollie
    James DiGioia

More specifically, Joshua Cotton, Ollie’s VP of Engineering, presented the brand’s main requirements that they ultimately found within Storyblok as:

  • The need for a cloud-native solution

  • A WYSIWYG editor with functionality and usability within the interface

  • The ability to easily write, build and manage reusable components according to how the development team wants them to be built

  • Transparent pricing that matched Ollie’s rate of growth

  • A solution that was development-focused with a technical presence, and could provide documentation and support to their engineering team

Ollie’s marketing team also needed to have a say in the decision-making process when choosing a CMS solution. Bringing forth collaboration between Ollie’s development and marketing teams, the marketing team ultimately needed to build out the brand's various landing pages and homepages. After reducing to just four CMS vendors, Joshua handed it over to James and the marketing team to further investigate to see what their top choice was and why. James gave the marketing team a Storyblok space to try out building landing pages and campaigns and see if it fit their processes.

To jumpstart the process, Ollie began by rebranding their homepage. Ollie used the redesign of their homepage in tandem with Storyblok. Storyblok was able to help with the integration of translation layers and, by decoupling the frontend and the backend, they were able to pass through another component layer that would render it compatible.

Screenshot of Ollie’s website in March 2020

Screenshot of Ollie’s website in March 2020

Creating a site for man’s best friend

Today, Ollie's website utilizes Storyblok's APIs, and includes an onboarding flow for users to sign up to Ollie. Ollie is also looking forward to managing all their image assets through the Storyblok CMS and performing A/B tests with their onboarding funnel to optimize conversion.

Ollie's front-end architecture is based around Storyblok. Behind the Storyblok front-end layer is an ‘Ollie API’ layer, which makes calls to BigCommerce and their own database, and returns the data to the frontend.

Apart from Ollie's marketing and engineering team, the product team also works inside Storyblok. As Ollie continues to scale, and throughout their own internal recruitment of expansion, the product team’s main goal is to ‘own’ the CMS and related processes, ensuring that product and engineering collaborate on component design, with an eye toward flexibility and user experience.

With the help of Ollie's designers and marketing team, James was able to break down the design of the rebranded homepage. They were able to figure out how sections could be reused, and clearly restructure their components and schemas through atomic design. They would then test the pages and functionality before pushing them out live.

In all, Ollie’s ‘three-step’ component building process to going live can be seen as:

  1. A request from marketing for a component piece to be built, while going through design and product to manage the process with marketing

  2. Once the design is ready, the component is built-in ‘Storybook’ with code and design reviews before the schema is built inside the CMS itself

  3. The CMS schema is then implemented through a middle layer into the component, along with documentation on how to use the component

Bringing together engineering & marketing toward Ollie’s growth

With the goal of making Ollie's site more user-friendly with better usability and functionality, the marketing team knew that several changes needed to be made. In the past, there would have needed to be heavy tech or developer involvement. For example, marketing worked with other partner vendors through dedicated landing pages that would send traffic to a partner site and be content-catered while marketing to that specific user. Ollie could now rely on their business users (marketing team) to make changes, rather than those with only coding knowledge. By empowering the marketers with this tool, more consistent changes were made to keep the brand on point.

  • We were able to see a greatly increased software change velocity across the engineering, marketing, product, and design teams

    Joshua Cotton

    VP of Engineering at Ollie
    Joshua Cotton
Ollie’s rebranded website at present

Ollie’s rebranded website at present

Storyblok was able to increase Ollie’s product change and tech velocity, which aided them in A/B testing. For example, James built a custom A/B testing component that the marketing team could use to show different pages based on the number of visits, user location, whether the user was a return or new customers, and more. This could be done by building two similar landing pages with relatively different content such as headlines, images, and then A/B test on the advertisement level, such as to Facebook, to see which pages best perform and convert to their customers.

There is a true velocity increase in the gain of marketing independence. The team can build campaigns and landing pages without tech involvement, enabling the development and engineering team to focus on developing new components, A/B tests, and optimizing their integration, such as their onboarding flow.

Key Takeaways

Storyblok is excited to grow with Ollie as they continuously look into new ways to innovate and disrupt the pet food and health industry in the United States. Because of Ollie's changes, they were able to rebrand in a timely fashion, restructure their components, and bring true collaboration into their workflow amongst different teams in parallel with their rebranding. Perhaps, Storyblok is the headless CMS for man’s best friend.