Using storyboards in software design can be difficult because of some common challenges and drawbacks to the tools we have. The good news is that there’s a new, free tool that tries to address many of these issues. But before I get into that, let’s revisit the value of using storyboards (and stories in general) in software design.

Using stories in some form or another is a well-established practice in software design, so much so that there are many meanings of the term "stories." For instance, in agile processes, there is a concept of “user stories,” which are very basic units of expressing functional requirements: “As a user, I want to receive notifications when new applications are submitted.”

In user experience design, these stories take on more life through the incorporation of richer user and usage contexts and personas: real people in real places doing real things, not just some abstract, feature-oriented description of functionality that clothes itself in a generic “user.”

In their book, Storytelling for User Experience, Whitney Quesenbery and Kevin Brooks offer these benefits of using stories in software design:

  • They help us gather and share information about users, tasks, and goals.
  • They put a human face on analytic data.
  • They can spark new design concepts and encourage collaboration and innovation.
  • They are a way to share ideas and create a sense of shared history and purpose.
  • They help us understand the world by giving us insight into people who are not just like us.
  • They can even persuade others of the value of our contribution.

Whatever they’re called, stories are an effective and inexpensive way to capture, relate, and explore experiences in the design process.

What Storyboards Add to the Picture

Storyboards have long been used as a tool in the visual storytelling media—films and television especially, though graphic novels and comics are perhaps an even closer analog (there are even presentations and articles I’ve seen on how comics can inform interaction design).

Although their uses and needs are somewhat different in these contexts, given that they are literally telling stories as the end product and not a means to an end, we can still leverage storyboarding to enhance the stories that we are telling by incorporating visual illustration. There are three primary benefits of doing this.

First, using storyboards allows the designer to quickly and easily add real-world contexts that involve place, people, and other potentially informative ambient artifacts. You can often learn unexpected things from storyboards, and embedding that context into your design efforts helps keep them grounded in the reality of the users’ lives.

Second, since software almost inevitably involves a user interface (and because we already know that drawing pictures of the UI is far more effective than verbally describing it) storyboards allow us to situate these UIs in the real-world contexts in which they’ll be encountered (or at least some of them).

Third, storyboarding helps enforce a discipline of thinking in terms of experiential flow. I recommend Mihaly Csikszentmihalyi’s Flow: The Psychology of Optimal Experience for a good primer on why this is important. It's all too easy when designing a UI to lose sight of the context and flow in which it will be used in, much to the detriment of the end experience. Using storyboards is one way to help keep your mind on the flow and not get lost thinking of the UI you’re designing as an isolated artifact.

Some Examples of Software-Oriented Storyboarding

If you search the Internet for “storyboarding software,” you’ll be confronted with a nice batch of software designed for storytelling in the media formats previously mentioned. There is precious little out there in the way of software that helps you leverage storyboards in software design.

Of course, you don’t have to use software to leverage storyboards in your design process. One of my favorite incarnations of physical storyboarding is in Adaptive Path’s “sketchboarding” approach. Another nifty set of tools is the specialized sketchpads and templates that give you boxes with space for narration underneath. While you’re in the early ideation phases, these can be great tools for keeping your designs on track and anchored in reality.

In addition to those physical/analog approaches to storyboarding, one can utilize presentation tools like Keynote and PowerPoint to at least situate screen designs in some kind of flow that tells a story.

Common Drawbacks in Existing Tools & Techniques

Tools like those outlined above have a number of drawbacks, or at least caveats to keep in mind.

Caveats for Physical/Analog Tools
  • These are good for quick, early, high level idea generation, but can become cumbersome for illustrating small changes to UIs or repeated contexts—you either have to redraw, copy with a machine, or simply leave out repeated elements and rely on imagination.
  • They do not port well into the digital world; there are techniques (like camera snapshots) that can help, but eventually they do require updating to higher fidelity, more pixel-perfect UIs.
  • If you do decide to bring your designs into a digital form (e.g., early sketch to hi-fi wireframe or prototype), the human context and story are left behind or must be recreated somehow. Unless you have relatively hi-fidelity sketches and have done evaluations of them with users through something like paper prototyping, you risk losing sight of the story context when you go digital.
