← back to projects


IBM IoT Recipe Page

Posted on March 30th, 2015 by Graeme

IBM Watson IoT Platform provides simple, powerful application access to IoT devices and data to help you rapidly compose analytics applications, visualization dashboards and mobile IoT apps.

Overview

Before IBM's IoT Business Unit had been formed, I worked with 3 other designers to improve the user experience of the IBM Internet of Things Device Recipe page.

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 to IBM's IoT Platform (at the time called IoT Foundation).

Our task was to redesign this page to provide a short term interim fix for discovering recipes - this solution was more recently superseded by another project I worked on called IBM developerWorks Recipes.

Final redesign

The process

Highlighting the problems

Screenshot: The recipe page before our redesign

We first analysed the main problems with the original page, getting feedback from existing users. We found that:

  • The page did not scale well to larger numbers of recipes.

  • As more recipes got added the page became very long and overwhelming, causing the user to scroll a lot to search for the recipe they needed.

  • The circular recipe badges did not provide enough detail to know what the recipe was about from an overview

  • More recipes were scheduled to be added, making the page also very difficult to maintain.

Exploration and evaluation

Wireframing

After analysing the problems with the original page, we worked on wireframes with visual designer Ed Moffatt providing the following Balsamiq wireframes:

Related story

IBM launches Recipes community to spur IoT app development
READ NOW

User testing and evaluating

I then worked another designer, Sam Winslet to test Ed's mockups, and we found an additional user need for filtering between the different types of recipes. We then made the different types of recipes visible in our prototypes using different colour schemes for each type of recipe, consisting of:

  • Device recipes
  • App recipes
  • Bluemix recipes
  • Reference guides

High fidelity wireframes and development

After user testing our paper prototype solutions, we were ready to move onto higher fidelity designs. We worked side by side, with Sam producing wireframes in Illustrator whilst I coded the website since I had experience with the existing WordPress development environment.

Technical Aspects

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':

Screenshot

Additionally, 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.

The Rubix Cube is is not the only twisty puzzle, there are many more. Learn about the Pyraminx, the 2x2 and 4x4 cubes, the Megaminx on Ruwix.