Cookin Thyme

Recipe Library - Responsive website

TEAM: Casey Auve, Caitlin Hartung, Todd Gilbert

TOOLS: Paper, Google Suits, Miro, Figma 

TIME FRAME: 2 Weeks

ROLE: Assisted in all parts equally, main focus was on the UI design of the Home and Search pages


BRIEF: Your team has been hired by a client to create a new website that solves problems for real users on the topic of discovering and selecting recipes.

SOLUTION: Adjustable ingredients and portion sizes on every recipe to customize a meal to user preferences. Quick to access recipe inventory for future use.

OVERVIEW: Cookin’ Thyme is a website centered on helping users find, alter, save, and share recipes quickly.

Research

We began our search for target users by sending out a screener survey to find people who use recipes often when they cook. Our qualifying criteria was anyone who cooked 20 or more times in the last month and who followed through with using a recipe 10 or more times in the last 30 days. Once we found users who met these qualifications we conducted interviews to find out more about their process of using recipes when cooking.

From these interviews we pulled out key information and began looking for trends. From these overall trends we identified we were able to create I Statements that helped us narrow down and pull out more clearly defined insights.

stickynotes_cookinthyme.png

Insights we gathered from the interviews were:

  • Users like straightforward recipes without irrelevant content.

  • Users like to alter recipes based on serving size and ingredients.

  • Users look for recipes based on dietary restrictions and availability of ingredients they currently have at home.

  • Users rely on search engines to find recipes but have more trust in recommendations from social networks.

From the insights we were able to gather, we could better identify a persona for the project. This persona helped guide us through the project and add a more human element to our design process.

 
persona_cookinthyme.png
 

Identify Problem

From the information we identified about our user and their experience in the process of looking for recipes online, we formed a problem statement to assist with staying grounded to their needs:

 

Users need a more organized way to search for, edit, and save recipes so they can focus on the aspects of cooking they enjoy.

 

From this we began to hypothesize ways we could address this problem. Users lets us know they needed a way to search and organize recipes better, while also being able to make adjustments based on dietary needs or portion sizes. They also let us know that they preferred recipes without added stories and recommendations from those they trust. These were all user needs we wanted to meet with our design.

With a persona created and a problem identified, we were able to make a journey map that helped us better understand the .

 
journeymap_cookinthyme.png
 

Ideate and Sketch

Sketches

We conducted a design studio to brainstorming ideas for the defining features of the site. The ability to alter, search, and share recipes were features that stuck out to us very early on and concepts on how to implement them came quickly.

Early Sketches For Recipe Alteration Feature and Search and Filter System by Caitlin

Early Sketches For Recipe Alteration Feature and Search and Filter System by Caitlin

User Flow

We began ideating on our solution with creating a user flow. Identifying how users may go through the site helped us understand where to best place certain features.

 
 

Design

Wireframes

Giving users a quick way to access a recipe inventory was the most important feature. We wanted explored ways to optimize defining features in that inventory such as alter, search, save, and share.

Guest Share SMS Option by Caitlin

Guest Share Email Option by Caitlin

Sign up Option by Caitlin

The ability to save and share a recipe was very important to our users so we explored several options for this. We provided users with the ability to create an account and save directly to the site or send the recipe other ways while using a Guest status. Sharing the recipe on social media, through messenger, or sending a link directly to their email or via text message were options provided in the Guest status.

Social and Browse Pages by Casey

Having a social feature where users could connect, rate, and browse recipes other users had tried came heavily from feedback around many going to other social sites for recommendations. Implementing a social feature within our own site would give users a trusted place they could reference recipe ideas.

Home page variations by Marissa

Early homepage search options had quick filters available along with an additional search button in the menu. The quick filter options were based around popular trending diets to help users find recipes that met certain needs.

Search page and results by Marissa

Due to the consistent feed back around reviews being important to users, we added Average Review Rating as something to explored as a filter option on the search results page. Highlighting the top result with different view options of the remaining results were approaches we wanted to explore given the visual nature of users selecting recipes.

Recipe page designed by Todd

 

Having particular ingredients and serving size able to be altered was an important focus for the site and this early iteration of the feature explored options for implementing that.

User testing helped us see organization of the page and number of options was something to look into improving.

Increasing Fidelity

The feedback we received from testing the wireframes was heavily focused on adding clarity around the recipe alteration feature. We redesigned this page and raised the fidelity to give life to the project and further test how users responded to the new design.

 

Recipe Page by Caitlin

 

Serving Size and Ingredient Adjustment Feature

Recipe Directions

User Reviews and Ratings

Home Screen by Marissa

 

Search page by Marissa

 

Save and Share Login Flows by Caitlin

 

Mobile

Making Cookin Thyme a responsive site was to benefit users who access recipes both on a desktop or mobile device.

 
Mobile home screen by Marissa

Mobile home screen by Marissa

 

User Testing

We conducted user testing at multiple stages in the design process to see how our focus areas of search, alter, save, and share resonated with potential users.

Search

Scenario: You are planning on making a dish for your grandma and her friends, some of which have a gluten allergy.

Task: Find a recipe for gluten-free Chicken Piccata.

User test - search.jpg
User test - search hifi.jpg

Alter

Scenario: The recipe you like is not for the same amount of people you need to cook for.

Task: Adjust the recipe to accomidate cooking for 5 people.

Frame 1(1).jpg
Frame 7(2).jpg

Share & Save

Scenario: Everyone loved the recipe! One of grandma’s friends asked for a copy of it.

Task: Save the recipe for you to use again later and send a copy of it to the email grandma’s friend gave you.

Frame 11.jpg
Frame 12.jpg
 

Checkout the prototype here:

 

Retrospective

Overview

Our team felt satisfied that we designed a useful solution for our users. We believed that our design provided a useful site for users to not only find recipes but to also alter, save, and share them as well.

What Went Well

The team collaboration and motivation went really well with this project. We all activatly communicated ideas and feedback on designs and deliverables within an open slack channel. The brief itself offered a fun and relatable subject that allowed all of us to be a little more creative with our solution.

What I learned

This was my first collaborative project so it was an exciting adjustment to work with others to create a solution. The target user felt like someone we could all relate to so the research and persona building was extremely enjoyable.

There are always some issues when working on a team, though, and we did encounter that. I was the only one with previous web design experience and some of my wireframes did confuse other team mates even after explaining them. In the future, I would probably design more with my team’s skills and preferences in mind instead of at my own level of understanding to avoid any delays or confusion. Overall, this project was a really good learning experience for addressing and correcting these kinds of concerns in the future.

Next Steps

This project left off on a solid spot but we saw an opportunity to provide value to the site and incentivize users to return by incorporating a community feature where users could see reviews left from others and follow each other for future recommendations if they so choose. we would want to explore this feature more and make changes based on user feedback. Testing further is our biggest area of opportunity so that we can build on, and better meet, user needs while adding value to the experience of using our site.

Next
Next

Pillars