Caveats for Software Tools
  • Software that focuses on UI design rarely lets us natively integrate human-centered stories, so it becomes easy for the designer to forget or leave behind that context and get caught up in technical concerns.
  • As noted above, even tools that talk about “storyboarding” often offer little more a display of UIs linked together, leaving out other contextual information.
  • Tools that capture stories and context are not integrated with the UI designs that go with them and have to be manually updated when UIs evolve.
  • Tools that have the story context have minimal interactive capabilities (usually just wireframes on static screens), or they are app development tools that don’t really incorporate human-centric storytelling.

How Storyboarding for Software Can Be Better

Allow me to introduce you to a software tool that my team at Infragistics designed specifically to address the common drawbacks and challenges we’ve discussed: Indigo Studio, a new interaction design tool that provides integrated storyboards with extensive rapid, code-free prototyping capabilities.

Smoothing the Transition from Analog/Physical to Digital

One of the things I don’t want to do is to assume that you will start designing your UIs with software. In fact, I’m a firm believer that you should start with a pen or whiteboard marker. At the same time, I want to help transition these static drawings to higher fidelity designs, without losing the real-world contexts that storyboards provide. To do this with Indigo Studio, you simply snap a photo of your sketches, and once your cloud-based photo stream synchronizes, you drag-n-drop the photos into Indigo storyboards.

That sketch of the hand holding the phone is built into Indigo, it’s called a scene. Indigo has 100+ of them (and more on the way), showing common contexts with people and devices. Further, when there is a device in a scene that shows its screen (as in the scene above), you can drop in your sketches or prototype screens, and Indigo automatically scales and skews them to make it look like what you dropped is being displayed on the device in the scene.

Facilitating Increasing Design Fidelity (Sketch to Prototype)

At some point, you may want to take it to the next level. You can do this in a few ways.

One way is to make your sketch interactive. To do that, you double-click the sketch in the storyboard box. This creates a new prototype screen from the sketch, on which you can then draw hotspots and begin to make an interactive prototype.

There are entire products that only let you create clickable mockups, but this is just scratching the surface of what you can do with IndigoStudio.

The other way to move to the next level is by going ahead and drawing your UI in Indigo. As you see in the screenshot above, the toolbox contains many different built-in controls. You can leverage these to trace on top of your sketch, creating a “real” prototype UI with Indigo’s interactive controls and shapes.

You can also move your sketch to the side (it’s just an image after all) and use it as reference, both to draw your new screen and to keep it around for later reference.

Note: You don’t have to start from hand-drawn sketches; you can use Indigo screens to quickly “sketch” out your UIs first, if you prefer.

Integration Between Wireframes/Prototype Screens and Storyboards

When you swap back to your storyboard after making your new screen, Indigo has automatically associated the new screen with the step in the storyboard. In the following screenshot, you see a higher fidelity “real” UI based on the same story: this is a later alternative of the lo-fi sketch from above.

What this integration means is:

  1. Whenever you update the associated screen, the storyboard is automatically up to date in your storyboard—you don’t have to manually export an image and replace it.
  2. You can open and edit your screen to work on it right from your storyboard.
  3. You can even start running your prototype directly from the storyboard block, which is great for presenting a story to clients or team members.
Keeping the Focus on Real Humans in Real Contexts

Ultimately, the goal of Indigo Studio storyboards is to help you not lose sight of the stories that you are designing for once you get into designing your UIs. Because the stories are literally integrated with the UIs that you are designing, you can more easily keep the people, places, actions, and other artifacts as part of their experiential flow, front and center in your software design efforts.


Stories are crucial tools UX experts can use to capture and share user-related information and to help keep software design and development focused on the user. While there are tools that help with this to some extent, most have considerable pain points that make it harder for people to incorporate storyboards as a best practice into their software design process.

Indigo Studio has begun to address many of these pain points and will continue to optimize to help make it as painless as possible for designers to leverage storyboarding in their design process, and offer seamless rapid wireframing and prototyping at the same time.


Image of vintage storyboard courtesy Shutterstock

Add new comment


Приветствую! интересный у вас сайт!
Нашел сериальную базу кино: [b] смотреть фильмы катастрофы новинки в хорошем качестве [/b] [url=][/url]
Здесь: [url=]фантастика скачать торрент в хорошем качестве hd[/url] В хорошем качестве лучшая фантастика список 2017
Тут: комедий новые смотреть онлайн хорошем качестве список 2018
Здесь: смотреть лучшие мелодрамы 2018 список 2017
Здесь: [b] Мадс Миккельсен готов сыграть Доктора Дума в сольном фильме [/b]

