[UX Case Study] Savvo Digital Sommelier: A study in user research and contextual inquiry.

Project Brief

Savvo Digital Sommelier has wine kiosks at select retail stores in the Greater Chicago area. Originally, the kiosk was placed by the wine aisle to help users browse through wine selections. Later on, pairings with cheese and meats were integrated into the selection process, and the kiosk was placed in the Cheese section. Savvo have been approached by a new client, Cooper’s Hawk Restaurant and Winery.

Deliverables

User interviews, Competitive analysis, Customer journey map, Personas, User flow, Use cases, User testing, Visual competitive analysis, Moodboard, Style tiles, Paper prototype, Mid-fi (Axure) wireframe, Marvel prototype, Roadmap, Sketch files

The Challenge

To seamlessly incorporate and build upon current product so it fits into the context of Cooper’s Hawk restaurants.

Research

From the initial kickoff meeting, our client wanted a reevaluation of his current product and how the interface can be improved. He mentions that there’s also a winery restaurant called Cooper’s Hawk interested in having the kiosk be in their stores, and although they are still in negotiation, it will be helpful for him to have a prototype when he pitches the idea to Cooper’s Hawk’s CEO.

Current Product

When we started the project, our client already has his kiosks at a few retail stores in the Chicago area. Although it was under construction at the time at the retail stores, we still have access to the working prototype.

Left: the current kiosk prototype our client is working with. It is about 6' feet tall with an angled kiosk screen and a digital display on top. Right: our team testing the interface for the first time.

Features of the current product include, in no particular order:

1. Pairing cheese with six of the featured wines:

2. Detailed tasting notes and information about the wine:

3. Wine pairing suggestion based on cheese/meats:

We look through research notes from previous design teams who worked on this project, as well as their reasoning behind choosing specific layouts or concepts. This is so we know what worked and didn’t work, and plan our approach to this current iteration accordingly.

Competitive Analysis

(left) Interface Analysis: we used the matrix scales of simplicity and amount of information on screen because it was the two factors that either made the kiosk helpful to the users and increased wine sales or have since been removed from these stores. (right) Physical Kiosk Analysis: we also analyzed the physical kiosk itself and whether they are approachable and if users/customers know what the kiosk does by looking at it.
The information shown on the matrices are based on actual articles on the implementation of the kiosks. This is so we have a big picture view of the market competitors in detail. Some unknown factors, such as whether the kiosk is still in use, was assumed based on the date of last press in regards to to kiosk.

Heuristic Analysis

Through our initial user testing with the current product, we recommended the following changes to our client:

Plus sign: users thought the plus sign “+”, which indicated the food/wine pairings, looked like a button and tried to tap it. We recommended that the “+” be changed to either an ampersand & or have the word “and” somewhere so users know it’s just a pairing indicator.

No Scrolling: expand the description so users don’t have to scroll to see the rest.

Rating info: users were confused about what the ratings meant and wanted an explanation of the origin and scale of the ratings.

Breadcrumbs/navigation: one big pain point during testing was the inability to go back to a specific page. We suggested that breadcrumbs or better navigation will help users immensely when they use the kiosk.

Price: users did not understand the pricing the way it was displayed here. We suggested that there be more hierarchy for the actual price and clearer indication that it’s the price for 6 bottles of wine.

Help & Documentation: provide visible help for users having problems with the interface.

Cooper’s Hawk Contextual Inquiry

Through research, we find that there are no direct competitors in the wine kiosk market in the U.S. All known competitors have either closed down or are outside of the country. We also included non-kiosk services such as Vivino, an app that helps you filter through and identify wines, to help us glean insights into potential ways to improve upon the way wine information is currently being presented in the product.

To help us understand the context for which the kiosk will be incorporated into Cooper’s Hawk, we decide to pay a visit to a few of their locations.

To give some background on Cooper’s Hawk Winery and Restaurant:

  • 25 locations nationwide
  • Largest wine club membership in the USA with over 200,000 members
  • Projected productions of 300,000 cases of wine per year.

The restaurant is separated into two parts: the winery/tasting room where merchandise is placed, and the actual restaurant itself with a bar. We talked to the staff, managers, and customers while we were there, and also did a wine tasting at their booths. Here’s what we find:

Customers really enjoy their experience at Cooper’s Hawk and especially for the residences in the suburbs, it was a chance for them to go to a winery at night and have a good meal with their bottle. Almost all of the customers we talked to mentioned the Wine Club and encouraged us to join for its many benefits, including a rotating Wine of the Month and free wine tastings.

We do hear consistently from the staff that on a busy Friday or Saturday night, they aren’t able to properly attend to all the customers in the tasting room. The tasting room lines can get 5 deep. This is a big pain point since the overflowing of customers also causes breakage in merchandise.

In summary:

Define

Cooper’s Hawk & Client Needs

It was clear to us that our client has two top priorities for the kiosk: to create an MVP for Cooper’s Hawk and have that MVP be as close to the current layout system as possible. However, our job as designers was to come up with creative solutions that the client might not have thought of, so our team had many long discussions on how to compromise between blue-skying and feasibility for our next sprint.

When we evaluated Cooper’s Hawk and our client’s goals, a big point of contention is the food and wine pairing. We found that pairings were not emphasized in the restaurant, and only about ¼ of the customers who dined-in asked about wine pairings. Instead, Cooper’s Hawk promotes the Wine Club Membership to all its customers. Since our client’s current product was based upon wine and cheese/food pairings, our challenge was to figure out a way to balance both of those needs.

Meeting with Cooper’s Hawk’s Chief of Retail Operations

