Story boards look a lot like comic strips. A narrative sequence is divided into scenes, with each scene showing us some important event in the story. Like any good story, they need to make sense and follow some basic rules to work.
This Dilbert strip works because it’s funny, but it also uses narrative turn taking so we know how to read it.
Literal uses of storyboards
Storyboards started in the film industry, originally as a way of literally showing what each scene would look like before committing anything to film. The process was time consuming, with lots of effort going into making each frame actually resemble what was happening. A similar approach is used in business where storyboards are used to plan out PowerPoint presentations, with scenes corresponding to slides.
Adding notes to each scene
By appending notes about the physical movement of actors and props between scenes theatre directors are able to use storyboards to check the logistics of a play. User interface designers can also use storyboards to show the end to end website experience through a series of wireframes, complete with appended notes detailing what needs to happen in each scene.
In this image, pretty much the entire web page has been shown in the wire frame, although notes could be added to the image to describe business rules or expected movement between screens.
Blending the comic strip with wireframes, we can map the user experience in more emotional terms with the wireframe showing the actual user interface, and the thought bubbles showing the emotional response or thought process of the user, as here:
How to develop your own storyboard
I like the idea of using storyboards to track the user experience, particularly the ability to combine doodles or other visual representations and attaching emotional narrative to capture thought process or emotional response. Storyboards are best used for illustrating a sequential events such as customer experiences, business processes, film scores, presentations and books. As long as you have a clear view of what type of information you want in each scene, they can be a powerful and easy to use tool as you develop a shared understanding of some situation. Here is an example:
- Situation: we are going to concept check our cool new disruptive business model for the virtual allotment
- Simple Rule: each scene will show a part of a chosen customer experience from start to finish, with notes to explain what’s going on
- Structure: a short group session will decide on names for each scene (sign up, choose allotment plot, buy virtual seeds, plant virtual seeds, check growth)
- Create Scene Details: lots of post its, crayons, and markers will add free-form notes to each scene
- Sort Scene: make sense of each scene, settling on a key message, interaction and some major notes
- Step back and take a look at the big picture
Make sure everyone is happy with the storyboard, check for any improvements and move on. A great way to bring a group together and develop a shared understanding of a sequence of events. As in the case of our theatre directors checking for logistics, all storyboards need to be checked to see how they work behind the scenes. Have fun!