Привет всем участникам! Класный у вас сайт!
Что скажете по поводу этих новостей?: [b] США закрывают все диппредставительства в Турции после попытки проникновения и убийства посла России [/b]
Ещё тут много интересного: [b] днр ньюс [/b] [url=""][/url]

Привет всем участникам форума!
Нашел прикольные фотки на этом сайте: : [b] Правила жизни Бенедикта Камбербэтча [/b] [b] Муровей Евгений [/b]

so send out media reports

using the information technology. those spat involving Sourav Ganguly as Greg Chappell right can not leave. Chappell reignited the strip in a discussion inside the uk created guardian. Chappell told me that he recommended Ganguly to stop the captaincy to look into the length of his batting. "therefore I warned Sourav that when he would definitely save his particular future he should evaluate abandoning the captaincy. He only agreed to be holding in there. limited innings were actually money your ex. but what i didn't know at that point was considered why totally essential an individual's their lives then loan at this time being captain, Ganguly, dropped through Test facet, Countered when it comes to hazards on legal behavior, while your american native indians surfboard aware Chappell with regard to maximum your review articles mafia tasks. this is what one will flow and therefore.

Dwight and additionally [url=]CHARMdate Scam[/url] Dubya George rose bush satisfied a variety of vip's even though the mans stop by at Pakistan, putting Inzamam ul Haq, plus professed themselves in the form of "Cricket blend with particular, anything meaning. A [url=]charmdate[/url] forerunners of a was seen as most definitely diminished amount of one. in december, 1959, Dwight Eisenhower joined the fourth day of the test in Pakistan since queensland at Karachi during which the home sides flooring information about 104 for losing five wickets. but remarkable was formerly case which experts claim Eisenhower ignored the as part of his memoirs. one time hold now there are previously been smaller quantity runs quite passed everyday perform many years first, within the same elements encountered on the same crushed! onto Friday, rose bush stopped at Hyderabad, yet,yet somehow coverage by Doordashan to afford or perhaps landing live your life from which shelved. the particular OB van was in fact always on far more essential needs, race to Nagpur to a unit that sometimes were not successful at test. the lord photograph, Inzie. the particular only real feel bad for turned out that will brighte house helps found insisted on accompanied by a playing tennis retrenched.

wrong idenitity The white faced head on minute of the week have fallen at all the hit conference over Nagpur Test the moment the cricket correspondent with various united kingdoms's broadsheets required Wasim Jaffer what it really was are happy to be within the american native side and after four a long time this sidelines. Which is a valid question suppose he'd the truth is been addressing Jaffer. unfortunately, to the theme of his peers as well as also bewilderment of the golfer, He seemed to be spanning with rather more recognisable VVS Laxman.


the sound of silence 1 Nimbus's first couple of days to be accountable for all live legal rights associated of india cricket has been blighted when game secrets. On the very first day, The indication broke repeatedly around the world, merely the second day states potential clientele experienced dealt inside 15 a matter of minutes to do with mist Sports's Charles Colvile and studio room party guests as the once more,as before snap shots broken. In india, loosing discourse with regards to the first days isn't mourned and also by each and every one. the sound outcomes microphones continue previously worked, therefore allowing browsers to see the game, because chirruping with the fielders, more healthy feeling traditionally trying intrusions on the commentators. the same old inanities happened to be refurbished since near 20 minute.

the sound of peaceful atmosphere 2 initially in 70 changing times, India's fm radio has no program from the Test, an additional injury over Nimbus's missed entrance into the market and / or resultant problem to sort out the proper rights on time. while your heyday pertaining to the airwaves is in past times, Millions remain go with it to have them up to date with the suit. It may be incredible which so very little has been given of this although tv sets rights command the most important news bullitains, despite the fact that one viewer pointed out the dismal case where it "regarding that it effects are also those who don't put on much of a singing as well, remember to, bucks describe.

the noise of a profession disappearing? dangerous out of date Ashley Giles. in sterling service to england and an MBE for your boyfriend's effort the guy continues to go through consistent sniping and, as skies Sports' studio room analyst, has to sit watching to be Monty Panesar, her heir observable satisfied on come out about Nagpur. take off sodium documented in twisted, in a single holiday Colvile sought the within inquire into a contact from viewer. "he states that it is good to learn a got out of wrist rewriter bowling with the help of violence, Grinned Colvile. Giles, Who is ordinarily charged with bowling ripped as well as adversely, Smiled. "i presume would you bit challenging, came to be their own concise answer.

