When you think of camouflage, you think of Realtree. With the company’s newest pattern set for a late 2017 release, Realtree reached out to our team to help them create a website that would showcase the launch of Realtree Edge™. As one of the most advanced patterns in the market, the camouflage disrupts the human form while including realistic natural elements that ensure concealment.
Our team started with wireframing and design forecasting to ensure that our work would be able to evolve over time as the client’s needs changed. With three distinct design needs - the coming soon page, microsite, and editorial integration - we made sure our wireframes were based on a foundation that would allow us to add future components in a seamless way.
It was important to highlight the Realtree Edge™ pattern while keeping a consistent style with the rest of the company’s campaigns. Our team collaborated heavily with Realtree to include the pattern along with key elements from the brand’s print and web collateral.
An essential component for the website was effectiveness photos of the new pattern in the field. We wanted to immerse site visitors in the scenes of a hunt; utilizing full-spread photos with hunters dressed down in Realtree Edge™ allowed us to convey the unique properties of the camo with captions to highlight each feature.
Before our work on the main site had begun, it was important for our client to have a coming soon countdown page to hype up the new pattern before its official launch on Christmas Day. Our team designed a landing page using visual elements that would be present in the final build while including a countdown timer and email form input to funnel visitors into Realtree’s Mailchimp account.
A big benefit of the site, edge.realtree.com, being up before the main site launched was our ability to get the new subdomain indexed by search engines before the big reveal in December. A common issue with new site development is the time it takes before a website is indexed by Google and other search engines; even though the coming soon page had very little content, it enabled the final build to get an early start towards indexing.
With the coming soon page launched, our focus returned to the microsite. Since the site was initially limited to one main page and several product pages, it was imperative that we used what little real estate we had to tell the narrative of the new camouflage pattern in a way that felt both expansive and informational.
With Realtree’s incredible collection of product photos, it was a no-brainer that users were greeted with large photo spreads and sliders. Content that explained the different elements of the pattern were incorporated through a combination of modals and sliders, allowing visitors to quickly browse through the most important features of Realtree Edge™.
Our team used the Hugo framework to develop the Edge site, mainly due to its ease in development via partials and its quickload capabilities. Since there was a possibility that the site would undergo a change in the future, we found that the partial-based method made the most sense since it allowed for easier restructuring in the event of an addition.
Parallax effects were added to give the site a sense of depth to echo layered qualities within the pattern itself. Regardless of device or screen size, users were treated to moving and overlapping elements that gave the site a constant state of motion, which helped to engage users.
Realtree’s marketing campaign for the new Edge pattern incorporated editorial pieces featuring hunters from around the nation. Each story included a documentary-style video, a plethora of in-field photography, as well as longform content to accompany the visuals.
Because these stories would be crafted every month, it was important that the microsite had a way for the Realtree team to create content without the use of a developer. Our final phase for this project integrated Netlify’s CMS to edge.realtree.com, which allowed the Realtree team to create responsive, photo-heavy layouts through custom content components that our team created.
We’re super proud of the work our two teams did to bring this project to life. View our work and check out the latest products, videos, and stories from Realtree Edge at edge.realtree.com.