We’re excited to release a completely transformed online store for Pro4mance – a project that let us flex more of our skills than perhaps any other.
- UX Design
- Art Direction
- Project Management
- Ecommerce Strategy
- Brand Strategy
- Responsive Design
Head to a triathlon, marathon or even head to the hills amongst recreational cyclists and you’ll likely find someone rehydrating with a Pro4mance energy gel or drink bottle formulation.
As primarily a direct-to-consumer online brand, they had learnt a few things with their first online store and quickly worked out that few in their market knew what they were doing online. We sat down and drew-up a hit list of key functionality (wholesale ordering, affiliate programs, members-only content, etc.) and an analysis of the existing store and where it could be improved.
After a UX review it was decided. If we are going to do it, we’re going to do it properly.
New creative direction. A host of new photographic content. Basically – a brand refresh was in order if we were to make the most of the opportunity.
Pro4mance put a lot of faith in us as we controlled art direction, UX design, development and consulted with them on their brand and ecommerce strategy.
Who is this brand? Does it look like a premium product? Why should I pay $80 when there are cheap brands selling something that looks similar for $55?
These are the questions that the redesign needed to answer.
Quality ecommerce design increases desirability and differentiates.
It improves brand perception.
It increases the average purchase value and improves the conversion rate.
It helps you stand out in an ultra competitive market.
We made the home page adaptable to different moods to keep the site fresh and relevant to the season.
Every page on the site was designed according to the purpose of the page rather than to a generic page layout.
Nothing looks like an afterthought. That’s the difference between doing it properly and going for the cheaper option.
Before & After
We’ll leave you to decide which is which…
It’s the little things…
We didn’t just come up with a home page, shop page and product page design. Every part of the Pro4mance site is crafted to the purpose of the page.
Content areas are different in design and function to that of shopping pages.
Landing pages are specific to the call to action that we’re promoting.
The path to checkout uses principles of psychology to maximise conversion.
It all combines to an elegant user experience that has transformed the brand.
Build their email list
A strong and effective email list is the lifeblood of an efficient ecommerce business.
We created this lightbox pop-up to only appear on the ‘endurance lab’ – an area of the site reserved for great content including healthy recipes, nutritional advice and endurance sport nutrition plans.
Smart Cart Upsells
When we user hit the cart, depending on what they’ve ordered they’re shown one of three timely and relevant up-sell suggestions.
It means that the Pro4mance online store increases their average purchase volume, reduces their average shipping cost per item and has customers buying and using a wider range of their products.
#GelFace integrated Instagram campaign
Cyclists, marathon runners and endurance athletes are proud of what they do (and rightly so). They form a tight-knit community and Instagram is their main channel for sharing progress and passion.
Pro4mance energy gels make a great product to snap a selfie of, so we worked with Pro4mance to develop their #gelface competition campaign and create a landing page with a feed that they could moderate of people sharing their snaps.
Custom email template
The problem with cheap and themed online stores is that the key points of purchase feel robotic and templated. There’s no warmth. All of a sudden right as you’re making the sale the brand changes tone.
We’re big on the power of post-transaction communication. In the case of Pro4mance we created a unique email template for their receipts and made a system that sent out a series of automated foll0w-up emails with a mixture of content and re-purchasing reminders.
Upgraded affiliate program
Pro4mance had played around with an affiliate program for their 100+ team of athletes around Australia. The idea was simple – each would have a unique coupon code to hand out within their networks. The recipient gets a percentage off purchase and the prolete gets a percentage to spend on product for themselves.
In reality, the affiliate software that they were using wasn’t cutting it. We worked out where the barriers lay for both Pro4mance and their athletes in using it and migrated affiliates across to a new system that made it much easier to share and redeem affiliate purchases.
Our upgraded Pro4mance site includes robust wholesale purchasing. Pro4mance can set prices specific to particular wholesalers and product that only wholesalers see without having to duplicate websites and manage two sets of content.
They simply nominate accounts with wholesale access and decide whether to give them standard wholesale pricing, or something more unique.
Effortless, familiar and easy to shop – on any device
Like anything we do, the Pro4mance store is responsive and built for a world where you first click through, research and purchase on any device. There’s no clunkiness. It all just works effortlessly.
Most mobile sites lose impact, sacrificing photography and visual impact to fit it all onto the screen. We opted for the best of both worlds and brought the immersive imagery to the smaller screen without losing shop-ability.
Up until embarking on this website, Pro4mance had used a mix of stock photography and self-shot photos from marathons and competitive events.
We knew that good photography was essential to a great ecommerce experience so we challenged Pro4mance to trust us with creative direction and commissioning brand photography to make the most of their new store.
We used the new website as an opportunity to build a library of killer content for their online store, social marketing and print marketing. At times we played the roles of art directors, production managers and even transport, with Scott riding our photographer around on the back of his motorcycle.
The result was the exact photography that we knew would help to sell their products online and hundreds of stunning photos to propel the brand forward.
Your new online store project can become a transformative tool and be so much more than a pretty new look
When great design, strong content, a sound eCommerce strategy and a quality product come together, you can transform a business and leave the competition for dead.
At time of writing the new Pro4mance online store and ecommerce strategy has delivered an 17.5% increase in average sales value, reduced shipping costs and importantly allowed the growing brand to pre-sell their next product, paying for manufacturing costs before it even launches.
Premium pureplay products are suddenly available at mid-range prices – often with free shipping to sweeten the deal. It’s a compelling model but its easy to get lost. Pro4mance were a young brand with a great product but hadn’t yet developed the premium image and online shopping experience.
The Pro4mance project to me serves as the perfect example of what can be achieved when a growing business gets ecommerce and branding right. It’s not just a nice looking site. It’s a site that converts better, produces a better shopping experience and ultimately has propelled the brand to the next level.