Back to Blog

Ocado Recipes tvOS app is launched

Ocado Recipes tvOS app is launched

The pioneering meal app running on tvOS

When Apple announced the launch of tvOS to coincide with the release of the eagerly anticipated 4th generation Apple TV, they approached Ocado Technology to find out whether we could design one of the first apps available for the new operating system. Always ready for a challenge, our mobile team was keen to get involved. However, they were working within a tight time frame of three to six months, in which they had to create an app from scratch. This meant being pragmatic and realistic about what was achievable.

Recreating the Ocado iOS for tvOS was out; it would be time consuming and ultimately yield little reward. Ocado customers are already able to fill their virtual baskets on their laptop, mobile, tablet, Apple Watch and Alexa as well, allowing them to do their shop out and about, on the sofa at home, or even in their kitchen with their smart speaker, while rummaging through the kitchen cupboards. All these mediums allow for direct interaction, whereas with a TV there is the additional in between step of a remote. Because of this, an Ocado app for tvOS seemed less likely to take off as a popular option, as it risked feeling laborious and clunky in comparison to the methods already available. So the mobile team set about brainstorming other valuable apps that would translate well to TV.

This is how the idea of the Ocado Recipes tvOS app surfaced, stemming from the popular recipe feature already available on Ocado mobile apps and webshop, which provides thousands of delicious recipes for every occasion. This seemed like a great focus for tvOS, as it would lend itself well to a very visual platform and require less detailed interactions than an e-commerce app. The project could have been as simple as an almost identical copy of the iOS version, but the team knew that the format, while perfect for a mobile app, would not transfer well to TV.

Screen shot of the tvOS app

Ocado Recipe tvOS app

I spoke to Niket Shah, one of Ocado Technology’s talented mobile developers, who led the tvOS project.

“Building an app that feels natural on this platform was a challenge. The addition of a remote means we needed to make sure we didn’t over-complicate the visuals. We sought advice from our UX designers to find out what features work best with TV. This helped us come up with the vision for the app and led us to the conclusion that we needed a very clean layout using focus effects, meaning the focus is placed on one item at a time, while also keeping it familiar and on brand.”

Choosing recipes on the tvOS app

Choosing a recipe – the focus is placed on one card at a time using the trackpad.

The team decided on a card based layout – each recipe has it’s own card which comes forward when scrolled over, and the recipes themselves are navigated in a step by step process, rather than having all the content on one page, as had been the case with the iOS app.

“Our philosophy for the app was to make the content we had as visually appealing as possible, so we chose layouts that were content-orientated, with everything else fading into the background.”

Recipe cards on tvOS app

Recipe card – gives an overview of the dish

Given that tvOS was yet to be released when the team started working on the project, this was new territory. In order to make sure the app was a success, the team went around the Ocado Technology offices asking for opinions with their sketched out layout options.

Based on the feedback they received, they iterated upon their design until, after some tweaking, they had the final product you’ll find on your Apple TV screens today.

Ingredients on tvOS app

Swiping the touchpad down takes you to the ingredients.

The app was not only a first for Ocado in terms of its operating system, but it was also the first project to be completed exclusively using Swift, the open source programming language created by Apple (to read more about iOS and Swift developments see Our five favourite talks from iOS Con 2017)

“Using Swift for the code base for the entire app was great! We could take advantage of Swift only features such as protocol extensions in a type-safe, less error prone way. It was interesting experimenting with architectural decisions on a playground, iterating them in a safe place before putting them into the actual code base.  

“We made the decision early on to split up the code in our main app into CocoaPods, the Swift dependency manager, which helped us reuse a lot of the core logic we already had from the recipe feature within our iOS apps. This meant that we could focus on the UI and user experience while designing the tvOS app.”

Ocado Recipes has been a roaring success and continues to maintain its position in the top ten tvOS food and drink apps. If you’re looking to try something new tonight, why not give it a go? Or Alternatively, if this article has got you thinking about what new and exciting apps you could be making yourself, why not check out our job openings?

Holly Godwin, Technology Communications Assistant

Scroll Up