Seattle-based clothing company Yesler was preparing for the launch of a new technical hoodie to go up against premium brands like Arcteryx and Patagonia, but their brand and website didn't match the quality of the product. I designed and developed a landing page for Yesler that would convince customers to pre-order the hoodie and would be linked to from Yesler's Kickstarter page for customer's that wanted to learn more about the product. The result was a whopping 30% of people who visited the landing page pre-ordered the hoodie, and the Kickstarter exceeded its fundraising goal by 400%.
I was responsible for the art direction, icon and illustration design, and designing and developing the landing page.
SETTING AN art direction
Because of the brands that Yesler was competing against, it was absolutely critical that their branding and design put them in the same tier as those companies. A large part of that was the feelings that the imagery and colors of the site would evoke. Yesler was committed to doing extensive product shots, and looked to me to guide them in establishing what the art direction of the shots would be. I spent time collecting images and assets, which we used as placeholders in early versions of the page, to help the team at Yesler understand what the brand shots should look and feel like.
CREATING A COHESIVE SET OF ASSETS
I also helped Yesler create a set of assets that could be used not only on the landing page, but across other mediums as well, such as marketing materials and the Kickstarter campaign. This included things like the anatomy diagram below, product comparison charts, icons, and fabric illustrations.
Like the product shots that I had helped direct earlier, these assets helped set the tone for the landing page and for the brand in general.
A GRID TO SHOW OFF BEAUTIFUL PRODUCT IMAGERY
With all of the product images shot based on the style I recommended, it was important that the page actually show them in an elegant, visual way. I designed the page based on a grid that allowed images to fill slots of varying sizes. This allowed for a lot of visual variety throughout the page, while also maintaining an element of consistency. It also meant that it was easy to slip text and data in amongst the images without detracting from the visual appeal.
PULLING IT ALL TOGETHER
With a beautiful set of product images, a matching set of assets, and an idea of how to lay everything out, all that was left was actually designing and developing the page. The full page is viewable here, but you can see a preview of it below. After working closely with the Yesler team to perfect the design of the page, I also built a responsive version of the page in HTML/CSS/JS . The result was that a whopping 30% of unique visitors to the page pre-ordered the hoodie.
— THAW —
"The landing page that Cooper designed converted at 30% and helped us exceed our Kickstarter fundraising goal by 400%. His knowledge and insight as we worked together to build the page was invaluable."
- Vincent Chu, founder of Yesler Apparel