← back to projects

IBM IoT Recipe page

Posted on March 30th, 2015 by Graeme

A dynamical recipes page for IBM's Internet of Things. 

The IBM IoT recipes page consists of a range of tutorials from companies such as Texas Instruments, MultiTech and ARM. It was designed to help users discover recipes and quick start guides to get their devices connected. 

Previously, the page was just a list of the different recipes which were becoming difficult to maintain. More recipes were scheduled to be added, and the page was also becoming difficult to navigate. 

The changes

Apart from the visual design, the functionality introduced enables users to quickly find recipes of interest to them, by using filter tabs, or by a dynamic keyword search.

To make this possible, custom fields were added to the back-end of the content management system, allowing additional data such as categories to be attached to each recipe. Then based on the catagories, colour schemes were added on the front-end to provide more clarity to the user. The filters also contain a count to showing the total number of recipes assigned to each category. 

Here is a screenshot of when the interface has been both filtered to the category 'Bluemix', and combined with the key-word 'node-red':

Node red bluemix search screenshot

To enable companies to have a direct link to see all of their recipes at once, functionality was added to append a hash search to the url, which would automatically filter the page.