This assignment is done as part of DesignLab’s UX Academy course and focuses on the design patterns and flow used in Epicurious website
Yumm! The images on the Epicurious website can ignite our taste buds and invoke feelings like ‘wanna eat it right away’ for any food lovers. At the same time, for the adventurous people who aren’t afraid of putting on their chef hat, it provides a large range of options to choose from. Every now and then, I put on my chef hat and get into the serious business of finding a recipe to make. I will show the path I usually take when I visit this website. My search is mostly driven by ingredient and I begin from the home page.
I am using a Task flow diagram to represent the same.
I typically access the website directly through the URL and use the Search functionality right away. Once I type in the ingredient, I get a list of options I could choose from. Before I proceed, I use the “Filter” option as a huge volume of search results are returned. This narrows down my list of options and makes it easier for me to find something that I would like to make. I sort it by rating and start browsing. I often see that the name of the recipe has the main ingredients and this also provides a visual cue about the ingredients helping me take a decision.
Coming to the various design patterns used in this website, there are quite a few which have been implemented in a smart way to help me have a good experience.
SEARCH
Considering the vast amount of content Epicurious has, search & filters are very critical for this website’s effective use. The Search box is overlaid right on top of the hero image in the main page drawing my eye to it. In addition, the search icon on the top in the navigation bar is accessible from any page. Once the keywords are searched, the search results are displayed in a new page and I could choose to use continuous scrolling to browse them. All results are provided and I can progressively remove what I do not need by applying filters and I get an immediate feedback. These filters are available in the drop downs and I can choose more than one option for each filter category. The results are automatically updated simplifying my search process and presenting me with manageable content.
CARDS
The content from the search results is presented in cards of equal size, 4 in a row. They are a group of visually digestible portions of information that can be accessed for more details by clicking on them. Each card has an image of the recipe, name, rating and user reviews forming one coherent piece of content for that image. The arrangement of the information and separators help me focus on the content without overwhelming me.
When I hover the mouse on it, a ‘Quick View’ option is visible which shows the recipe in a pop-up box when clicked. This allows me to view a summary of the recipe from the page I was on without having to leave the search results page and thereby reducing the clicks and maintaining an interrupted flow.
Favorites
From each recipe, I can choose to add it to the favorites and it saves the recipe in my ‘recipe box’ which is available for me for later consumption after I log in. It helps me curate a personalized list of my favorite items. The way I do it is by clicking the heart shape or ‘Save recipe’ from the recipe detail page. At the time of saving, I have the option of saving it to a particular collection that I created or can create at that point. It helps me organize my preferred recipe content in a manner that makes it easy for me to access later. For example, I have different collections like Soup, Entree, dessert etc
Overall, using the Epicurious website is easy and one can accomplish their goals. There are many other ways to find content on this website. For anyone interested in cooking, this website has a great collection of recipes that is available for free and more importantly, organized and made accessible in an easy to use pattern.
