Mobile-first Responsive Website Design for Orange County's

Power Crunch

Web Design which puts the FUN in Functional!

Rebuilding the Power Crunch online Experience

When Power Crunch first came to us, they were in the very early stages of a rebrand, which as you might guess, is not the ideal time to start a website redesign. Although that may make others shy away, the synergy with Power Crunch’s team was incredible right from the word go, and we were excited to get going!  


Problems with the current site

The old site had been built in a time before responsive design had found its groove. It had been patched to be viewable on mobile phones and tablets, and the experience was clunky at best. The site was essentially 2 sites smushed together, trying their hardest to look like one site. In South Africa, we call that “mutton dressed up as lamb” (if you want to get technical 😉
Wordpress ran the info pages, while Magento powered the e-commerce store. The navigation would change ever so slightly when you toggled between the two, and there was a lot of duplicate content with slight differences and conflicting messaging.
With that said, the biggest issue was not a functional one. Rather it was the fact that Power Crunch is a FUN brand, with deliciously vibrant flavors, happy employees and devoted fans across the country, and the website just did not feel like it reflected the brand, nor its culture. It was not doing the brand justice.

We set out to change that.


Adding Flavor to the website.

One thing we realized quite quickly, partly because Power Crunch generously kept our pantry full with bars 🙂 and also from seeing how much love they got, was that they have an amazing product!
We wanted to find a new way to communicate the flavor profiles, and we came up with a system for representing each product: We comped together approximately 10 images into a single luscious image with ingredient bursts surrounding the bars. We built these from our photo shoots, renders, and any stock shots we could pull from our library that worked. We then took that image, split it into 3 layers, and animated them on the site in a way that would make the flavors look like they were bursting out from behind the products.


Branding in concert with Web Design

As we worked through the full website design for Power Crunch, many of the stylistic decisions we made actually ended up informing the rebrand, rather than the other way round. Many typography elements, color cues, and other look and feel components made it into the final Power Crunch rebrand.
While our intention for Power Crunch was to build an experiential & modern website, we feel honored that our design work had the happy side effect of adding to their rebranding efforts.

Blending Fun with Function

When we sit back and reflect on what we set out to do with the website, our goal right from the start was to build a fun and modern website that was bright, colorful and highly engaging. The majority of engagement would be on Mobile devices, and so Power Crunch came to us wanting to make sure that we built the site with a mobile-first philosophy. This was just one of the many decisions that we were 100% aligned with them on. We worked on this project together with them, and it was a team effort every step of the way.
Looking at how everything turned out, we feel that we accomplished what we set out to: to blend FUN with function, and showcase the brand’s personality.
Power Crunch have been incredible to work with, every step of the way. As we embark on phase 2 of the website, we are excited to see just how far we can take the design!



You went way above and beyond – and we so appreciate your patience, your professionalism, your creativity, problem-solving… and just being so cool and calm throughout it all.

I look forward to working with you more,

You all ROCK!!!

– Jessica Kelly | Chief Marketing Officer