Project Overview

Improving the online shopping experience for Beecher’s Handmade Cheese, an artisan cheesemaker in Seattle’s Pike Place Market. They sell a wide variety of cheeses and gifts online and in their retail locations around Puget Sound and in New York.

The Challenge

The site current site layout is quite complex, with a large amount of information packed tightly onto each page. 

The Solution

Reducing the amount of information, simplifiying the navigation, and re-organizing the online store will help improve user flow.

My Role

During my first project at General Assembly, I worked on all aspects: Evaluate the current website, map user flows, conduct interviews, sketch new ideas and storyboards, define the vision, assemble the deliverables

Tools

SkechApp, InVision, Omnigraffle
 

Research

I spent some time on Beecher's website, evaluating the current site layout, navigation and user flow. 

Comparative analysis

Then I looked at websites for companies selling cheese. I noticed that there is a number of small artisan cheesemakers and creameries that either sell at local stores or a small selection online. Larger companies often sell cheeses from multiple brands. 

Although they are not selling cheese, I included Fran's chocolates and Pike Place Fish Market. They are local companies, with locations around Puget Sound and online stores. Most websites I researched have a very clean modern look with beautiful, enticing photography and a simple navigation. In comparison, Beecher’s looks quite dated too busy. There is too much text and information on each page, and the wording of the navigation is confusing.
 

Persona and Scenarios

I chose John as my primary persona. He is a 37-year-old school teacher, enjoys activities with his daughter and is looking for brands that reflect his tastes and behaviors.

To better understand John’s needs, I wrote three scenarios for him.

Scenario 1: Visiting Beecher's
To celebrate an important project at school, John plans to take his daughter to Pike Place Market on Sunday morning. His friend recommends a trip to Beecher’s, to watch the cheese-making and try some samples. During his break, John tries to find out how to get there and if the store will be open.

Scenario 2: Finding a gift
John is invited to the birthday party of a fellow teacher who has recently moved to Seattle. John would like to bring something that is unique to the Northwest and thinks a sample platter from a local store might be a good conversation starter. He looks up gift ideas in the evening, sitting at the kitchen counter with his laptop. He likes the cheese selection at Beecher’s, but doesn’t want to make the trip into the city. 

Scenario 3: Buying cheese
John’s friend Malcolm moved from Seattle to Ohio the previous year. Malcolm’s birthday is coming up, and John would like to send him something “from home”. As a surprise, he decides to have some of Beecher’s flagship cheese delivered to his friend’s house.
 

User Interviews

I conducted interviews with users that were not familiar with the website. I introduced them  to John and his scenarios and asked them to buy cheese (1lb Flagship), find store hours and location, and read the reviews for a gift. They too thought that the site was too busy and the navigation confusing.

Some quotes from the interviews:
“There is too much info and text, I can’t really see what I am looking for.”
“When I click ‘locations’, I don’t see their store hours. I have to click on ‘Seattle’. That seems redundant.”
“Cheese is easy to find, but the categories are confusing.”
“Mac and Cheese is not a side dish!”

User flow

To better understand the check-out process, I sketched a quick user flow of John ordering the gift for his friend.

wireframes

I developed the wireframes based on the sketches I made earlier, focusing on the scenarios I had created for John. You can also explore the prototype or watch the videos below.

User Testing and Iterations

I tested the prototype with some of my fellow GA students that were not familiar with the site. I introduced John and asked them to follow the tasks outlined in the scenarios. Overall they found the site structure very clear and the navigation easy to use. Based on user feedback I made some changes to the functionality of the prototype:

• Moved up “similar items” on the product pages to show beginning of reviews.

• Change the price of shipping on the “review and submit” page to be consistent with the price shown in cart.

Not convinced I had found the best solution for the “location” page, I asked for feedback during critique session. Based on that feedback, I made the following changes:

• Included all locations on one page, showing opening hours and contact information

• All locations are now listed in the side bar

• Removed confusing rollover

• Updated map to show all locations, not just the ones in Washington

• Add box “Find a store” in content area.

Annotated wireframes

To identify the proposed content and structure as well as functional behaviors, I used the landing page as an example for an annotated wireframe.