- Graeme Fulton
- Project date
- March 2015
- Responsive Design, Mobile First, WordPress, CSS3, Balsamiq, Wireframing
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.
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.
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
After analysing the problems with the original page, we worked on wireframes with visual designer Ed Moffatt providing the following Balsamiq wireframes:
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.
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':
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.