Background

Kendall-Jackson came to Kraftwerk Design in need of a website refresh in terms of content strategy and visual aesthetics.

The client had a solid foundation for their redesign. They had already done a full content audit and sitemap redesign. Our goal was to design the best page layouts and visual elements to present the content and promote online wine sales and organic social engagement.

!

The main navigation did not prioritize products and shopping.

The client already knew that a priority for them is to present easy paths to purchase.

!

The blog was not meeting it’s target purpose.

All educational content was limited to the blog which was drowning in recipes.

!

The wine Sensory Tour content was too in-depth for their customer base.

The details were too specific and were not at the right skill level for their customers.

Proto-persona

William K. Boyd

Kendall-Jackson provided us with insight into their customer base which allowed us to create a proto-persona to base design decisions on.

Man in his early 60s, buys wine at the grocery store because it’s affordable. Has a wife but no kids. Is a retired doctor. Cares about entertainment and learning. House in California - spends time hosting dinner parties for neighbors.

Problem & Hypothesis

Customers are not comfortable navigating the mobile site and don’t find Kendall-Jackson to be a resource for wine education and are therefore overlooking the brand as a contender for trusted favorite.

If we redesign the site to focus on wine education and present ourselves as experts in the field, users will rely on us as a favored brand in the future - contributing to customer retention and loyalty and increasing online purchase once they know what products they like.

Sketching Solutions

Sketching layouts allowed us to plan out the visual hierarchy of the content for each page type.

It was important to think through the purchase flow on desktop and mobile since this was a primary pain point for users. Our secondary objective was to include educational initiatives and establish Kendall-Jackson's expertise in the wine industry.

1.

Updated navigation that matches the user’s mental model.

This is based on the information architecture performed by the client.

2.

The wine product page contains more educational content about the wine.

The presentation of this content needs to be engaging, friendly, and not overly academic.

3.

This educational section gives tips and tricks about choosing, storing, drinking, and serving wine.

This guide establishes Kendall-Jackson as an expert and a resource.

Mobile Sketches

We considered the flow through the wine-buying process in the early stages of design because it is a top priority for the users & the business.

The cart functionality would be handled by E-Winery, so we could only plan the process up until the shopping cart - but we could consider how to match the design system of the cart and check out site.

Wireframes

We developed wireframes of the key pages on the site to test the initial impact of the content and to confirm that the main tasks William needs to accomplish are easy and enjoyable.

Home Page Iteration

Version 1 - Home Page
!

Usability tests revealed that the homepage was overwhelming with content and users were lacking a sense of being “welcome” to the site.

The redesign offers fewer content blocks with a better overview of the site’s available content.

Version 2 - Home Page

Product Page Iteration

Version 1 - Product Page
!

Testing revealed that the product page needed a “friendlier” presentation of the overview of the wine.

We adjusted by consolidating content into columns and adding a wine summary at the top. This allows Kendall-Jackson to influence William’s opinion of them by providing helpful information in just the right amount.

Version 2 - Product Page

Visual Design

The client’s old site represented their branding, but not the visual storytelling their customers wanted to see.

Some sites that Kendall-Jackson looked to for visual inspiration were FX, HBO, Seghesio, and Anchor Steam. These sites focused on storytelling through imagery and dramatic typography. They had simple and minimal text and large photos.

Visual Inspirational

Anchor Steam
FX
Seghesio Family Vineyards

Updated Visual Design

Initially, we presented a few different visual designs to the client and over time, we developed one cohesive style that best represented their brand.

Final Home Page
Final Product Page
Sensory Garden Page

A watercolor texture became a detail that got used throughout the site to deepen the feeling of immersion into a story and experience.

The garden page has a hand drawn map, painted in Photoshop, that teaches about where the food from the restaurant comes from and what sustainable practices are used in their agriculture.

Reflections

Results

The site launched in the fall of 2016 and saw 81% increase in visitor count (from 16,000 a month to 29,000) in the first month after the launch. The site reflected the Kendall-Jackson family story and enticed users with large graphics and easy to digest stories. Their social media was integrated more fully across the site and the blog now acts like an educational resource for the community.

Lessons Learned

I learned that when the goal is to tell a visual story, the imagery needs to be very high quality and incredibly accurate to the message that needs to be conveyed.

I also learned that having a dedicated content manager really helps the process of honing in on the meaning of the content and editing existing text to match the new layout.

Next Steps

The next step is to evaluate how the site has performed and make adjustments to continue to improve the features to meet William’s expectations and needs.