“It looks like its holding up the clouds.” “It’s like a sky jelly fish.” “I love how the light moves across it along with the sound.”

These were some of the comments heard at TED2014 about Skies Painted with Unnumbered Sparks, a collaboration between sculptor Janet Echelman and data artist Aaron Koblin. This monumental sculpture stretched 745 feet, from the Vancouver Convention Centre where TED was held, over an open-air plaza on the edge of the city’s bay and up to the top of the Fairmont Waterfront hotel. Every night during the conference, dozens of people could be seen across the street setting up cameras and tripods to capture the glowing spectacle. Meanwhile, underneath the sculpture, even greater numbers of people gathered, most of them with their cell phones out…

From Steve Jobs to Albert Einstein, John F. Kennedy to Nikola Tesla, several of history’s greatest thinkers relied on a secret weapon: doodling. Yes, doodling–the thing you find yourself mindlessly doing every time you’re in a meeting.

Brown, an international speaker, creative consultant, and one of Fast Company’s Most Creative People of 2011, defines doodling as “making spontaneous marks (with your mind and body) to help yourself think.” That’s because doodling isn’t about zoning out or creating an artistic masterpiece to hang on your walls–it’s about staying engaged, processing information, and communicating that onto a page.

And it has serious benefits. A 2009 study from the University of Plymouth discovered that when participants listened to a recorded phone call, those who doodled during it recalled 29% more information than those who didn’t. And a 2011 article from the journal Science reported that when science students drew visualizations of course material instead of using words, they forged a deeper understanding of the concepts and could more effectively communicate them to others.

However, most people never learn how to use doodling strategically, Brown says. “Most people’s exposure is in an art class or in a specific creative pursuit,” she says. “It hasn’t been pulled into other fields.“ Here are five tools to help you start using doodling to your advantage.

LEARN THE VISUAL ALPHABET

Working adults already have a basic grasp of visual language. We encounter enough symbols in our daily lives to know that an arrow implies direction or causation; a triangle sitting atop a square is a house or a building; in emails and texting, a colon followed by a closing parenthesis means a smiley face. Brushing up on the basics can teach aspiring doodlers to break down any complex concept into easy lines and shapes.

“It takes you back to your ABCs,” Brown says. “This is not rocket science. You have to start somewhere. It’s very akin to learning to read or write. You don’t bust out with some Keats before you (learn to) write.”

Stick figures can be particularly effective symbols when brainstorming with others. “When you put a face into a visual, people get enlivened, because it’s almost like seeing a part of yourself reflected back to you,” she says. But as animating as they can be, stick figures won’t make sense in every context, so Brown recommends using the icons that are most familiar and relevant to the topic.

DISCOVER YOUR “DOODLE DNA”

Everybody has a different learning style. Auditory learners absorb more when they’re just listening, while kinesthetic learners do better when they’re up and moving. Some learn best when they’re just reading and writing, while others are drawn to images and pictures.

But just because we’re not all visual learners doesn’t mean we can’t all be enlightened doodlers. Even Brown, who travels internationally to help companies doodle their way through organizational problems, says visual thinking doesn’t come naturally even for her–the person who literally wrote the book on doodling.

“People have orientations toward certain types of language, and I have more orientation toward written language,” she says. “That’s where I shine. I’m really clumsy when I attempt to draw. It’s not native, and it’s not my specialty.”

Just as there are different learning styles, there are also five main doodling styles. John F. Kennedy, for example, was a known word doodler, preferring to write and repeatedly trace certain keywords when deep in thought. Dwight D. Eisenhower, on the other hand, was a picture doodler, drawing more literal images in the margins. Other people might opt for abstract shapes, human-like cartoons, or images of nature, such as flowers and trees.

“Most people have had an experience in their life where they know they are best functioning,” Brown says. Recognizing what she calls your “doodle DNA,” or your go-to images and patterns, can help identify the tools that best facilitate your thinking.

