RecipEats Social Media Web UI
A UI Pattern Showcase
Home Page
The most prominent content on the Home page is a series of five featured recipes arranged in a carousel. The carousel is used as a way to showcase a featured set of content pieces.
Recognizing a tension between wanting to balance the time between all featured pieces equally (and not just the first in the set) and wanting to minimize features that annoy or distract the user, the carousel could be put on a very slow timer (30+ seconds), or be set to feature a different recipe randomly each time the user navigates to the home page.
Another potential approach is to stitch together a panoramic of the five dishes placed on a singular long table background while the carousel periodically animates their entry/exit out of frame, emulating a video in the style of Wes Anderson.
The carousel pattern is repeated further below in order to display a number of user-submitted photos in a gallery.
There is a static call-to-action invitation for the user to add any of the five featured recipes to their collection. This simple pattern introduces a small amount of interactivity and user ownership to an otherwise content-heavy home page.
Search Results Page
The Search Results page utilizes a card pattern to display all resulting recipes. Each recipe, beyond being clickable, can also be seamlessly added to the user’s collection without leaving the page, using a similar pattern to the call-to-action invitation mentioned previously. In this case the invitation is enhanced with a dynamic hover behavior, using the familiar affordance of a plus-sign and expanding the button to explain what will happen. Upon clicking, the plus changes to a check to demonstrate to the user that something has happened and keeps track of which results the user has added to their collection in this session.
Simple drop down menus are used to create the filter and sorting functionality for instantly refining the search results. The results are displayed with an endless scroll pattern.
My Kitchen Page
On the My Kitchen page, the user sees the recipes they’ve saved to their collection. They can navigate through all of them with a carousel. Though there is room for more to be displayed in a vertical fashion, the pattern is intentionally used to allow the other content on the page to share some visual priority. There are two invitations for the user to create a recipe; this is reflective of the purpose of the site’s emphasis on user-created content and community interaction.
Though not explicitly shown in this mockup, there is a hover-reveal invitation next to the Spoon quantity under the user’s kitchen header. Upon hovering, the mouse reveals a “What’s this?” flag, which invites the user to learn about the website’s kudos/point system.
Recipe Page
The Recipe Content page again features a carousel for displaying a photo gallery near the bottom of the page. Since the primary content is the recipe itself this gallery and the comment section is arranged at the bottom. Below the gallery, there is a static call-to-action invitation asking the user to upload their own photo of the recipe. Within the commenting module, the comment box uses the default form text to invite the user to “Share [their] thoughts…” and provides immediate feedback by only “lighting up” the Post button when they have entered text.
Recipe Creation Page
The page for Recipe Creation makes heavy use of inline editing. Some of the editable fields are multi-item while others are single item. The pencil icon denotes editability; since the entire page is devoted to creating and editing, there is no need to hide the affordances for doing so. The final result will not show any indication for editing, and can be viewed as a draft, or as published content. The editing modules intentionally limit the number of fields currently visible so as to allow the user to focus on editing each piece of text content.