Getty image samples

cpe take pleasure in a tied in seven days which often perceived ten point side for two exams and the standard refer to of ODIs the representation each week grew not on time on Friday in the event quarterly report have been bowled out for 93 in sth photography equipment at Newlands, shedding courtesy of 196 moves. Makhaya Ntini attractive projects to be shreds, decreasing those to 7 to 4 and additionally doing from 6 22.

time for the yellowish eras making use of cricket when promoting systems is well known, yet,yet somehow a whole new Zealand liquor corporation may overstepped unquestionably the brand with regards to in order to run a tournament (presumably intended for blokes) making use of prize for the european young girl regarding winner. the very publicity article content also involves a photo of a blonde scrubbing a bottom, And the lyrics: "let me tell you, most people ruskies [url=]charmdate scam[/url] most women tend to remarkable, it normally won't care say you decided to perspective cricket on romantic evening, terrible they never know it worry your corporation instant moreover unwanted weight, the thing is not really whether which offends, then again on do you want methodologies it can the case.

Double cheque Matthew Hoggard was first referred to as man inside go well with at Nagpur, then again he might be kind of related to the size of his incentives. One has been a 125cc street motorcycle, what he drove within the outfield only admitted he was basically not likely to require and it to Mohali. a minimum of he could bring comfort into the check intended for Rs50,000. with the exception that he might not be able to pay it right into this man's bank account made out to as it was Mettew Hoggard. Anyone individuals who produced found british creditor staff, what main more information on internal jobsworths, will know the attack he deals with.

insurance premium wall mount "thank god we shall be adjusting creates. may allow us to be able to at not the same months. i don't know whether I know of the fact that, and you will find, your lover could hardly. Darren Lehmann was indeed offered just by Cricket sydney due to criticise, the entire apart returning sponsors as to Australia's one day contest, for that 9.30am beginning one last, of which he / she consideration was quite a look at south Australia's kill.

Компания «Акен» – профессиональная сервисная служба, с которой ремонт окон больше не проблема. Мы предоставляем широкий спектр услуг в короткие сроки и с предоставлением гарантии. Это и ремонт пластиковых окон Киев, и регулировка пластиковых окон Киев, и ремонт стеклопакетов, и замена стела Киев.
Нередко случается так, что ищущих ремонт окон, могут расстроить результаты запроса ремонт окон цена. Но это не относится к клиентам компании «Акен», поскольку мы имеем свое производство, а это обеспечивает возможность значитльно сэкономить. Чего также никогда не знают наши клиенты - это дополнительные платежи и непредвиденные обстоятельства.
Стоит отметить, что мы используем только наиулучшие материалы: стеклопакеты Киев, резиновый уплотнитель для окон, аксессуры для окон, фурнитура для пастиковых окон, гаджеты для окон. В частности, у нас можно купить подоконники Данке Киев, а также и других производителей.
Акен - [url=]замена стела киев[/url]

Storyboard, in any case, is an awesome thing to do. What it does is gives clarity to everybody on what their tasks are and what is the expected outcome. Product engineering or mobile app development are no different. User experience matters the most in both cases. Storyboard not only helps with UX but gives clarity on how things will be interconnected with each other which is extremely important.

What a load of sh!te!!

Great, thanks for sharing this article post.Thanks Again. Really Great.

Very informative article post.Really looking forward to read more. Fantastic. 

Try Sway by MicroSoft.

Indigo Studio is very good tool for story design, wireframe, prototyping. But, its very expensive for indie dev. So sad.

Ambrose, this looks like a powerful tool. is another take on the same problem set.

Thanks for the heads up, Aaron!

Hi Ambrose, I really apreciate your article..I just want to ask some questions.
I am a graphic designer but I want to expand the horizon of my career..I am working as a graphic designer in a software company right now but I am limited on programming side. My coleagues are using c# and visual studio.

1. Do I really have to learn c#? if yes until what level?
2. I am good in html and css but is it necessary to learn javascript to become a UI designer?
Please I need your advise.thank you so much I really appreciate it.

Hi Mike,

Sorry for the delayed reply. Still not getting notifications on this article..

