The Johnson Outdoors family
Johnson Outdoors, parent company for several outdoor gear brands, approached us with the unique problem of re-designing and re-platforming eight of their websites. For this to happen, we needed to understand where there were opportunities to align across their brands, as well as space to craft unique stories for each. Our ultimate goal was to create unique e-commerce experiences for all eight brands, using reusable components to drive a +30% increase in sales. SCUPAPRO, was a top priority among the eight.
The challenge
Considerations
My team at Digitas spent time with all eight brands to analyze patterns and key differences in needs and beliefs throughout the existing e-commerce experiences. This resulted in 115 requirements gathered, and 80% overlap between the brands. This created the challenge to achieve a balance of consistency and brand distinction. To add to the challenge, each of the eight websites were to be completed within 30 days.
Before I started working with the Johnson Outdoors account Jetboil.com and eurekacamping.com were already designed and being developed. This was very helpful as there were a number of templates we were able to work with for the next 6 websites that I did in collaboration with the lead designer on the account.
Solution
Our team developed a system of components with set rules that could be adapted across the different sites, maintaining their functionality while enabling the flexibility to brand them uniquely to tell different stories. This components-based system was the best solution in order to design all eight sites within our tight timeline and budget.
Library of CMS components in Axshare.
Process
This was the first time I worked with such a complex library of components. I realized it was a digital modular puzzle. Step one was to determine where to plug in the modules, after which we used a style guide and iterated different looks to tell the brand's story. The third step was to regularly collaborate with our tech team to ensure the build would be feasible, and true to the design.
Example of the same component used in two different ways:
Left: As Pathing tiles linking to Activity based pages for shopping.
Right: As Blog List tiles linking to blog Articles. Articles with designated banner image also have a thumbnail image as opposed to articles without designated banner image which have more of a typographic treatment on the tile.
The SCUBAPRO look
Upon project kickoff we were provided with a vast library of amazing underwater photography. With that in hand we made the decision to balance the imagery with simple, slick design. Our dominant colors were blue and different tones of grays with glimpses of orange used specifically for calls to action. The goal was to allow for the photography to be the hero taking the user on a diving experience throughout the site.
Designing on an 8px baseline grid with 12 columns provided the flexibility needed to create responsive components for mobile and tablet screens. It also made it easier to create text styles that would fit harmoniously within the grid.
Collaborating with the dev team
Zeplin
One of the tools I love to use for collaboration is Zeplin. It allows me to quickly upload our designs from Sketch and annotate with specifications on functionalities or interactions. I also include the links to our Sketch files and prototypes, which reduces the amount of back-and-forth conversations with the dev team. Especially for me being remote. Zeplin also allows me to tag our screens. In the example below I tagged our screen as "Homepage" and also as "Desktop". It just makes the screen search process much simpler.
Zeplin screenshot with an example of the annotations we make.
Principle & After Effects
We always make sure to create prototypes so that our dev team has a clear understanding of what we're envisioning in terms of motion. It's a critical part of the process as I think that motion plays a big role in how a person experiences a website or app. One of my favorite things to do 🤓
Component N009 - Pathing tile hover state
Component C014 - Full bleed video play button interaction
Learnings
SCUBAPRO was one of the first few sites completed among the eight total. We thought it would be easier and fastest to deliver the screens with their respective components plugged in. This made it difficult to find the different instances of a same component across all the screens and sizes, ensuring there was consistency in their functionalities and features. We concluded that creating a component design guide where we could have all components isolated and side-by-side with all the different variations would have made things much easier. We took these learnings and applied them to the next site we made for Old Town Kayaks.
150 screens were produced by 2 designers in 30 days for scubapro.com 😱