Early stages of a perfect pairing station

Savvo is an a Chicago-area start up that aims to help people make informed wine purchases. They had kiosks at a local grocery store chain, Tony's Finer Foods, throughout the Chicago area.

Our team of 2 UX designers were asked to redesign Savvo's new in-store kiosk concept. The existing kiosk was MVP, produced in a short time frame to launch for the holiday season, and saw low interaction during its first few months.

Deliverables

As a UX team, we knew we wouldn't be around to provide supplementary communication for our design. We created annotated wireframes and two prototypes to illustrate the intent behind our visual and functional designs.



Process

Our process was deeply rooted in understanding the existing kiosk and grocery retailer tactics for wine sales. We also focused on the kiosk's discoverability and consumer's first impressions with the display.



Research

We needed to discover what was preventing potential users from discovering and interacting with the kiosk and how to improve the experience. We crafted a research plan that included qualitative and quantitative methods.

We also needed to understand how wine is marketed in grocery stores and the different strategies employed by different chains. Our research helped identify who the user is and what their pain points, wants, and needs for the kiosk are.





Goals

  • Understand how to attract users to the kiosk
  • Determine what information would keep them engaged
  • Understand the current user experience and discover an opportunity to improve it

Methods

  • Heuristic evaluation
  • Observational and ethnographic research
  • Card sorting and usability testing
  • Domain research


Evaluation

We looked at the existing interface for the kiosk and evaluated it’s usability.

Errors in the copy like this were present on most screens.



Information screens like this one were unclear and inconsistent.



Observational

We visited different grocery store chains in the Chicago area to understand how these stores were selling wine and presenting suggestive pairings.

This is an example of a display at Whole Foods who presents their wine pairings intentionally and in organized, clean displays.



Domain

At Tony’s Finer Foods, we spent hours observing and watching customers and potential Savvo users. We looked at the flow of traffic, where shoppers tended to stop and browse, and what their interactions were with respect to the kiosk.

We looked at the domain of wine sales in grocery stores and the use of kiosks in public spaces. We looked at kiosk design best practices and existing market research on grocery store tactics regarding point of purchase and wine sales.



Card sorting

Card sorting was used to determine what words and occasions potential Savvo users associate with purchasing wine at the grocery store. We also wanted to know what terms from the existing kiosk design were important to them.



Usability testing

With the cooperation of shoppers at Tony’s Finer Foods and with potential users in a neutral testing site, we were able to have users show us how to use the kiosk and get their feedback.

Of the 10 usability tests we conducted, none of the testees had noticed or used the kiosk before. This included the 4 usability tests that were conducted at Tony's Finer Foods.



Understanding the Research

We had insights from each of these research methods. Each insight was written on a post-it and stuck to a wall. From there we organized the insights into categories. This allowed us to understand trends in the data and identify potential issues with the kiosk design.




We mapped all the insights from our research to gain insights and detect trends in the data.



From our research we discovered

  • Current kiosk screen doesn’t offer affordance for interaction
  • Positioning is important to kiosk's success
  • From users we found that:
    • Pairing suggestions aren't clear
    • Information takes too long to understand
    • The screen doesn't do what they expect it to


Define

From our research, we were able to define the problem that we needed to solve.

Savvo users struggle to understand what the kiosk’s purpose is and what interaction opportunities it provides. We seek a redesign that delivers greater affordance, improved usability, and more useful content.





User Personas

Our research indicated that there were two types of shoppers who were likely to use the kiosk and to be influenced by point of purchase displays.

Understanding the personas' needs and motivations helped us create scenarios where they would interact with the kiosk, which influenced our design decisions.




Ideation

As a result of our process, we were able to empathize with our user and their needs. This helped us come up with a solution.

Since we had a good understanding of what our users needed, we were able to work together to define initial features and functionalities for the solution. We did this by creating a list of features and functionalities we knew we needed to include.

Features and Functionalities

  • Clear pairing visualization
  • Additional information on split screen
  • Information should be limited and concise
  • Visualization of data is compelling
  • User task flow should be short


Rapid Sketching

I took responsibility for designing the interior pages and my partner focused on designing the landing page.

When sketching my focus was on:

  • Importance of visual design principles to demonstrate a relationship with the wine and it's pairing suggestion.
  • Kiosk users are too busy to stop and read a lot, so infographics need implementation.
  • Functionalities and features we identified as essential.

Critique and brainstorming

We presented our sketches to each other for feedback, so we could develop our initial concepts further before testing for validation.

We also came up with a gamification concept that the client suggested so we could put that idea in front of users.


Testing for concept validation

We asked potential Savvo users to look at the three concepts we developed with paper prototypes. While we both had a focus while sketching, my partner focusing on the landing page and I on the interior pages, we each had developed slightly different variations on each.

From user testing, we were able to get valuable feedback concerning content and information architecture.

The user feedback gave us a direction to proceed with as we finalized a solution. We were also able to take the results back to the client to validate some concepts and speak to the failures of other ideas.

Proposed Solution

Screen Design

The proposed solution is one that minimizes the user task flow and simplifies the information architecture. Detailed screens make use of informational graphics.

We worked together to identify the structure and pattern of information for each category type on detailed screens. I created wireframes of the screens using Illustrator and my partner worked on the home screens.

We created wireframes of a kiosk in the cheese section of a store as well as the meat and seafood section of a store.


Screens from the wireframe showing elements from the two different kiosk interface designs.



Prototype

I created two prototypes using InVision based on the two user flows that were wireframed. Links to both are below. Given the dimensions of the kiosk screen size, it is not recommended for mobile viewing.




Recommendations


Content and imagery on the screens are critical to the success of a kiosk interface. We recommended that as the design is further developed, it will be important to visually distinguish between informational graphics and graphics that are interactable in order to establish an affordance for the user and avoid confusion.

In addition to the screen designs shown above, physical alterations to the kiosk were also recommended. Having the screen lower to avoid arm fatigue and angling it towards the user's face would improve user experience. This would also provide better affordance for interaction.




Implementation

Recently, Savvo launched their new iteration of the wine pairing kiosk. They implemented our digital design as well as our recommendations for modifying the physicality of the kiosk to allow for better user affordance to encourage interaction.

As of Fall 2016, the new kiosks were gradually replacing the former ones at their locations at Tony's Finer Foods throughout the Chicagoland area.

The third iteration of the Savvo kiosk.



Conclusion

A user centered process informed our approach to the redesign. Given time constraints, we were unable to test the final concept in full context, so we remain uncertain of the design's success.

I had hoped for an experience to learn about kiosk design because I wanted to leave DESIGNATION with a good variety of design experiences. Having the opportunity to apply my user centered process to redesign a kiosk for a client was an opportunity I really appreciate.