User Research for and Development of a Food & Beverage Pairing App

OBJECTIVE & OVERVIEW

There are no shortages of traditional recipe apps on the market for both cooking and tending bar, but apps specifically designed for pairing food with drinks are exceedingly rare. A well-managed app that easily combines food with drinks in an intuitive and easy-to-use manner would be perfect for those who appreciate quality food and beverages.

 

That’s where Pair-It comes into play, shifting the focus to a separate aspect of the culinary experience: selecting the proper beverage to compliment the preferred meal.

CHALLENGE

The challenge was to create a new experience for the user in a familiar manner, despite the lack of direct competition for comparative study.

SOLUTION

Pair-It users should be able to choose from a vast database of preexisting meal recipes, and they can expect to be presented with three beverage options in the following categories: beer, wine, and spirits (cocktails). The user will also be able to effortlessly customize their preferences in accordance with their diets and to display only the styles of food and beverages that they prefer.

COMPETITOR ANALYSIS

The first step in my process was to develop mini-case studies for a few of the competitors' apps. By studying five successful apps in the food and drink recipe genres (Highball, Epicurious, Yummly, Liquor Cabinet and Flaviar) I was able to narrow down specific traits and functionalities that could be translated into features for Pair-It, allowing me to provide the user with a unique experience within the expected parameters of a mobile app.

HIGHBALL

According to Hick’s Law, it takes us longer to make a choice when we have numerous options. With the cocktail recipe app Highball, they start the user out small, ensuring that they’re not immediately overwhelmed. When you first open the app, the user is presented with just three recipes, with a simple plus (+) symbol at the bottom for adding more. The user recognizes that this is a casual, “go at your own pace” sort of app.  That's definitely a something I'd like my users to think about my app, and the tab-style cards are simple and easy to use.

EPICURIOUS

Where Highball observed Hick’s Law of minimal options, Epicurious has chosen to disregard it entirely. On Valentine's Day, the app’s first screen displayed “40 Valentine’s Day Appetizers That Set the Right Mood.” 40 is a lot to choose from. Swiping left reveals “61 Romantic Dinners for Two.” An additional swipe presents the user  with “75 Valentine’s Day Breakfast Recipes for the Morning After.” Seventy-Five... There are entire recipe books out there with fewer options than that. I'll definitely be conscious of that in regards to not overwhelming my users.

LIQUOR CABINET

Liquor Cabinet clearly focused on quality over quantity, coming in at just 130 drink recipes in total. And their interface is wonderfully minimal; it's clean and uncluttered like a well-styled magazine layout. The liquor brands that they promote for their selected recipes fall into the mid-to-high price range, which seems about right for my app, as well. If my user is particular about what beverage they're pairing with their meal, it's likely they'll be willing to spend a little money for the perfect accompaniment.

USER RESEARCH

The next step in the process was user research. Understanding is the key to problem-solving. For this task, I wanted to know how your average user approaches meal and drink preparation. What resources do they turn to: physical recipe book or digital? And if it’s digital, do they rely upon on their desktop browser, or are they more inclined to use a mobile app?

I conducted my user research in the form of in-person interviews. After defining the objectives of my research I developed a hypothesis, then interviewed three separate people based on scripted questions, recording and comparing their answers while searching for commonalities and analyzing the resulting information.

What I discovered was digital resources were king with my three test users. However, by and large, they still preferred a standard web browser, whether in the form of a trusted website or a simple Google search. With that in mind, my interviewees still expressed interest in a food pairing app, providing it checked all of the boxes in terms of their specific wants and desires.

USER PERSONAS

As an extension of understanding the user, I created a set of User Personas based loosely on the interviews I’d conducted. I referred back to these personas regularly during the ensuing development of the app.

 

The core commonality of the users is their appreciation for both food and beverage, but their experience levels vary from the novice in the kitchen to the self-proclaimed foodie. I needed to appreciate why these users would want to turn to my app as a regular resource, and these personas helped me with that during that discovery process.

CRAZY 8s