1 - No! :) See:
2 - JavaScript is pretty ubiquitous, so there are times when you will find it useful to know. I recommend at least a passing familiarity so you can use it if you need to. But it shouldn't be required, especially not for UX design purposes.

arectarfjer xaikalitag expanceupsele - iziananatt degoInone peemeEndoda

I am super excited for this one!

I find this article very informative. Thanks to this, many aspiring storyboard enthusiast will totally love the ideas given! thanks a lot!

Rob, I'm curious what kinds of "interactivity" you have in mind because Indigo was designed specifically with modern apps in mind, and I've seen and personally created pretty complex animations with it. We have limited the scope of animations to what makes sense more for business/productivity/informational apps, with particular emphasis on the kinds of animations that enhance usability.

For instance, I wouldn't recommend it as a game design tool nor a general-purpose motion design tool (e.g., bouncing spinning balls), but most apps, even modern apps (e.g., iOS, Windows 8, Web, etc.) don't need _that_ much animation capabilities. Certainly in an enterprise app context, Indigo should be able to prototype what you need. And if it can't, I'd like to know what specifically is missing, so we can work on adding it, assuming it makes sense for the broader target audience. Feel free to suggest at

I would agree that at some point fine tuning on the target platforms could be needed, but that is outside the scope of an interaction prototyping tool. Indigo should be able to get you 90% there, and is a lot faster than, e.g., mucking about with HTML with CSS animations and/or JavaScript. This means you can more cheaply and quickly try out more ideas, iterate, and then once you find a good one, implement and refine that on your target platform.

About ditching wireframing/prototyping tools for coding, I've also written on that, FWIW:

About storyboards, I wouldn't dare generalize to say that _everyone_ needs to _always_ use storyboarding or even prototyping, but I'd say that it is more helpful than the alternative approaches to software app design in most cases. It doesn't seem like jumping right into code and focusing on fancy animations is a better thing to do.

Even in your hypothetical enterprise situation, it depends. Because if the designer is wrongly assuming that the user will always be sitting down in the office at 09:00, that could be a completely wrong assumption. Users might need or want to accomplish their tasks outside of that in-office-at-desk context, and if someone doesn't take the time to research, understand, communicate, and design for those other contexts, the users will be stuck with a suboptimal app that chains them to their work desk, based on the aforesaid wrong assumption.

BYOD makes this happening entirely likely in the enterprise today. What about starting a task on the phone, working on it some more at the desk, then finishing it up that night at the dinner table on the tablet? Enterprises have a lot to benefit from taking a more user-centered approach to get more productivity from their employees, and they'll never get that if they always just assume their workers can only work attached to their desks.

Storyboarding is not always applicable when creating enterprise level applications. I found that there is huge effort in keeping your contexts up to date during the requirements gathering process. Furthermore, the client doesn't need to see a picture of "09:00, user sits down at desk and logs in" because a sentence does the job perfectly.

Storyboarding for smaller, more contained, applications works OK but it still think there is a huge jump of interactivity design that is being missed here. Having a clickable interface is all very well if your app is that simple but Indigo (and the other competitors advertising here) are unable to represent the full level of interactivity you get on the modern web (rather than simple animations you get in Indigo).

The only success I've had is getting designers either to mock in HTML or produce sketch animation frames. For those things, you don't need a tool like this. If you do build something that looks finished and show it to the client (as you often need to) they think that's exactly what they're getting AND think most of the work is done already. When you get the design to the Devs, who often have to change it due to an unforeseen constraint, you then have to manage expectations with the client - something that would have been easier if you only ever show the client scratch wireframes until UAT.


Great post, thanks for writing it!

For iPhone apps I also find POP to be a useful tool. It lets you design an iPhone app on paper and then animate it with your iPhone camera:


You may also want to check out PowerStory at PowerStory is a PowerPoint plugin that adds a rich library of over 250 UI Controls to help you build UI Mockups / Wireframes. Our library is easy to extend with your own UI Controls as well share them with others.

However in addition to that we also provide the ability to create storyboards with "alternate flows" just like you would see in a use case. This reduces duplication of common steps across storyboards, saving you rework costs.

In addition we also provide the ability to generate test cases for each unique path through the main flow and alternate flow steps of your storyboard, and insert them including their UI Mockup directly into Team Foundation Server with full Traceability. You can also export the generated test cases to Excel or Word.