DON’T STRESS THE DOODLE

One of the biggest obstacles to becoming a successful visual thinker is what Brown calls “the Shadow”–the little voice in the back of your head telling you to quit before you embarrass yourself. Brown recommends overcoming that hesitation by practicing in real time. Putting on a presentation while you doodle nonstop, for example, creates an improvisational environment that emphasizes listening and spontaneity over editing and critiquing.

To translate what you’re hearing into help visuals, listen for metaphors and similes that express abstract ideas in universal terms. Look out for narrative cues (“I have three proposals to discuss today”) that can help structure your doodles. If you miss a key point, keep going. If you misspell a word or mess up your sketch, don’t go back and fix it.

“There has to be a suspension of judgment,” Brown says. “It’s like Pictionary. You just have to go. Forgive yourself and move on.”

DOODLE WITH FRIENDS

The doodling experience is almost always enhanced when coworkers put their heads together. Attacking a problem with one shared visual helps groups come to consensus and see the bigger picture more quickly. Members are also more engaged in the conversation, and their contributions are all accounted for on paper instead of left hanging in the air.

“It so clearly improves the experience that it’s sometimes hard for me to be in a group where that’s not possible,” Brown says. “It’s like going to a party and there’s no alcohol. Not that alcohol is required to have fun, but it makes things better, it’s more fun, it goes faster, people share more. Everything about it is a win-win.”

Because meetings are almost universally loathed and often inefficient, they’re the perfect place to apply doodling. A study from the University of Pennsylvania’s Wharton School found that meetings where attendees incorporated visual thinking were 24% shorter than those that didn’t, but starting small is key. You won’t see the benefits if you burst into the conference room and demand that everybody start scribbling.

“I like it when people start off in pairs or small groups,” Brown says. “Meetings are a huge opportunity, but have to be treated with the courtesy of people needing to be oriented.”

ESTABLISH A “WHITEBOARD CULTURE” AT YOUR COMPANY

Getting your colleagues on board with doodling can be an ambitious and monumental task. “A lot of people will say, ‘I want to infuse this into my culture,’ and that’s like saying, ‘I want to infuse creativity into my culture,’” Brown says.

To create what she calls a “whiteboard culture,” a work environment that encourages visual thinking at every stage of the process, Brown recommends modeling the behavior first. Keeping a whiteboard at your desk makes your doodles public, piquing the interest of curious co-workers and letting closet doodlers know they’re not alone. Inviting a coworker you’re close with to do a 10-minute brainstorm session at the whiteboard, for example, establishes a no-pressure environment that’s open to anyone looking to participate.

“You’re not making a sales pitch, you’re just doing it,” says Brown, who cites Zappos, Facebook, Google, and Disney as examples of companies with whiteboard cultures. Some companies she’s worked with have even set aside entire offices for the purpose of having employees write on the walls and get creative.

“It behooves people to understand there’s a huge opportunity, and there’s really nothing to lose,” Brown says. “It’s all benefit and no cost.”

The design process of a product can be seen as a conversation designers have with stakeholders, peers and testers. The more fluent this conversation is, the more likely the resulting product is flawless and user centred.Prototypes are consequently essential enablers for this process, useful at different stages with different levels of fidelity. From communicating and co-designing the initial concept (for instance with sketches on a piece of paper) to validating the solution with existing users (for instance simulating features on a branch of the production code base).

Because of the importance of the execution of an idea and because everything about the execution counts (look, behavior and performances), the low fidelity prototypes quickly become inadequate to take final decisions. And this is the reason companies like Apple are known to bring solution proposals very far in the development process, ending up comparing almost final products.

So, after you have done with the sketches and wireframes, what is the best way to prototype with high fidelity a today’s user experience?

