The Background

The initial concept for this project emerged during an analysis of the Napa Valley Vintners’ existing public website at napavintners.com. In 2017, the Marketing and Communications departments at Napa Valley Vintners (NVV) launched a new campaign called Cultivating Excellence across multiple channels to reach and engage consumer audiences.

The Motivation

In support of the Cultivating Excellence campaign, several expedient changes were made to the homepage of napavintners.com. Already serving multiple audiences, including wine trade professionals seeking education and networking opportunities, Napa Valley community members engaging with NVV member winery programs and events, and wine retail professionals seeking access to exclusive wines, adding a consumer audience to the site made the cracks in the strategy of "one site to serve all needs" more apparent. With considerably different audience objectives, the existing website’s information architecture was proving unwieldy and ineffective for visitors.

My Role

As Web Manager for the NVV, I was involved from the inception of the project, first raising the issue of competing audiences and meeting regularly with department directors to form a consensus around an appropriate solution. After a year of fitful progress—due mainly to the challenges of scheduling for all the interested parties—we pared the NVV team down to three: myself, the VP of Marketing, and the Head of Creative Services. I then served primarily as a technical and product manager going forward, working to ensure a user-centered product design that met the goals of NVV’s Communications and Marketing teams.

The Process

 Outlining Requirements and Objectives

Knowing that meeting the needs of our audience was one of our greatest challenges going into this project, my first task was to work with the project team to succinctly define our intended audience and the services we wished to provide them.

It was immediately clear that we were talking to people interested in wine.
What else did we know?

Using research and survey data gather by the Napa Valley Vintners, we asked and answered the following questions about our target users:

• How much do they know about wine?
• What makes them choose one wine over another when purchasing?
• How are they most likely to find our website? i.e., what information will they be seeking?

We needed to be equally clear on the NVV’s goals for the new site. And we knew that our primary objective was answering one question for our end-users…

Why buy Napa Valley wine?

The answer to that question was one NVV had already answered through earlier campaigns:
Because every bottle of wine tells a story. The story of what makes the Napa Valley—its wines, its people, its place—unique. A story of excellence and innovation.

Of course, it was also apparent that as a luxury brand, the site would need to pair the aspirational with the approachable, constantly mindful of where the brand was landing between exclusivity and inclusivity.

We knew early on from our team discussions surrounding our target audience that a key component to a successful website would rely on presenting varying levels of information, based on the end-users’ interests. We needed to offer non-technical information to those interested in learning the basics, while also offering opportunities for our visitors to learn and grow into confident wine enthusiasts, armed with the knowledge they craved to make educated wine purchases.

• Objective #1: Answer the question “Why buy Napa Valley wine?”
• Objective #2: Tell the story of Napa Valley’s wine, place, and people.
• Objective #3: Create a brand that feels simultaneously approachable and aspirational.
• Objective #4: Educate our visitors so that they feel confident and informed when choosing Napa Valley wines.

 Information Architecture

Now that we had our top-level objectives in place, I began work on the information architecture for the site. Working with our in-house team through several rounds of reviews and brainstorming, we defined an outline for the website with key topics and messaging for each section, paying special attention to define broad concepts that could then be expanded for greater detail, depending on an end-user’s experience and interest.

 Researching Partners

Next, in collaboration with the Head of Design Services, I created a Request for Proposal (RFP) and began extensive online research to identify top-notch design agencies who had the aesthetic and skillsets we were interested in for the project.

• Highly skilled with interactive design
• Expertise in innovative ways to disseminate information
• A lush but simple aesthetic that doesn’t feel arrogant

 Defining the Brand

With our new consulting design agency on board, we began meeting to visually and conceptually define the "Cultivating Excellence" brand, defining logo components, a palette, and mood boards.

 Reviewing Content

Working from the original outline and key messages we’d established earlier in the project, our consulting writers began to shape the voice and messaging for the website. I worked with NVV’s Vice President of Marketing to carefully review and edit that content for accuracy, consistency, and engagement.

 Technical Specifications

As part of my role as Web Manager for the Napa Valley Vintners, I had outlined a 5-year plan to update and consolidate our technical resources into a modern and consistent set of libraries and platforms. This website was the first opportunity to begin implementation and therefore required clear specification for the consultants working to build a front-end framework for the website.