Our client had arranged a meeting with the Chief of Retail Operations, Eric Larson, and our team came along in order to learn more about Cooper’s Hawk’s needs, specifically from the retail side. We learned from talking with Eric that their goal was to find a way to promote the sales of merchandise in addition to the wines. He was hoping the kiosk could be a way for customers to easily browse through the various items they have in the retail section of the store, especially the Wine of the Month. We kept what Eric said in mind, all the while still putting our client’s needs as our main focus as we moved forward with the designs.

Personas

Through our contextual inquiry, we categorized the potential users of the kiosk into two types:

Dave and Barbara: a semi-retired couple in the suburbs who wants to socialize and be a part of a community

Gloria: a Cooper’s Hawk tasting room attendant who wants to provide an enjoyable experience for the customers and likes the perks and discounts that comes with the job

Narrowing the Scope

Through our visits to the different Cooper’s Hawk locations, we saw that Cooper’s Hawk tasting rooms are often too busy to properly attend to all customers. For our designs, we want to:

  • Alleviate the strain on the wine attendants
  • Add value to the customer’s experience
  • Entertain while they wait for their tastings

Design Principles

Diverge

Three prototypes:

PROTOTYPE 1 — Encourages Exploration: This concept presents the customer with something fun and interactive while they wait for either their restaurant reservation or their wine tasting.

PROTOTYPE 2 — Appropriately educational: We wanted to provide the appropriate amount of education about wine for the customers so they have an enriching experience at Cooper’s Hawk.

PROTOTYPE 3 — Welcome to the family: Since the majority of the customers are wine club members, this interface promotes the wine club membership and includes an electronic signup process.

Concept Test

One of the testing users said, “I just want to explore first.” Users all preferred the more playful prototype because it was fun and easy to engage in without any commitment, like signing up for Wine Club membership or thinking, like facts about wine and its origins. The Wine Wizard, a short quiz that helps the user find out what kind of wine they would like based on their food preferences, was especially popular among the users we tested.

I just want to explore first.

Users did not react well when they were presented with the prototype that promoted Wine Club Membership from the get-go. Many of them thought it felt pushy and out-of-the-blue and did not feel incentivized to further explore the kiosk. “I don’t like the word ‘membership’”. They did, however, like the familiar greeting from the CEO.

“I don’t like the word ‘membership.”

While users did like the Appropriately Educational prototype, they were surprisingly not interested in reading any in-depth information about wine or winemaking. They did, however, like the ABCs of Wine Tasting, especially those who had never done a tasting. What was interesting was that more than one user stated that would not watch the video for fear that it would make too much noise, thus drawing attention to themselves at the kiosk.

“I want to be good at wine, and here I can pretend to be good at wine.”

Users also expressed great interest in wine and food pairings. They liked knowing what wine would go with particular restaurant menu items, especially if the scenario is that they’re waiting for their tables.

As for the merchandise section, users liked browsing through them. They were interested especially in the Gift Guide because of its connotation that it’s a curated selection of gifts for special occasions. Users expressed that this helps give them gift-giving ideas for the next gathering or party they go to.

We found through testing our three different solutions that users reacted more positively to the Encourages Exploration approach to the interface. Not only does this layout give each category equal weight, but it also allows the user to quickly get an idea of what they can do on the kiosk.

Converge

Because the kiosk needed to be versatile in order to seamlessly adapt to Cooper’s Hawk’s settings, we decided to use the Encourages Exploration prototype as the base wireframe for our convergence.

We also highlighted the Wine of the Month by placing it on the home screen of the kiosk. Testing shows that users were curious about what the Wine of the Month was and wanted to learn more. This also aligned with CRO’s goal of driving up sales for the Wine of the Month.

Wine Wizard has consistently tested the best and was the first thing users wanted to tap on right away. Because of this, we wanted to make it an integral part of attracting and engaging customers.

We’ve streamlined wine browsing so users can easily see all the wines available for purchase and view more information about its tasting notes.

For the main wine information page, we incorporated a scrolling format so more information can appealingly fit onto the same page without the user having to navigate to another screen.

Because at least 70% of the restaurant customers are Wine Club members, we wanted to reserve the function of learning more and signing up for the wine club, but not have it at the forefront of the interface.

We wanted to make the signup and log in process for the Wine Club easy for both the customer and the employees who would assist them.

Lastly, we put up images of the entire menu into the interface. This is so that 1). it’s easier for the developers to do initially and 2). it can be a temporary placeholder for if and when they digitize the menu. The food pairing can then be accessed from the menu item page.

Below is the interface map of our final wireframe:

Roadmapping

Since our client needs an MVP for what he and his team can build in a short amount of time so he can deliver a product to put in Cooper’s Hawk, we created a roadmap for what we believe were must-haves (Phase 1 — light grey), additional features (Phase 2 — dark grey), and if there’s time (Phase 3 — dark blue). We also mapped out what features were exclusively for Savvo wine kiosk.

Final Thoughts

“Wine Wizard is a neat idea. I think we have a great start to creating a product for Cooper’s Hawk.”
- Client

Our client really liked our wireframes and wanted to include them in his presentation of the product to the Cooper’s Hawk’s CEO. He was especially impressed with how fleshed out the screens and the flows were in the short amount of time we had.

However, in a follow-up email sometime after the projected ended, our client indicated that although the features we created were great, the extent of work on the backend that was needed in order to flesh them out was too great an ordeal. In short, he said we “bit off more than we can chew”. Though this came as a surprise to us, it was also a good lesson learned for similar projects we might encounter in the future where a client needed to produce an MVP in a short amount of time.

Overall this was a great experience in contextual inquiry and thinking creatively about designing for the client’s customer, Cooper’s Hawk. Although we initially had trouble deciding the scope of our project due to its multi-faceted features and potential, we had narrowed the scope through much research and good communication with the client.

Click here to see the final prototype.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store