Thinking Mobile First For Your Product Story

A smart phone paper prototype is a good way to take a story that is in your mind and put it down on paper. I would like to share an approach that worked very well for me. Get a picture of a Smartphone wire frame from the web, print out multiple copies of the same and use a marker to visualize the story in about five to six frames. You can also use prototyping software such as Balsamiq for creating your rough smartphone prototypes.

First, Let’s take a simple example to see how you can use this approach and put your story down on paper.

Our main characters

Mary Smith, a working mom is busy balancing work and family. She is always on the move and does not have the time to type down her messages. She wants to send text messages to her colleagues by speaking out messages. Most of the time she only has her thumb to operate the software on her phone. John Wells is Mary’s colleague. His job requires him to attend a lot of meetings and so he prefers short text messages rather than voice mails to communicate with his colleagues.

A Trailer for your story 

While telling a long story to your investors, executives, peers or team members during a short presentation, you may have to show a trailer of your story rather than the whole story. In some cases you may also need a trailer to convey the story at a high level before diving into the prototype.

Here is a template we use to compress a long story, of a user accomplishing something, in one screen. We are going to make the assumption that you are convinced about the value of story telling instead of using bullet points to get your point across. Let us look at some of the mechanics of building a trailer for your story.

Composition of the trailer

Put a big picture of the main persona in the trailer. Convey the emotion of the person using speech bubbles. In the case of our example it is a working mother busy with her child and anxious about being late for work. Put a supporting persona on the left. Make one supporting persona the narrator of the trailer.

We have tried this out in presentations to executives, customers and analysts. You can print this out and put it on the wall to generate interest during workshops. You can use this as the opening picture before you show a demo of the prototype, you will build later. This can be the slide where you capture the value propositions for each user. You get the idea. It is useful to build a trailer for your story. Use trailers to understand the essence of your story, enhance the conversation around the story, explore new ideas and convey your thoughts clearly.

Our story as a smart phone prototype

The five frames below help you visualize the story. The constraints imposed by the smartphone screen real estate and the physical limitation of the page where you are drawing this picture will force you to be very creative.

Try to keep your story to just one physical page on a notebook if possible. This approach forces you to focus on the most important aspects of the story. The limited real estate on the screen forces you to think about the most important action on every screen.

You may be forced to leave out some details when you take this approach. That is fine. The purpose is to capture your idea on paper, remove the unnecessary things, refine the idea, perfect the story in your head and tell the story to your colleagues. The final design will change. Your colleagues will build on the idea and make it better.

The smart phone prototype is great to think mobile first, visualize your stories and cut out all the unnecessary things in your story.  It is also very useful to convey the story to your colleagues in user experience design and development. However, it may not be very effective to convey your story to your customers and get your inputs and start a conversation. You may need a bit more real estate to do that. That is why we believe that an iPad prototype is the best way to do that. More on that later...