INDIAN ENGINEERING DESIGN FORUM

Connect. Collaborate. Innovate.
7
November
2015

Storyboards for Designing Mobile Apps

What I Learnt at Today's InMobi Bangalore Meetup

Storyboards for Designing Mobile Apps

When it comes to mobile app design, two words always come up in any discussion among designers: storyboards and wireframes. Beginners are always confused between the two. I've developed responsive web apps in the past for which I've done detailed wireframes on pen and paper but I never understood storyboards... until today.

InMobi organizes monthly meetups that are open to the developer community. I had a chance to attend today's Bangalore meetup. The speaker, an experienced designer and consultant named Prashanth, spoke on the app development process. In particular, he informed us how important it is to sketch. Sketching is an essential skill needed to execute storyboards.

He then led us through a series of simple exercises on sketching. He made the point that AnyBody Can Draw (ABCD). In fact, storyboards are not made with the intention of creating masterpieces of art. They can be clumsy and crude. But do they convey ideas correctly? If they do, they are successful.

What exactly are storyboards? They are not, as some people believe, a snapshot of app screens, buttons and navigation links. These fall into wireframes. Storyboards operate at an earlier level. They set the scene, such as a traveller at an airport. They lay out the problem, such as not having a confirmed accommodation in a foreign country that presents a language barrier. They show actions and interactions between users and systems via the app. They show a final resolution where the desired result has been achieved, such as a confirmed bed for the next two nights and directions to get to the hotel.

Essentially, storyboards articulate the problem, including the settings and the actors. It describes an experience one desires, offering a solution to the problem. The burning question of course is, "Are storyboards really necessary when I can convey the same in words?" Well, it's an established fact that pictures are better communication tools than words, especially in this age where people demand instant information and understanding. Today's managers and customers prefer visualization than wordy reports.

As a designer, it's tempting to skip storyboards and jump directly to wireframes. After all, the entire idea is already inside my head. Why bother sketching it? The point is that a designer doesn't design for or design by himself. He designs for customers. Team members need to understand what's in the lead designer's mind. Storyboards help a lot in establishing a shared vision. It's also a tool that help stakeholders to collaborate. In fact, the deliberate action of sketching can help refine the idea.

The speaker gave us a few tips when making storyboards:

  • 3'' x 3'' sticky notes are handy for making storyboards. At a later stage, 3'' x 5'' notes can be handy for making mobile-sized screenshots.
  • Limit yourself to 6-8 panels to communicate one use case. The more panels you add, the more attached you can get to your storyboard.
  • Don't use captions. Instead using comment balloons.
  • Close with a realistic outcome.

After the meeting, I came back and googled for storyboards. With source URLs, I include below a couple of storyboards to give readers a sense of what they really are. I do hope that designers will take the trouble of making storyboards for their next project. I say "trouble" because that's what it may look like if you've never done it before. But once you get into the habit of doing storyboards, you might enjoy the process. You will never again start a project without doing storyboards. Happy sketching!

Example 1: http://hfid.olin.edu/sa2012/s_engr3220-trojan/RORCopies/images/NeedAnalysis/storyboard_foursquare.jpg?1317271700

Example 2: http://dev.cirkus.co.nz/wp-content/uploads/2015/03/Airbnb_Boards3page.jpg

Example 3: http://kharrison.info/blog/wp-content/uploads/2013/09/7_storyboard1_scan2.jpg

About the Author

Arvind Padmanabhan

Arvind Padmanabhan

Arvind Padmanabhan graduated from the National University of Singapore with a master’s degree in electrical engineering. With more than fifteen years of experience, he has worked extensively on various wireless technologies including DECT, WCDMA, HSPA, WiMAX and LTE. He is passionate about tech blogging, training and supporting early stage Indian start-ups. He is a founder member of two non-profit community platforms: IEDF and Devopedia. In 2013, he published a book on the history of digital technology: http://theinfinitebit.wordpress.com.

Comments (2)

  • Sohan Maheshwar

    09 November 2015 at 23:33 | #

    Hey Arvind.

    Great write up of the inDecode event! I'm from the InMobi team. Wanted to know if we can republish this on our inDecode site? We will give full credit and link back to the blog of course.

    Thanks for attending and hopefully see you at our next events :)

    reply

  • AppZoro Technologies

    05 September 2017 at 18:07 | #

    Nice Designing

    reply

Leave a comment

You are commenting as guest.
VIEW MORE