Final Presentation and Thanks!

Final Presentation

 

We presented our final presentation last night! We want to thanks the following people for making this project possible:

  1. Wine World & Spirits
    1. A special thanks to Ella Nakamura, a Wine Expert at Wine World.
  2. John Boyer, Senior Instructor, Department of Geography, Virginia Tech
  3. Cecelia Aragon, Associate Professor, Human Centered Design and Engineering, University of Washington
  4. Taylor Scott, Teacher Assistant, Human Centered Design and Engineering, University of Washington

Our visualization can be viewed at this link. Please be aware that at this time we only have 400 wines available, which is nowhere close to the 9,700 wines that are made in the state of Washington. We would love to expand this research further and a complete dataset so we can see the full potential of this visualization.

Features of our Visualization

Figure 1

Figure 1

The initial dashboard looks like this when the user first opens the wine visualization. There are numerous features available and fit on one page. As users begin using the filters, they discover that the interactive visualization changes to show content that might interest them.

On the upper right, there is a set of icons that shows flavors to explore of wines. If the user is unfamiliar with a flavor category, they can hover over the icon (figure 3) and view a tooltip that provides information. Users select one or more flavors to filter the visualization.

Figure 2

Figure 2

Figure 3

Figure 3

There is a drop down for detailed fruit flavors (figure 4) and a search bar (figure 5) on the upper left side of the visualization. These are other opportunities for users for filtering through the available data.

Figure 4

Figure 4

Figure 5

Figure 5

The first view is a bar graph named, “Number of wines by varietal.” The bar graph displays the total number of wines by wine varietal (figure 7). The bar graph changes when users select a specific flavor(s) and shows how many wine varietals are within that flavor category.

Figure 6

Figure 6

Figure 7

Figure 7

All three views have a question mark icon next to the title. If the user is confused by a certain view, they can hover over the question icon to get information about what the view is intended to display.

Figure 8

Figure 8

The next view is a scatterplot that compares wine bottle price to a rating. Users can filter by star rating or price by using the dropdown or price slider in the upper right corner of the view. When a user hovers over a specific point in this view, a tooltip appears (figure 10) showing information about that specific wine.

Figure 9

Figure 9

Figure 10

Figure 10

The third and final view is a map of Washington. It shows the location of the wineries. Users can hover over a point (figure 12) to see the name and address of a particular winery.

Figure 11

Figure 11

Figure 12

Figure 12

The following is an example of how a user could potentially find a bottle of wine by user the interactive visualization. The first step of exploration involves selecting a flavor. The user in this example selects “floral.” The entire visualization changes when the floral filter icon in selected (figure 13).

Figure 13

Figure 13

The user decides to look at the first view. She is interested in Riesling and decides to select it. This changes the second view by only displaying floral Rieslings (figure 15).

Figure 14

Figure 14

Figure 15

Figure 15

After looking at the different options available, the user selects a point. The lower right side of the visualization updates to show the wine label and information about that particular wine. The third view (figure 17) also updates and displays the exact location of where this wine comes from.

Figure 16

Figure 16

Figure 17

Figure 17

There is no exact way to use our visualization. Many of our test users demonstrated different ways to find a wine they were interested in. Our tool offers a great exploratory approach to learning about wine and finding wine you might like.

Thanks for following and have a great holiday season!

Advertisements

Redesign & Future Work

Redesign

The usability studies we conducted helped us gain a great amount of perspective to how we could improve our visualization. The biggest issue with our prototype was that the was no clear instructions or clear titles for each view on the dashboard. It took our users time to fully understand what our visualization could do and what information it provided. Many of our participants noted that instructions, tooltips, and clear labels would help clarify the intended purpose of certain views.

Final Iteration

Based on our observations and user feedback, we implemented the following changes to our visualization:

  • Clear titles were added to each view so viewers had a better understanding of what each view was showing.
  • Question mark icons were added next to each title. When the user hovered over the question mark icon, they would get a tooltip that explained the intended purpose of the view.
  • Tooltips were added to each flavor category on the top. When the user hovered over a specific flavor, they got more detailed information about that flavor.
  • The views were rearranged to provide easier flow between the views. Users should preferably start exploring the visualization by looking at the bar graph view first, the scatterplot view second, and the map view third.
  • An image of the wine label appears when a user selects a specific wine. This will help users visualize what the wine looks like when buying it in the store.

