A healthy and sweet frozen treat 🍭

Background

Swirleez is a family owned and operated frozen yogurt shop, located in the centre of downtown Barrie, Ontario. They've built a strong reputation for their vast array of treats, ranging from frozen yogurt, to crepes, to their signature S'wafflez, and everything in between. Creating unique experiences is at the core of the Swirleez brand. Every year they have come out with one stellar new treat after another.

Project

The chance to work with Swirleez was an opportunity that I could not give up. I loved the idea of working with them so much so that I actually approached them, with a very simple strategy: create a fully custom WordPress website for Swirleez so that they have a website unique to them. I wanted the site to be fun and exciting, something special and unlike any other site a user has seen before.

A Physics Engine

When a user scrolls through the Swirleez website, they will quickly notice that the foam-like circles on the page are interacting with the user. Based on the velocity the user scrolls through the page, the circles will move accordingly. To take this even further, each circle is aware of all the other circles, which allows for tracking of collisions. This effect creates a buttery-smooth animation, and makes it quite addicting to just scroll up and down and watch the circles interact.

The Products Front and Centre

Each menu item has a lot of ingredients and price points, but what sells a product is how it looks. Customers need to see the food to get that itch, that craving, that desire to go and get one. I decided to make a separate page for each menu category. Below you can see an example of one menu page, where you are greeted with a gorgeous oversized photo of the product to really wet your appetite.

For a smooth user experience that makes navigating this site a breeze, each category provides quick links to the next and previous cateogires.

All facets of this site were custom built for a smooth user experience, and cohesive design. You'll see below the navigation maintains the design language created, and animates open with a circle.

Results

Fun, Visual Experience

When a user goes to the site, they quickly see the visual effects in action, and most importantly with no performance downfalls. All code has been optimized for buttery smooth animations, even on mobile devices. If you're curious, I did this by making it so there are actually only ever two rows of bubbles, which move throughout the page to follow the user. This creates the illusion that there are bubbles after every section, when in reality it's just the two!

A Modern Website

Swirleez now has a modern website, on a platform that is scalable. They are able to easily add new features, including the ability to sell products through Shopify. The website is now fun, inviting and perfectly matches their brand colours and fonts.