Before trying to answer this question there is another aspect I think it worths considering. Today’s software behavior can be very complex and animations, which can be a result of a direct manipulation of UI elements (e.g. dragging) or a transition between states, are now a big part in UI design. As Apple put it:“Although animation enhances the user experience, it is far from mere “eye candy.” Animations give users feedback or context for what is happening in the user interface”.The extra information they provide permits you to optimize what presented at any given time, eventually removing the need of some UI elements.For this reason my initial answer could be: the best tool to prototype today’s user experiences is a tool where it is easy to create ad-hoc animations.Standard transitions, like the ones applications like Briefs lets you use, in my opinion, suffice until you have not rendered designs (a.k.a. wireframes). After that point chances are the pixel perfect UI doesn’t get enough support from the transitions.

There are different ways you can create custom animations, but to have a better feel of the final behavior the prototype should have a minimum of interactivity. For this reason I would be careful in considering tools like After Effects which are made to export rendered videos. While with this type of output you can simulate powerful hardware accelerated effects, the playback of pre-rendered videos, because heavily compressed, is just not meant to be easily controlled. Of course you could convert it to a sequence of PNG images, but this is definitely not practical for longer animations.A new solution which is getting traction recently is Framer. With Framer you can easily script animations of individual UI elements using JavaScript, which of course lets you also add any logic required, it even has an official Photoshop exporter. While scripts are very easy to tweaks, and text files easy to version or collaborate with, it is hard to design a complex animation with independent elements without any kind of preview. Very far from what you can get from a WYSIWYG approach.I think this leaves us with a couple of options, applications born to animate first but where then an interactive layer was added to open a new world of possibilities. I am talking about software like Adobe Flash, Adobe Edge Animate orTumult Hype (only for Mac). My final answer is hence: the best tool to prototype today’s user experiences is a tool designed to create ad-hoc animations and where you can add logic into it (not the other way round).

Unfortunately I don’t have much knowledge of Hype, but from what I can see it seems very well designed and I guess starting with a new canvas it had the benefit of learning from the mistakes the very mature Flash did. Edge Animate should be very similar to Flash, but the logic layer is very likely not as solid. Flash still offers more scalability, since you can build proper apps with it, but, if it is just quick and throwable prototypes that you need, the simplicity of Hype may be enough and with Edge Animate could let you champ the so trendy HTML5.

Because I started using Macromedia Flash 14 years ago, this is obviously my weapon of choice. I don’t really have any reason to try something similar just less mature and less featured. But if you have to start from zero with ActionScript, and you don’t have to build a tailored framework from scratch for your prototypes for better integration with your workflow, I would probably suggest you to learn basic programming in JavaScript and go for the other 2 options. Or, if you really want to stick to Flash, use the older version of its programming language (ActionScript 2.0) which is way more scripting friendly.

I am recently focused on mobile apps and my process is generally as follow. If I have remote stakeholders, I start making linear animations, these could also be as little interactive as a click through, and I illustrate the interactivity with a trace of the finger on the screen (a bit like this animated walkthrough made with Hype). The next level, suitable for instance for shortlisted concepts, should be able to run on a device, some interactivity should be at least simulated (e.g. a pan triggered by a tap). For this purpose I programmed some draggable components which, when placed in the editor timeline, allow me to control the playback of the linear animation using standard gestures (tap, pan or pinch). Then I package the Flash movie in an Adobe AIR app so that it can be installed on the mobile device (this process can easily be automated). It’s all very fake, but it feels so real.Few tips for Flash+AIR: set the movie speed at 60 frames per second, use the GPU as renderer and use Penner’s custom easing curves (so that the animations properties can easily be communicated to and implemented by the developers).

A practical example I can show you is the deletion confirmation process for my app Instants, it took me 20 minutes to build the prototype when implementing the solution natively in the app, after I was happy of how it felt, took another 6 hours.Try to delete the fullscreen photo in the Flash applet below (in case you are lost, double tapping the stage reveals temporarily the active areas).

If you have any questions or want a live demonstration of my workflow, get in touch!