In the Kitchen
Food Network’s recipe app for iOS and Android
Staying Ahead of the Curve with iOS
I worked on numerous new features for the iOS app. One of our latest (Nov 2018) being the addition of personalization into the app. Our goal was to help users find more relevant content, faster. The design challenge was to differentiate this experience from our editorial curated content. Two parts of this project include a new tab on the Explore page, ‘For You’, that gives the logged in users easy access to recently viewed recipes, recipes from TV shows they marked as their favorites and daily dinner recommendations based on their favorite chefs, cooking style and dietary requirements. The second part of the project is an onboarding flow that allows users to record their preferences on chefs, cooking styles, diets and allergies so we can present the user with recipes perfect for their circumstances. More visuals to come!
Some other iOS features I worked on include AR Cupcakes, Search and Recipe Box enhancements and Recipe Reviews. AR Cupcakes was a feature we added to coincide with Apple’s iOS11 and ARKit releases. This feature allows users to create and decorate cupcakes with 3d toppers in there own space. I worked on the newest UX updates including adding stickers and frames to your cupcake scene and the addition of new sharing options and how those would be presented to the user and the recipient (visuals of these new features to come).
I also worked on enhancing the user experience for searching for recipes within the app as well as searching for recipes within a users saved recipes. Below shows a few screens from the updated search flow. In order to promote filters, a tool that was used very little in the past, we added the filters on the search landing page as well as a sticky filter button to the search results page. Another new addition is the use of suggested search terms. Upon searching for a keyword the user is presented with a horizontal scrolling list of prefixes to make the search more specific. With these additions we are hoping to create a more guided search experience and to get the user to what they are looking for faster.
Designing for tvOS
In May 2018, Food Network launched its second Apple TV app. In the Kitchen, as opposed to the Food Network video app, is a recipe app for tvOS. In designing for this app we utilized Apple’s templates and design guidelines for the overall structure of the app but created a very customized experience for the recipe detail page. The app follows a video-first structure. The user first is directed to watch the video associated with the recipe and from there has the option to see the full written recipe.
Look for In the Kitchen in the Apple TV App Store and soon in the Amazon Store for your Fire TV.
Designing for Android
Scripps Network redesigned Food Network’s In the Kitchen app for Android. Prior to the redesign, the Android app was not managed in-house by Food Network’s design team. The app lacked both functionality and design compared to the iOS version. The goal of the redesign was to improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with the app. The goal was executed by translating the iOS app design and incorporating Google’s Material Design recommendations.
IOS HOME PAGE
ANDROID HOME PAGE
IOS RECIPE PAGE
ANDROID RECIPE PAGE
A significant differences between the iOS and the Android app was how users navigated on the mobile app. The iOS app features the menu as a bar across the bottom. However, having the menu located at the bottom was not the best solution for the Android user because the native app bar is already occupying that space. The better solution was changing the bottom menu to the hamburger menu design. The change allowed for consolidation of menu items that, in the iOS version, were hidden within the “My Stuff” menu.
Now that the main menu items were hidden within a drawer, we needed to find a solution for the placement of search. Because browsing is one of the main uses of the app we wanted it to be always visible on the screen and not only within the hamburger menu. Therefore, on all top level screens, we implemented the use of Floating Action Button, a pattern very recognizable to Android users. This button sticks in place at the bottom right corner as a user scrolls through the page, and on click takes the user to the search modal.