Based on the existing codebases and the experience of NVV’s in-house technical staff, we’d decided to build all future projects using PHP, Laravel, Bootstrap, and jQuery. Additionally, we would be leveraging our existing database and server resources hosted on Microsoft’s Azure cloud platform.

Our consulting designers for this project would build the front-end for each of the main sections in the new website, and then I would rebuild that infrastructure into a Laravel backend that connected with our existing database to expand the site functionality.

Development

 Data Architecture

With high-fidelity design prototypes reviewed and approved for the project, I had a full understanding now of what content and functionality would be included on the website. It was time to begin evaluating how that functionality could leverage our existing data structures and what modifications or new resources would be required.

I outlined all of the data models pertaining to the site and mapped out the schema that would serve each.

Working now in Laravel, I created migrations and seeders for all of the pertinent data, ensuring that our final launch would pre-populate our site content as well.

 Backend Services

Working with Model-View-Controller and object-oriented patterns, I integrated the static front-end originally produced by consultants into the final codebase. I then connected critical dynamic components like features, events, and articles to the database, and further integrated the front-end libraries into Composer and npm dependencies.

 Designing New Components

Next came designing and building additional content and components. Rather than continuing to work with consultants on all the design pieces needed for the website, our team chose instead to define core functionality by consultation and then I would continue the design work for the rest of the functionality desired, working in collaboration with the NVV Head of Creative Services as needed.

This included refining the interface for the Winery Map and Trip Planner, envisioning the look and components for dynamically-built and launched campaign landing pages, and—most critically—making sure the website was compliant with W3C Web Accessibility standards (WCAG).

I also was responsible for sourcing and editing all of the photography for our initial article library, as well as styling the content and presentation formats for our existing articles and itineraries.

 Web Content Accessibility

As part of NVV’s initiative to support and encourage web accessibility in the wine industry, a technical objective to meet or exceed web content accessibility standards was implemented for this project.

Having taken a few online courses on the subject, I still didn’t feel knowledgeable enough to ensure we were meeting our goals in this regard, so we sought out the expertise of a web accessibility consultant. However, finding such expertise proved to be difficult and when we did finally hire someone, she failed to meet her obligations to the project.

Anxious to launch the new site, but stalled by our inability to move forward with accessibility, I dug in again to fully audit the site for accessibility issues. Identifying the core guidelines (WCAG 2.0 Level AA Compliance) that we wished to adhere to, I worked through the entire site to address problems for web users with disabilities.

Most of the work involved correctly labeling and identifying information in the site hierarchy, implementing semantic markup, enriching javascript components to communicate real-time and appropriately with assistive software, and evaluating (and improving) the visual contrast and legibility of the design components.

 Custom Content Management

The final stage of development was building a custom Content Management System (CMS) interface for the dynamically-driven portions of the website.

Again working with PHP and Laravel, I used the AdminLTE3 Bootstrap Template to build a new home for core staff functionality, including role- and permission-based access.

 Launch Plan

Our final phases for the project included developing a comprehensive launch plan in coordination with the Communications and Marketing departments. For my part, I served as an advisor to suggest considerations and strategies for a successful launch.

• Email Announcement
• Social Media Plan
• Rebranding for existing properties
• Introductory campaign with the option to purchase a virtual wine-tasting

The Big Reveal

The website was launched in December of 2020. After years of planning and programming to create it, the site felt like a breathe of fresh air for the Napa Valley brand and immediately received positive responses from industry partners and website visitors alike.

However, my favorite compliment came from my grandpa who declared it “one of the easiest sites he’d ever navigated.” I considered that high praise from a man who used technology both personally and professionally, but had entered a phase in life where navigating online could be daunting, if not dangerous.

Outcomes

Today, the website continues to be an important tool for the Napa Valley Vintners, steadily growing its presence and still evolving. The COVID-19 pandemic altered so much of the business operations for NVV, as it did for everyone. While the project was launched late 2020, it was nevertheless impacted by the shutdowns in tourism. As restrictions lifted, the efficacy of the site re-emerged and NVV staff began again to give new focus to the site’s use and promotion.

More Case Studies