We considered many our redesign decisions from the perspective of Shneiderman’s infovis1 tasks for our working prototype:

  1. Filter: Users can start looking for wine by selecting a flavor which filters wines based on flavor keywords. In the first view, the user can select a specific wine which filters the second view. Users can also filter by star rating and price to narrow down their selection.
  2. Coordinate: Users can view Washington wines in different ways in our dashboard. All three views are connected so users can explore different ways to finding their ideal wine(s).
  3. Organize: The visualization has three main views that are arranged in three windows to provide ease to complete user tasks.
  4. Overview: The third view on the upper left side is a geospatial map of Washington state. This view shows where all the wineries are located throughout the state. If the user selects one specific wine, the map will filter out all the other points and show exactly where that winery comes from.
  5. Details-On-Demand: There are many opportunities for users to get more information about the functions or points in the visualization. Users can hover over the flavor categories in the top and get more information about each individual flavor category. When the user hovers over a certain point in the second view, they can get details about that specific wine. Lastly, users can hover over points in the third view and get the exact address for a specific winery.

Future Work

There are many aspect we would like to improve on beyond this project deadline:

  1. Data set
    1. Due to the manual nature our data collection process was, we did not even dent the number of Washington Wines. We would enjoy including the entire 8000+ wines from our data source,  allowing for a more extensive inventory for our users to learn about.
  2. Users
    1. We would also like to expand our scope to include more tasks for our secondary persona, the wine enthusiast. Looking back on our user task matrix, this would mean including more information about the ratings and AVA information.
  3. Design Updates
    1. Back Button
      1. During our usability testing, many users noted that they would like to have a back button. We’re not sure if this can be implemented with Tableau, but it would be a great feature to have.
    2. Favorite Button
      1. When users found a specific wine they were interested in, they noted that there was no way to save it for the future. A favorite button would require the visualization to have a social network server, which is not possible with Tableau.
    3. Updates to the Color
      1. We are interested in exploring other ways to implement color to our visualization. We would love users to quickly see details such as red or white wines.

References

1. Heer, J. & Shneiderman, B. (2012). Interactive Dynamics for Visual Analysis. ACMQueue, 1-26.

Meeting 8: Data Analysis and Iterations

We conducted gorilla studies in Wine World & Spirits this past Thursday. We were able to talk with five users and gather feedback on our prototype. In total, we tested our working prototype with 7 users (2 pilot studies and 5 participants). This gave us a great amount of perspective to how we could improve our working prototype.

The biggest issue with our prototype was that there was no instructions or clear titles for each view on the dashboard. It took our users time to fully understand that our visualization and many noted that instructions, tooltips, and clear labels would help clarify the intended purpose of certain views.

One idea we came up with was having a question mark icon for each view next to each title. If a user didn’t understand a particular view in our dashboard, they could hover or click on the icon to reveal a tooltip that informs the user about that view.

Tooltip

Figure 1: Tooltip Icon

We also did an icon study for our icons to make sure their meaning was clear. While we got some interesting feedback, we gathered enough information to determine there was no need to alter the icons. The only thing that was needed was to add tooltips to provide additional information about a certain flavor category.

Icons

We plan on meeting this Wednesday to finish making the final changes to our prototype and final presentation.

Gorilla Testing at Wine World & Spirits

We went to Wine World today to conduct some gorilla tests with people who were part-taking in the free wine tastings offered every Thursday. We were able to interview 5 people: 2 novices and 3 enthusiast. Two of these participants were involved in a focus group lead by Reem.

Gorilla testing at Wine World

Figure 1: Gorilla testing at Wine World.

Focus Group

Figure 2: Reem conducting a focus group.

Each participant had to complete four tasks:

  1. Find a fruity wine. Tell the tester the name of that wine.
  2. Find 3 wines under $30.
  3. Explore red blends (wine varietal) by looking at their ratings.
  4. Find a bottle of wine you consider interesting. Where is it located?

We had a 100% completion rate for all tasks. We also conducted a smaller icon study right after the main study that tested the icons we created (figure 3). We wanted to make sure the icons we created were easy to understand.

Icon Study

Figure 3: Icon Study

There were a couple of problems we ran into when conducting this study. The biggest issue was having reliable internet. We couldn’t use Wine World’s internet, so we had to make Denise’s phone a mobile hotspot. Beyond that, we were able to conduct our studies and collect great feedback.

Up next: Analyzing the data.

