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 site current site layout is quite complex, with a large amount of information packed tightly onto each page.
Reducing the amount of information, simplifiying the navigation, and re-organizing the online store will help improve user flow.
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
SkechApp, InVision, Omnigraffle
I spent some time on Beecher's website, evaluating the current site layout, navigation and user flow.
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.
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!”
To better understand the check-out process, I sketched a quick user flow of John ordering the gift for his friend.
I created a new sitemap. It is a simplified version of the current one.
I sketched out different layout and navigation options. After some tests, I realized that with the large number of pages, a traditional navigation is easiest to use: primary navigation horizontal on top, secondary navigation on the left side.
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.
To identify the proposed content and structure as well as functional behaviors, I used the landing page as an example for an annotated wireframe.
Explore ways to reduce amount of information on pages even further
User interviews and testing to find out which information they want to see and which we can take out
User interviews and review of sales to see if the way cheese is sold could be improved
Visual Design and high-fidelity mock-ups
What I learned
Do more detailed sketches before starting on wireframes
Use templates in SketchApp to improve workflow
Better documentation of my research and development of design
Save iterations, not deleting or overwriting what I don’t like.
Get user feedback sooner, even when design doesn’t look finished