OceanSpray
- Food+Beverage
Oceanspray.com — Curating fresh ways to discover the berry, the brand, and the people behind both.
View live siteCHALLENGE
Ocean Spray is synonymous with cranberry juice. But so much of their flavor comes from the stories behind the drink — their co-op structure, generations of family farmers, and of course, the benefits of the mighty cranberry.
When fans have an appetite to experience the brand beyond the product, how can Ocean Spray take them behind the scenes?
APPROACH
We curated stories to turn their website into a powerful tool for education and discovery — a place for consumers to connect with the purpose that echoes throughout the entire brand.
Every creative concept and strategic recommendation was guided by Ocean Spray’s distinct "uncommon” mentality. We knew traditional product information was necessary, but it deserved a playful twist. Think recipe remixes alongside classics, or cranberry trivia sprinkled in with nutritional details.
And the new digital hub was always about pushing beyond product. We emphasized Ocean Spray’s true strengths: the farmer-owners and the cran fandom that drives them. While the homepage celebrates the versatile cranberry, dedicated farmer pages showcase the stories, expertise, and history of the humans behind the brand.
The BASIC team truly feels like an extension of our team and we couldn’t ask for more in an agency partner, so again, THANK YOU!
Uncovering an uncommon passion.
People already know Ocean Spray. We needed to shed light on their purpose to drive exploration and inspiration. In this sense, the site became our springboard — all driven by an uncommon love of the mighty cranberry.
Creating a modular playground of possibilities.
We built a flexible system that lets teams create pages on the fly — 50/50 layouts, hero banners, and carousels that can easily be stacked and rearranged. We also locked in color combinations, visual treatments, and padding for each module to ensure a unified system within the CMS.
A template toolbox for simple content creation.
Templates weren't just about making the migration smoother; they were also key to creating a user-friendly and consistent experience across the site. We designed templates for key page types — category landing pages, product details, recipes, and even farmer profiles. This streamlined the content creation process and ensured a cohesive look and feel, even when we added modules or played with colors in hero banners.
Ensuring inclusivity.
Our design decisions followed strict color guidelines for text, elements, and backgrounds, preserving strong contrast for users with visual impairments. We also maintained consistent visual states and animations across desktop and mobile versions, while leveraging mobile-specific information architecture to avoid overwhelming interfaces. This approach created a cohesive and accessible experience on every platform.
Dynamic filters for a dash of personalization.
A massive array of products and recipe ideas made it crucial to give users a powerful filtering system. We designed filters to adapt to the specific needs of each category and allow for regular updates. This dynamic approach supported various modules and pages across the site, including search, product category pages, the Recipe Ideas section, and the "Find Your Taste" module.
Bringing a wild brand to life online.
With a CPG brand built for print, the challenge was translating its essence into a vibrant digital space. We embraced a playful and textured approach, using bold typography, layering, and custom illustrations. This visual language brought the cranberry to life, from the juicy fruit itself to the beautiful bogs where it thrives.
The result is a website that feels both familiar and fresh, capturing the unique spirit of Ocean Spray in a way that resonates with a digital audience.
BECOME MORE THAN just a PRODUCT.
New visitors and longtime fans craved more than typical product info. So we cooked up a list of occasions that call for recipes, a tool for discovering those recipes, and some quirky flavor profiles. All while emphasizing the history and health benefits of the cranberry.
In doing so, we repositioned the berry as an everyday essential rather than an occasional ingredient.
Creating a recipe for sales.
As the largest, most visited section of the site, we wanted to make recipes easy to categorize, adjustable based on dietary preferences, and ultimately, shoppable so you can start cooking. To drive exploration, we also created a landing page, opening up space for exciting storytelling around the products.
THE POWER OF BRAND STORYTELLING.
Oceanspray.com shows the transformative power of storytelling in the digital space. By connecting on an emotional level and spotlighting a brand's core values, we can create a loyal, engaged community — empowering consumers to become their very own champions of the brand.
Crafting a conversation about cranberries.
Ocean Spray has a knack for inviting consumers into their brand. We aimed to break the fourth wall, directly addressing users and fostering a sense of connection. Conversational language and humor invited visitors to the conversation to explore the world of cranberries, and consistent CTA language provided clear guidance from page to page.
Stacked with customer experiences.
We leveraged the latest tech stack development tools for a variety of reasons: SEO optimization, improved site performance, and robust search functionality across products, recipes, and other content. We also used Contentful to maintain flexible content management and seamless integration with the frontend. To enhance the user experience, we implemented a dynamic filtering system that adapts to each category, allowing users to easily find relevant recipes based on their preferences.
The Outcome: A dynamic digital hub
The redesigned website is a living, breathing platform that caters to diverse user needs. A flexible, modular design allows for continuous content updates and fresh recipe ideas, while a focus on accessibility welcomes everyone into the world of the cran.
Lessons Learned: The power of brand storytelling
Oceanspray.com shows the transformative power of storytelling in the digital space. By connecting on an emotional level and spotlighting a brand's core values, we can create a loyal, engaged community — empowering consumers to become their very own champions of the brand.
ThePrisoner
- Food+Beverage
- ConsumerCulture
ThePrisoner
- Food+Beverage
- ConsumerCulture