Ollie's journey to rebrand and build a future-proof site

• Headquarters: New York, United States
• Technology Stack: React, Next.js

Ollie was looking to change the US pet food industry by providing fresh, human-grade ingredients. In addition to a rebranding, the team was also looking for a new way for developers to save time, be more efficient, and provide unique user experiences. They achieved this by restructuring their components and implementing workflows amongst different teams with Storyblok.

Section titled Ollie's requirements for rebranding Ollie's requirements for rebranding

Beforehand, Ollie used a tightly built and highly customized Django-based CMS application. However, they realized that the frontend code was closely tied with other application sections. This made it difficult to reuse most of their components.

Ollie knew they needed to make changes to optimize and streamline their content operations and processes. Specifically, they identified the following areas that needed improvement:

• A WYSIWYG editor that marketers could easily use without developer heavy-lifting and maintenance
• The ability to quickly write, build, and manage reusable components
• Transparent pricing that matched Ollie's rate of growth
• Comprehensive documentation and support for their development team
• A cloud-native and API-first solution

Section titled Solutions: Choosing a CMS made for both developers and marketers Solutions: Choosing a CMS made for both developers and marketers

Ollie chose Storyblok as their CMS for being component-based. With the implementation of Storyblok, Ollie introduced a React build with Next.js. This is to keep their frontend more application-driven while their backend is more API-driven. Storyblok was able to:

• Achieve independence for the marketing team to edit and manage content without developer intervention
• Bring seamless campaigns and new page creation with Storyblok's Visual Editor
• Enable the use of easily reusable components to stay on brand across the site
• Foster collaboration between Ollie's development and marketing teams
• Propel Ollie's product change and tech velocity, which aided them in A/B testing

Section titled Creating a site for man's best friend Creating a site for man's best friend

Ollie was able to kickstart their migration by coinciding with rebranding their homepage using Storyblok. Today, Ollie's website utilizes Storyblok's APIs to connect an onboarding flow on the website for users to sign up.

Behind the frontend layer, there is an 'Ollie API' layer. This communicates with BigCommerce and their database and returns the data to the frontend to Storyblok. With the help of Ollie's designers and marketing team, the development team broke down the design of the rebranded homepage. They figured out how sections could be reused and used atomic design to restructure their components and schemas. They would then test the pages and functionalities before pushing them out live.

Section titled Unifying teams for Ollie's growth - A/B testing and tech velocity Unifying teams for Ollie's growth - A/B testing and tech velocity

Intending to make Ollie's site more user-friendly, the marketing team knew several changes were needed. Previously, they were strongly dependent on developers. With the help of the Visual Editor, Ollie can now rely on their non-technical users to make changes independently. By empowering marketers, more consistent changes are made to keep the brand on point.

A custom A/B testing component was also created for the marketing team. Different pages are shown based on the number of visits, user location, whether the user was a return or new customer, and more. To determine which page converts customers best, Ollie creates two similar landing pages with different headlines, images, and content. These pages are A/B tested on Facebook.

Section titled Storyblok: A CMS for man's best friend Storyblok: A CMS for man's best friend

With Storyblok, Ollie's marketing team can build campaigns and pages without technical help. With more time, the development team can focus on designing new components, running A/B tests, and optimizing integrations. Because of these changes, Ollie could rebrand in a timely fashion. Perhaps, Storyblok is the headless CMS for man's best friend.