Competitive analysis

The cooking application market is extremely fragmented with many players, such as  ,  , and  Paprika. In such a saturated market, I knew that my design needed to solve a specific user problem and that the interface needed to be clean and easy-to-use for repeat users.

I had originally intended to create a broader cooking application with multiple features, but based on my research, decided to narrow my focus to one main user story: how users would keep track of their current ingredients and search for recipes.

User research

Based on a survey of 33 potential users, I discovered that:

This meant that my design would need to incorporate the following:

• A responsive web solution, as opposed to a mobile application
• Social sign-on capabilities
• Options to filter recipes by cuisine, cook time, and number of ingredients

User stories, flows, & site map

Based on the refined concept, I created user stories, user flows, and a site map to use as a foundation for my design.

Sketching, wireframing, & prototyping

I put pen to paper for some inspiration, and then translated those sketches into Sketch wireframes and a working prototype for an initial round of testing.

User testing

I tested my prototype with 3 users through UserTesting.com. Some helpful feedback that I received:

Click here to view full recordings of the test results.

Based on the user feedback, I knew I needed to incorporate the following changes into my next iteration:

• Updating the homepage design to have clearer indications of product features
• Adding more dietary preference options, such as gluten-free and paleo
• Making sure there are a plenty of colorful photos of food items throughout the site

I also conducted an additional test to see if the product name was resonating with potential users.

There were mixed responses from users, ranging from "dating app for foodies" to wine pairings to pairing ingredients for menu items. Wine was actually only mentioned 2 out of 13 times, which was less than what I expected.

While the results were inconclusive at best, I took that as a result in itself—I decided to run with the name Pairings, keeping in mind that the product would need good framing and an introductory explanation upfront.

I created high-fidelity mockups of all pages in Sketch to test with users.

Onboarding flow

Feedback I received on the onboarding flow:

• Homepage sections could be more broken up, and adding a third pricing tier would make the design look more balanced and entice users to select a paid option
• Users would like to see an additional step in the sign in process where they can select their dietary preferences

Pantry flow

Feedback I received on the pantry flow:

• Item images are too close together and there is not enough contrast between add and subtract buttons and food pictures
• Users would like to be able to toggle to a list view for adding items, as so many pictures can be overwhelming

I also conducted an preference test on the placement of the pantry detail section to see if users prefered the items to A) appear below all pantry categories or B) to slide out under the selected category:

~65% of users preferred the items to appear below all pantry categories, so I decided to stick with my original design.

Homepage

The final homepage design has distinct sections and more consistant image sizing across the page. I also added a third pricing tier to balance the design and entice users to sign up for a paid option.

Onboarding flow

I added in a page where users can select their recipe preferences as the second step of the sign up process. That way, once users start adding items to their pantry, their recipes will automatically filter according to their preferences instead of having to apply separate filters each time.

Pantry flow

In the pantry flow, item image sizes were increased and more space was added in between items to allow for better scannability. I also included an option for users to toggle between icon or list view when adding items to allow for more flexibility and accessability. Finally, the phrase 'Add Items' was changed to 'Update Pantry' for more consistency.

Click here to view a working prototype of Pairings!

This was a fun and challenging project to design. There were many elements that I had to think through and test that I hadn’t anticipated, like the flows for updating ingredients and sorting by pantry category. While I tried to design in a way to minimize the learning curve for users, it’s a fairly complex product to use, and one that probably requires some level of initial learning.

Through this process, I realized that having well-organized information architecture is KEY to the success of a design, especially when working with a product that has large amounts of data that can be grouped in different ways. It was challenging but interesting to think about this aspect—what categories to show and how to organize the information.