Responses by Aaron McGuire, designer and developer.

Background: My partner Christen Vidanovic and I just had started a boutique agency that wanted to serve clients whose moral compasses pointed in the same direction as us. We found our first client, and after passing back forth different ideas of creative ways of creating nontoxic packaging, we knew we found someone that we wanted to “lay our swords down to.” His name is Brandon Andrew, and he was just about to launch Calexo, a low-dose cannabis beverage that he designed after he was diagnosed with cancer and couldn’t drink anymore. He wanted to provide an alternative that could be much more of a controlled experience than what most cannabis companies offer—not sending people to “space” but merely taking an edge off without the negative aspects of drinking. So we helped him bring to life what he and his team are: creative individuals that enjoy perspective shifts.

We highlighted that in how we wrote about the product, all the way to animations that bring the idea of “perspective shifts” to life. Since this product is kind of a new thing—and there aren’t really any analogs to it—we knew we wanted to create a splash and garner as much attention as we can to introduce the world to a new concept with a fun design. We’re also entering into a time when there’s a lot of darkness and anxiety with current events, so we wanted to offer something light and bright.

Design core: We wanted to try to bring to life the idea that Calexo could “bring a smile to your mind,” so we communicated that by leaning heavily on animation. Also, we tried to be as clear and concise with the copy: we didn’t want to get too wordy when trying to share something that is new to our audience.

Favorite details: Personally, it’s that you can shake the bottle to generate more fizz.

Challenges: I used a library called ScrollMagic to control the animation sequences. While I’m very appreciative to the maker of the library and anyone else who contributed to it, there were so many mobile bugs and “gotchas” that it nearly made my face peel off—I’m glad to say it has only halfway peeled off. For next time, I'll be rolling my own or using fullPage.js.

Time constraints: Honestly, we (I) missed our deadline. I really wanted to make Calexo as good as it could be. We’re not only launching a new beverage to the market; we’re launching our services and abilities into the marketplace. I didn’t want to skimp on quality. However, I was at my best to be communicative with the Calexo team throughout the project and let them know where we were at; luckily, they were gracious with time and it all worked out.

New lessons: Trust in the areas in myself where I’ve invested lots of time.

Navigation structure: We have navigation as more a utility function for people that have already been to the site and mobile users, but my hopes are that we take visitors on a journey from top to the bottom of the site we made. My hope is that it’s fun and interesting enough to keep people engaged the whole way down!

Technology: For the front end, we’re using Svelte—which was perfect for me on this project. It allows for a similar code composition that you’d get from React without having to ever wrestle with React-specific rendering issues. GSAP 3 is amazing and so much easier to remember than its previous versions.  Also, a shout out to the maker of ScrollScene, which is layer on top of ScrollMagic that saved my ass a few times with its breakpoint feature for mobile!