Website RedesignWashington Wine Commission

Omnigraffle, InVision
UX Design, Animation
Problem: Over the last few years the Washington Wine Commission has refined it’s mission and changed it focus. In order to reflect the shift, the wine commission wanted to update their entire site from the ground up. Before the redesign, the focus of the site was on consumers. WWC new focus was improving the site for the industry and trade.

Solution: We worked with the wine commission to understand all the people using their site currently, and then created personas for each of them, totally to 11 personas. Then we combined the similar ones.

[Continued Below]
In collaboration with WWC, we picked the three primary personas – Winery owners and vineyard owners, and sommeliers.

[Continued Below]
We surveyed the site content and broke it out into index cards. Then we had 5 different people from WWC sort the cards as one of the three primary personas.

[Continued Below]
After the card sort, I laid out the categorizations in Omnigraffle for each participant. Then I looked for similarities and differences from the participants. I put together three documents: “similar” “somewhat similar” and “differences.”

[Continued Below]
We went back to the wine commission to present the results. We talk with the team to validate the similarities. Then I went back to my desk and created the first version of the site map.

Around the same time, I also created user flows for the three primary personas along with user motivation thought bubbles.

[Continued Below]
I redefined the site map to make the most important elements easy to find and get to.

[Continued Below]
It was time to get into sketching. I had a really great understanding of the structure of the site and users needs, but I needed to dig down into the details of each page.

So I started to whiteboard…
It became painfully obvious while sketching that we were giving developers a huge amount of work to complete by redesigning the entire site. We wanted to be the most efficient with their time, so we decided that the entire site needed to be componentized.

My visual designer and I spent a few days printing out the site, cutting it up, and categorizing elements that had the same functions.
As a team we decided on the components we needed to create the entire site. The exception to this rule would be the winery profile page, so wineries could use that page for customers if they did not have an up-to-date website. Then I used those components and began to sketch each page from my user flows. After sketching, I went directly into wires. Then I created a clickable prototype in InVision for users and stakeholder to click through, and developers to use. My portion of the project was ready and done. I handed my wireframes to our visual designer who did a wonderful job. She added a beautiful polish that tied into the functionality. Then our developers executed the entire redesign. You can see the final site at www.washingtonwine.org.