As I experimented with low-fidelity paper wireframes, I employed the Crazy 8s methodology taken from Jake Knapp’s book Sprint, where I spent time ideating potential design solutions for my app. In the end, I came away with the basic foundation for the UI, but admittedly it didn't turn out as I'd originally envisioned. I began this project with a basic idea for the first few screens of the app, mostly in a card-based form similar to the appearance and functionality of the Highball app. But when I tried to sketch the interface to accommodate the needs of the users in relation to the specific functionality of the app, I quickly learned that the card-based layout was not ideal.

USER FLOWS

For the user flows, I started with 3 user scenarios:

 

  • Basic sign-up/sign-in

  • View ratings and recommendations

  • View, alter, and share recipes.

WIREFRAMES

Beginning where I left off with the Crazy8s sprint, I quickly sketched out a series of screens to be used in a rapid prototyping session. I contacted the same users whom I’d previously interviewed, instructing them to follow the three basic flows that I’d developed. I wanted to learn if the home screen pattern that I’d sketched made sense and if the subsequent screens flowed in an equally logical pattern. Following this feedback, I was able to tweak the screens digitally as medium-fidelity wireframes.

Among the key pieces of feedback were:

  • My users liked the option to bypass the sign-up/sign-in screen and go directly to a recipe search/pairing

  • The placement of certain icons and menu items didn't conform to their expectations

  • They liked the ability to modify preexisting recipes, as they would normally do with a physical recipe card

  • They wanted succinctly written copy for "why" the food and beverage were perceived to pair

MOOD BOARDS & STYLE GUIDES

Both Liquor Cabinet and Flaviar featured heavily in the visual interface of my app, owing to the darker palette and delicate Art Deco line-work. I also liked Liquor Cabinet’s use of ghost buttons, which provides for a clean and minimalistic feel.

 

The graphic style of the app can best be described as “Gatsby-esque,” the likes of which would make F. Scott Fitzgerald proud. As a play on words, I chose a sophisticated line-art Parrot mascot to “pair” with the Pair-It app. Because who doesn’t love a good pun?

SIGNIFIER & AFFORDANCE

While I didn’t exactly reinvent the wheel with the home page for this app, the presentation of the suggested appetizer placed above 3 choices of beverages is not a common design pattern. That said, the signifier is clear to the user at the onset; upon reaching the home page, the user is presented with an appetizer recommendation, and directly below this is a bold ampersand, the nearly universal symbol for “and”. The ampersand hovers above 3 drink choices, making it clear to the user that these are the recommended beverages for the given appetizer. When the user selects one of the beverages, they’re presented with a story about the drink, as well as an indication for “why it pairs,” providing them their needed affordance.

What went well?

The general design of my app came together quickly and organically, from low-fidelity wireframe to the high-fidelity prototype, due in large part to the inspirational elements gathered for the mood board.

Skills: User research and development, technical skills (Sketch, InVision, Prott)

Processes: Searching both the web and real-world sources for inspiration

Solution: Seek further inspiration from Austin Kleon’s book, Steal Like An Artist

What didn't go well?

I spent a lot of time designing the illustrative elements and icons but didn’t spend nearly enough time on the front end researching competitor apps and determining what made them each successful. As a result, I ended up making numerous changes during the wireframing stage in order to make certain aspects of my app more logical and user-friendly.

Skills: Sketch, prototyping, vector illustration, and icon design, competitor research

Processes: Focus on design, color coordination, and cohesive layout

Skills gap: Competitor Overview

Solution: Spend more time on the Competitor Overview researching a greater variety of apps for comparison

What can be improved?

Font size and legibility


Skills: Typography

Processes: Using Sketch to adjust the fonts, then additional user testing via InVision prototyping

Skills gap: The font size in the body copy did not conform to UI standards

Solution: I presented my final UI prototype to a mentor, and it was on her advice that I revisited my screens for a final iteration, increasing the body copy from roughly 12 pt to a minimum of 14 pt font size.

FINAL UI

Pair•It_Responsive_Web_05
Pair•It_Responsive_Web_07

©2019 by Mike Powers.