Arthur and I worked with Josh and Aria from Dropout Companies to create a website for their frozen peanut butter and jelly sandwich venture, JAMS. The purpose of the website was to showcase why JAMS is the healthier and better option compared to its competitors, as well as to lead users to buying the sandwiches from Walmart.

JAMS set out the break the stale and unhealthy market of frozen PB&J snacks by offering a healthier alternative that played on nostalgic memories of simpler times - PB&J just the way you remember it as a kid, without the nasties.

Prior to starting on the JAMS website designs, we had several strategy sessions to better understand the Ideal Customer Profiles (ICPs) for the brand. We were briefed that the look and feel of the site should aim for Neo-nostalgia. We provided style references during the discovery phase and nailed down our direction.

Through different calls to action on the site, we were able to massively grow JAMS' Klaviyo lists for rebound marketing via email and SMS.

Creating an access point for brand ambassadors and UGC creators to get in touch with JAMS for marketing drives.

Building a product review system for the JAMS product display pages and boosting conversions as a result.

Taking some inspiration from our client's previous design rounds, we set out in a new direction based on the two types of sandwiches that JAMS is selling in Walmart - Strawberry and Berry. These became the themes for the site, which the user could switch between, similar to a light/dark mode on a website.

The use of gradients throughout the site was important to its look and feel. The same color palette that we used can also be found in the JAMS product packaging, and by bringing the packages' aesthetics across to the site's design, we were able to make them feel connected.

The website is vibrant, nostalgic and true to JAMS' brand identity. We were able to execute this whilst keeping the the user experience clean and straightforward - something that is always important if just about anyone is going to enter the website to learn more about the product and convert. The layouts are clear and so is the delivery of copy.

Background elements of the fruits and shapes bring delight to the site's visitors, keeping everything on brand and non-invasive to the experience.

The team at JAMS wanted to bring their Jammy product mascot to life. What started out as a 2D sketch was then transformed into a 3D character in Blender. The intention was to be able to quickly create new poses and renders of Jammy to be used across promotional and marketing material across all mediums.

Sculpting the character to feel 2.5D and building the character rig was a challenge that we solved by using rig shape keys. Once completed, we turned our attention to the product photography which was re-done in Blender using physically accurate lighting rigs to give a true-to-life studio photography feel to the products. This saved the JAMS team from needing to run lengthy and expensive product photoshoots.

As always, we try to keep lighting simple and realistic, following the principle of key lights, fill lights and smart uses of reflectors to smooth out moody shadows and make everything uplifting.

The website was developed in Webflow. With Webflow, you're working with real HTML, CSS and JS on a visual interface, and that's why we love it. If you wanted to, you could even export your Webflow site and host it anywhere you please.

You're able to work with frameworks and create your own systems, which make it a breeze to continue expanding the website.

For JAMS, we developed it in Webflow using the Lumos framework by Timothy Ricks. This framework suits our needs best, and is our absolute favorite. The Lumos framework ensures a performant, scalable build with a large focus on user accessibility and overall web development best practices - perfect for enterprise businesses.

When the client contracted us to create additional pages for the JAMS website, because we worked to a system from the start, we were able to continue growing the site with ease.

Something that we are proud of as well, is that the the site is entirely breakpointless. By utilizing autofit and autofill grids, flex divs set to wrap, fluid sizing for fonts and spacings as well as CSS container queries - we didn't have to create new styles in Webflow below the standard desktop breakpoint! For site performance, this is excellent.

The theme switcher was achieved by first creating a variable folder in Webflow with all of the different colors and their direct opposites. We then created classes that toggle between both modes. In our case, the theme switcher which follows the user as they scroll, adds and removes these classes on each page's body. Using sessionStorage, the user's preferred theme for browsing the site is memorized throughout their session on the site.

When switching between themes, we had to also switch out images (of Jammy, the JAMS mascot and other 3D image elements) for a cohesive site experience. I will share one of the CSS snippets below, so that you can see how we did it.

Depending on the body's combo class - which determines the theme on the overall site, in this case .u-brand-1 or .u-brand-2, either of the .promote_img classes are shown.

The background fruit renders are all part of one component, and so are all of the background pill-shaped images. The client is able to determine which instance should be dynamic depending on the site's theme, and have full control over each of their rotations and scale for differentiation. Components and properties are superpowers for creating systems and scalability. Clients can use them with ease as well.

We wanted to give a special mention to Javin Towers, who is an automations expert. Rather than using Zapier to setup posting form submissions to different Klaviyo lists, or embeds, we were able to use Javin's incredible Webflow to Klaviyo solution which made the entire process such a breeze.

We'd love to chat about your project. We work with brands who care about achieving real results.

Feel free to write to us via Contra or book a call.