Author
Graeme Fulton
Project date
June 2015
Skills
IBM Design Thinking, User Research, Usability Testing, Prototyping, Wireframing
Technologies
Balsamiq, Adobe CS, WordPress, PHP, JS, HTML, CSS, Sketch App
Topics
IBMPortfolioDesign

IBM developerWorks Recipes is a developer-focused, user-contributed, step-by-step tutorial website that explains how to create IoT and IBM Bluemix applications. You can find recipes to learn how to build apps using the latest devices, or even contribute yourself by sharing your own project to help other community members.

Overview

This project was carried out over the course of a year, within two phases:

  1. An initial beta version was borne out of an IBM Design Bootcamp studio project using IBM Design Thinking over the course of 2 months within a team of 5 designers. The process included user research, empathy maps, personas, usability testing and prototyping (low-fi to hi-fi).

  2. Creating a production version of the beta site. This second phase involved redesigning the beta version with increased emphasis on user experience and ease of use through user testing.

User centric goals

A hobbyist developer can create and share high quality tutorials (recipes) for an end to end IoT solution, which can be easily understood and built upon.

A hardware partner can contribute quick-start tutorials to showcase their device capabilities, and help customers get set up quickly.

An IBM consultant can up-vote, or sponsor a recipe to increase exposure of valuable and credible content within the community.

Designers
Graeme Fulton, Danny Skinner, Suzy Willis, Edmund Chow, Sam Winslet
Design Lead
Steve Haskey
Related story

"What It’s Like to Design at a Global Scale"
Read Now

Design Process

The whole design process was an iterative one, with each part revisited to be validated with further research, user testing and insights gained from stakeholder meetings.

Exploring users

  • After user research, we generated three personas who would be using the product we were designing, and explored them using tools such as empathy maps to gain a full understanding of the characteristics and motives of our users:

  • These personas were further validated with user interviews and questionnaires.

User Stories & Scenarios

  • We explored As-is and To-be scenarios, and created user stories to understand and convey user journeys and analyse the most significant pain points that we could solve with our product.

Wireframing & Prototyping

  • After ideation sessions, we created and tested ideas by building them into prototypes based on user feedback.
  • This involved lots of whiteboarding and discussion as we moved from low-fidelity prototypes to higher fidelity once our designs had been validated.

Related story

IBM launches Recipes community to spur IoT app development
Read Now

High Fidelity Prototyping

  • After full involvement by every team member in the earlier parts of the project, this was stage where each designer was able to use their more specialized technical skills.
  • Designers with more visual design experience created hi-fi mockups using tools such as Adobe Creative Suite, whilst I created the more interactive coded prototype.

Coded Prototype

  • We worked collaboratively side by side to ensure the coded prototype matched visual mock-ups.

Prototype to production

Redesigning and rebranding the IoT community for a production environment.

Designers
Graeme Fulton, Katy Monaghan, Shaun Lynch
Design Lead
Steve Haskey
Related story

IBM Lures IoT Developers With developerWorks Recipes
Read Now

Phase 2: Redesign

After successful playbacks and positive feedback from the initial prototype created during the studio project, our team was then separated to work on new projects. However myself and design lead Steve Haskey continued working on the IoT community as a side project, eventually recruiting new team members from around the studio to help see the prototype through to a finished product.

UX designer Katy Monaghan joined to lead the user experience of the site, and Shaun Lynch joined as a visual designer whilst I balanced development work with assisting Katy on the UX.

User Journey

  • Katy highlighted problems with the user journey, and ran a workshop with me to address these issues
  • We worked together to come to a shared understanding of the goals of the community, and from there we refined the taxonomy and interface of the site:

User testing

From here we sketched new ideas, revisited paper prototyping and moved through to high fidelity interactions whilst testing on users:

  • Whilst Katy analysed user feedback and did further testing, I worked on the high fidelity interactions such as animations and image loading which were also tested on users:


Press release

  • IBM developerWorks Recipes was launched on the 29th of July, and the story was picked up by over 35 tech news sites.
  • To date the product has been a great success with over 100 high quality IoT Recipes published by the developer community helping customers get started with IoT development and IBM Bluemix.