cooper

Journal   A blog about design, business and the world we live in.

OneNote for Interaction Designers

Whiteboards are cool, I guess. Fast, easy, familiar. But really, they're nothing compared to digital sketching. At Cooper, we use digital sketching in almost all of our projects, and almost always in OneNote. In the next few posts I'll share how we use it and why we think it's awesome, see what you think. But first, to whet your appetite, some example drawings from Cooper designers straight out of the program.

These aren't meant to be finished designs, of course, but examples of how communicative and illustrative designers can be with their earliest ideas using the tool, and doing so very quickly. Each of our designers has their particular way of working, but in general we share the same setup.


The Setup

[From the video:] When roughing out a framework for a design, we want a tool that supports getting ideas out there, quickly and easily, letting everyone on the team see the ideas to discuss them in real time, and then make it easy to edit and modify them. The best setup we’ve found so far for this combines four technologies.

  1. A Tablet PC with a stylus, in slate mode
    Note that the speed and flexibility gains we're looking for only occur when using a stylus with a slate computer like the Tablet PC.
  2. A projector or large shared monitor
    The shared monitor helps the the team see the design ideas in process and engage them in real-time. (This is part of a larger practice we call pair design.)

  3. Microsoft OneNote
    OneNote’s handwriting tools make it quick and easy to sketch out ideas, copy and paste them for modification, scale them, share them the client, and export them to other programs if need be.
  4. Snag-It or similar, fast, stylus-aware screen grabbing tool
    To overcome some of the limitations of the program, Snag-it helps us make handwritten lines into graphics that we can draw on top of and make selections more easily.

We have at times challenged this setup and its components, seeking to overcome its limitations, but nothing has yet come close.


In Design Meetings

With this setup, one designer will sketch ideas, talking out loud as he does it. Those ideas might be conceptual, might describe the environment, and in many cases are screen drawings. Using these drawings, he’ll propose ideas, discuss them with the team, and annotate the discussion alongside the drawing as he goes along.


When considering competing ideas, he’ll draw them both out so they can be discussed. When an idea is dumped, he’ll write down the reason why and put a red line through it.


When an idea needs to be tweaked, he’ll copy and paste the original and modify the new one.


When diagramming scenarios, he’ll connect screens with arrows that describe the point of interaction and the result.

Once the big ideas are iterated to satisfaction, we’ll often move to a more formal drafting software, like Adobe Fireworks to test out the screen ideas at a more realistic pixel level. We rarely stay in OneNote for the whole of a project.

Using this setup, teams are able to concretely iterate ideas: quickly and in a cheap, fast, malleable medium that easy exports to other tools and easily meshes with subsequent steps in the design process. Once designers start working this way they rarely want to go back.

That's an overview of the setup. Next we'll discuss some of the nuts & bolts and how to use OneNote for research and presentations.

14 Comments

OneNote for Interaction Designers: The Nuts and Bolts | Cooper Journal
[...] March 6, 2012 | Comments (0) In a prior post I explained how Cooper uses OneNote as a tool for Design Meetings. In this post I'm going to presume you're a designer and eager to get a quick primer to the tool. [...]
Ola
Thanks for the walkthrough. Just a question on the choice of tools from someone who's not familiar with this setup and OneNote. What are the key benefits from setup compared to an iPad with for instance Wacoms Bamboo stylus and software?
OneNote for Interaction Designers by Cooper | Jason Csizmadi
[...] OneNote for Interaction Designers | Cooper Journal [...]
Michael
Thanks for sharing your way of working with OneNote. I've been using OneNote for about 2 years now and it's a great tool even in a lot of activities around design meetings. You can capture notes during research, share design drafts and even use it for documentation. Since most people use MS Outlook this helps even more to integrate it in the daily workflow with meeting notes and tasks. One of the features I like most is tagging, that allows for quick access to certain parts of a page and let you organize your digital stuff more easily. Looking forward to the next post. Michael
Dan Saffer
Too bad OneNote is Windows only.
Michael
@Dan. Yes indeed, that's bad. I switched from Mac to Windows a year ago just because OneNote. However, it's not as bad as it may seem, since OneNote really shines if you use it with a Slate PC for note taking. And with the current Mac products there isn't one similar to let's say a Lenovo Helix, which may be a great device with OneNote.
John Labriola
I've seen this approach, but for me past tablet PCs were clunky. Now the new hybrid ultrabooks or Surface Pro, could make this a more viable option if you like OneNote. I prefer doing the same thing but with Evernote and their Skitch app. Much easier and seamless, also works on basically any device. And you can sync the work across the devices and share with colleagues without the hacks.
OneNote for Interaction Designers: The Nuts and Bolts | Cooper Journal
[...] March 6, 2013 | Comments (0) In a prior post I explained how Cooper uses OneNote as a tool for Design Meetings. In this post I'm going to presume you're a designer and eager to get a quick primer to the tool. [...]
Chris
@Ola: I find the iPad too low of resolution (admittedly I have an older one), the styli I've tried too imprecise, and the software less fully featured than what I need. (Vectors, people, vectors!) @John: This sounds like a setup worth checking out. Thanks for the heads up.
Michael
@John: Thanks for the tip. Evernote and Skitch seems good and even works on the Android phone. I kept using OneNote a lot because it also integrates very well in Outlook.
OneNote for IxD Research and Presentation | Cooper Journal
[...] is, as you've seen in the prior posts (OneNote for Interaction Designers and OneNote for Interaction Designers: the Nuts and Bolts, awesome for design meetings. But it's [...]
What is your chosen UI/UX Design tool for concept meetings? - Microsoft UK Faculty Connection - Site Home - MSDN Blogs
[...] OneNote for Interaction Designers [...]
Обзор свежих материалов, январь-март 2013 « Юрий Ветров об интерфейсах
[...] OneNote for Interaction Designers Chris Noessel рассказывает о том, как компания Cooper использует MS Office OneNote в работе над проектами. Это мощнейший инструмент для ведения заметок, куда более функциональный и гибкий чем Evernote. Часть 2 и 3. [...]
Ricardo aka @surfaceprobro
Regarding SnagIt, would you still need to use that if you simply use OneNote's Windows+S command for screen capture, or OneNote 2013's "Send To OneNote" clipping window?

Post a comment

We're trying to advance the conversation, and we trust that you will, too. We'd rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.