— Case Study: YETI COOLERS

ROLE

User Experience
Information Architecture
Content Strategy
Product Writing

ABOUT

Website redesign; e-commerce & content
Completed at Hard Candy Shell in 2015-2016 on a team of 5 (me + a visual designer, the design director, a frontend developer, and an account/project manager)

THE BRIEF

Our job was to bring YETI's digital experience up to par with their impeccable physical presence, interweaving the stories of their products and their community of users.

YETI was originally founded as a side project for two brothers passionate about the outdoors and dissatisfied with the coolers on the market. They decided to make the hunting and fishing coolers they couldn't find - indestructible and high-quality, for the enthusiasts of the wild. Within 10 years, YETI became a $450 million retail business and had a lineup of stunningly produced adventure films and stories.

PROCESS

To gain a better understanding of their brand and needs, aside from the usual stakeholder interviews, site inventory, and content audit, YETI graciously granted our team with direct access to several of their employees, analytics, and documentation, which helped to shape the decisions I made throughout the design process. Their customer service representatives were crucial to my prioritization of features, highlighting of information, and overall design system decisions. We also attended a Brand Summit where I had conversations with their ad agency, PR company, and events coordinators to paint the full picture of how external parts of their brand would feed into the online experience.

— PROBLEM 1: IMPROVE THE SHOPPING EXPERIENCE

With as simple of an end goal as "make users want to buy it," these product pages had to do a lot of heavy lifting.

• Allow users to navigate between sizes and styles
• Communicate dimensions, weight, and special features
• Manage customer expectations regarding product stock
• Contextualize ideal use cases for each model
• Tell the story of the product being used in aspirational situations
  
• Streamline the checkout process

SOLUTION: PRODUCT LINE LINEUP

Tundra, the flagship product line, is available in 13 sizes and counting. Each size of each product caters to a different but finite set of needs. I came up with a product line navigation that allows an at-a-glance view of all the available sizes and the current product in the size continuum.

SOLUTION: BANANA SHOWN FOR SCALE

You can literally fit your own body into the largest YETI Tundra cooler. The smallest one is good for a couple six packs of beer. That's a big difference! Inspired by fashion's "see what it would look like on" webcam try ons, my solution was to show every cooler in as many contexts as possible. A golden retriever puppy next to it. A full-grown golden retriever on top. A person holding it. Two people holding it. A shark inside it. A truck bed (dimensions specified) cradling it. Twelve mallards plus a couple gatorades inside it. And a comparison chart for good measure.

SOLUTION: BUY WHEN YOU CAN, COMMUNICATE WHEN YOU CAN'T

You’d think a goal would be to increase online sales, but sales increased so rapidly that manufacturers and warehouses (and the process of finding new ones) couldn’t keep up. The goal instead was to help manage customer expectations. The purchase button had to accommodate a lot of information (availability dates for different colors, varying costs, stock quantities), so I designed a collapsible “buy bar” that can open to reveal  different information and options depending on what suits the product.

SOLUTION: MODULAR STORYTELLING AND USE CASES

Some coolers are better suited to hunting, some to fishing, and some to tailgating in a parking lot. The visual designer and I created a system of mix-and-match modules that allows product pages to be tailored to the strengths of each product based on the features users are looking for, both through facts & figures and emotional storytelling.

SOLUTION: CHECK IT OUT WHILE YOU'RE CHECKING OUT

Users were abandoning carts left and right - sometimes even to continue shopping for accessories to fit the coolers in their carts, getting frustrated, and leaving altogether. I designed an easily accessible checkout flow with contextual upsells and add-on packages suggested inline to ensure the process doesn't get disrupted.

— PROBLEM 2: FLAUNT THE AWESOME SHORT FILMS AND STORIES

A few months into our engagement with YETI, we learned they were sitting on partnerships with acclaimed directors and outdoorsmen and had a pipeline full of content scheduled to begin being released bi-weekly in the coming season. Great news had we not been designing with a standard SEO e-commerce blog and the occasional photo series in mind. Additionally, new client team members were brought on who gave feedback that caused some hefty structural changes.

SOLUTION: NEW SCHEDULE, NEW STRATEGIES

Needless to say, management had their hands full. While they worked out the business end of those setbacks, I dug into a full-scale reassessment of YETI's content, navigational structure, user flows, and business goals. I also restructured our project schedule, created feature spreadsheets and functional documentation to ensure client expectations matched with ours, and mapped various user flows and content maps. Fortunately, the entire product design process being left solely to the visual designer and I without oversight worked in our favor. We were able to work in an agile and efficient way, collaborating to create a detailed design system. She then applied that system to high-level wireframe sketches while I cataloged comprehensive lists of elements and fleshed out both anatomical page overviews and detailed wireframes for each template.

SOLUTION: PUT THE CONTENT EVERYWHERE

Back in the modular system, I had already accounted for content pieces to be strategically placed within product pages and shopping landings, so to accommodate for the higher quality I updated them to be more prominent, full-width features. I also designed an immersive video viewing experience for the film collection, and storytelling templates that spotlight striking photography & videos and captivating pull-quotes.

— PROBLEM 3: SHOWCASE THE BRAND'S AUTHENTICITY

I know. The term "authentic" can't not elicit an eyeroll. However, YETI's commitment to staying true to their roots is valid. Their extremely loyal fanbase can spot a mistake in a staged fishing photo from a thousand yards away. We were tasked with ensuring our designs would hold up to that scrutiny.

SOLUTION: INTEGRATE ATTITUDE

The users and representatives we talked to could wax poetic about the feel of nature and the grittiness of their tried-and-true tools. Not content with relying on content to express that authenticity, we aimed to reflect the ruggedness of the audience's culture in the site's framework. For the visual design, that meant using textures and heavy typefaces. For the experience design, I created templates with ample room for photography - ensuring that the products were often far less than pristine, dense content, substantial examples of why the products are good, and writing copy in a true voice. I also worked together with the design director and front end developer to iterate on appropriate interactions and animations.

— RESULTS

From the client:
"We had launched a really high production value series of videos. We were producing a lot of content. The site they created gave us a place to house all that content for engagement purposes, which we didn’t have before at all. It was definitely driving clicks to the site. It was a phenomenal improvement from where we were, without a doubt. The site really reflected the premium nature of our products, which wasn’t the case with our previous website."

— LEARNINGS

Although it was born of a setback, our new closely collaborative small team approach to tackling design problems was a positive change in our workflow. More problematically, our frontend-coded designs ended up being used as prototypes for the client's technology team. The development platform we designed for was thrown out, so the current live site reflects changes and design decisions we didn't make, an unfortunate consequence of handoff being the end of the engagement. To avoid that type of mistake again, in subsequent work we accounted for post-hand-off oversight from the beginning. From a project management and strategic perspective, asking clients more probing questions regarding the brand's larger goals and plans in addition to looking at the current and previous states of things would have prevented complications.

— POST-LAUNCH

IPO

SUMMER 2016

5

NEW PRODUCT LINES

125

FILMS

1,000,000

VIDEO VIEWS