Our Functional Prototype: Bringing Our Wine Tool to Life

Based on our initial prototype that we created in Axure, we were able to develop a functional interactive visualization in Tableau. The following are key functions and views that are available in our most recent iteration:

  • Select wines by flavor.
  • Display the number of wines by grape varietal (e.g. Chardonnay, Riesling)
  • Display individual wines with their rating and price.
  • Display an optional geographic view for wines.

We started building these functions and views by focusing on the easy tasks that each view needed to accomplish. Our first view is a bar graph showing which wine varietal has the most flavor associations. When a user selects specific flavors to explore, the entire visualization adjusts to the user’s choices.

First View

The second view is a scatter plot for individual wines. The scatter plot compares wine ratings to prices. The points have colored encodings which represent wine varietals (e.g. gray points are Riesling wines).

View 2

We then focused on the icons on the top of our visual. The icons we created were inspired by the America’s Favorite Thanksgiving Recipe interactive visual that we found on Tableau Public. We wanted icons that would filter our different views in our visualization. We did research on how to incorporate that function and Denise created a series of icons to use in our visualization.

Icons

The following view we focused on was the small geographic view to show where the wine came from. We used the address of the winery to generate the latitudes and longitudes of the wineries using this tutorial.

Geographic View

The next feature we incorporated was showing the wine labels when the user selected a particular wine. We were inspired by the Wine Spectator magazine and other online wine reviews. We updated our data set with the label image URLs and added a section on the dashboard to show the images once a wine is selected. We also added another section below the image to show the summary information of the wine selected.

Wine Spectator Magazine

Wine Spectator Magazine

We added a drop down filter for fruit flavor details and a search field for winery names in the upper right. We also added a filter drop down for rating and a filter slider for wine price that is associated with the second view. We made sure each view had a clear title, legend, x and y axis labels to make them clear and easy to understand.

Filter Set 1 Filter Set 2

This week we plan to focus on usability testing. Sarah will be conducting pilot studies today and tomorrow. We’ll be conducting our main studies this Thursday at Wine World.

Meeting 7: Status Update

Group Meeting 7

Working Tableau Prototype

Working Tableau Prototype

Today we spent time looking at our working high fidelity prototype and started planning out our formal usability study. We are going to Wine World this upcoming Thursday and testing with users who are participating in the free wine tastings. Here are the tasks for each group member:

  • Reem is creating post tasks and a post test survey for Thursday.
  • Reem is finalizing images for our prototype and potentially making a template for them.
  • Sarah is finalizing the task list and instructions for Thursday’s big usability study.
  • Sarah is printing the tasks for Thursday.
  • Sarah is conducting a pilot usability study prior to Thursday.
  • Frank is investigating problems with our current prototype.
  • Denise is creating other icons to tests for a small visual usability study to finalize our current icon selection.

That’s it for now! Stay tuned.

Meeting 6: Status Update

Today was primarily focused on bringing our prototype to life in Tableau. We were able to get really far in our working iteration and we’re excited to test it out with users! Here are some highlights from our meeting:

We got together today and looked over what we have done in Tableau so far.
Group Working Together
Frank was letting us know specific details about the data set and what to look out for.
Frank explaining data
Now that we had a much better idea of what we wanted to accomplish through using Tableau, we drew a new design based on our first prototype. The icons on the top are inspired by another Tableau visualization called America’s Favorite Recipes.
Sketch
We were able to recreate most of our sketched in Tableau! Frank and Reem are doing some final cleaning while Denise is researching how to create the top icon filters.
Tableau Visualization
The following are the next steps for each team member:
  • Denise will continue researching how to add icons/filters to the top of visualization.
  • Frank like a boss, is working on a geographic view.
  • Reem is collecting wine bottle images to include into our tooltips.
  • Sarah is working on drafting the final paper.

What’s next on our calendar:

  • November 12th – Class
    • 6:00PM – 9:50PM
  • November 15th – Group Meeting
    • 12:00PM – 2:00PM
  • November 19th – Class
    • 6:00PM – 9:50PM
  • November 20th – Usability Testing Tableau Prototype at Wine World
    • 6:30PM – 8:00PM
  • November 26th – Group working session
    • 6:00PM – 8:00PM
  • November 30th – Check-In
    • 4:00PM – 5:00PM
  • December 3rd – Presentation Day
    • 6:00PM – 9:50PM

Stay tuned!