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.
The challenge was to create a new experience for the user in a familiar manner, despite the lack of direct competition for comparative study.
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.
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.
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.
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.
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.
For the user flows, I started with 3 user scenarios:
View ratings and recommendations
View, alter, and share recipes.
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
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.