This document provides an overview of collaborative sketching for designing secure and usable apps. It defines collaborative sketching as a process involving quick, simple sketches done with paper and markers. The process involves discussing an experience to design, individually sketching ideas within a time limit, sharing sketches with the team, and then iterating on a collaborative sketch. It then presents an example project of developing a secure file-sharing app for proximity-based sharing between users. The document guides attendees in applying the collaborative sketching process to design key features for the app.

1. Robert Stribley
03/10/17
Collaborative Sketching for Secure & Usable Apps

2. Robert Stribley / @stribs
Associate Experience Director, Razorfish
Continuing Education Faculty, School ofVisual Arts
Introduction
My clients have included:
• Bank of America, PNC,Wachovia
• Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential,
Smith Barney,T. Rowe Price
• Boston Scientific, Nasonex
• Choice Hotels, RCI, Sotheby’s International Realty
• Computer Associates, EMC
• Ford, Lincoln, Mercedes-Benz, MBFS, Smart
• FreshDirect
• AT&T, Nextel
• Day One, Red Cross, Smithsonian National Air & Space Museum
• Pearson,Travel Channel,Women’s Wear Daily

4. It is hardly possible to overrate the
value… of placing human beings in
contact with persons dissimilar to
themselves, with modes of thought
and action unlike those with which
they are familiar.
– John Stewart Mill

5. Overview
1. What Collaboration Is
2. What Collaboration Is Not
3. What We Mean By Sketching
4. The Collaborative Sketching Process
5. Our Project
6. Q&A
7. SomeTools & Resources

6. True collaboration means ...
Acknowledging different points of view
Acknowledging contributions even when they
conflict or overlap with your own
What Collaboration Is

7. Collaboration is not …
Having a meeting to discuss an idea or issue is
not collaboration
Completing a presentation or review with
discussion or feedback is not collaboration
Assigning roles and deliverables to team mates
is not collaboration
Providing feedback in person or via email is not
collaboration
What Collaboration Is Not

8. What We Mean By Sketching

9. Some Advice from the Pros

10. “The great benefit of drawing is that when you look
at something, you see it for the first time.”
Milton Glaser

11. “There are
techniques and
processes whereby
we can put
experience front
and center in design.
My belief is that the
basis for doing so
lies in extending the
traditional practice
of sketching.”
Bill Buxton

12. Attributes of a Sketch
• Quick
• Timely
• Inexpensive
• Disposable
• Plentiful
• Clear vocabulary
• Distinct gesture
• Minimal detail
• Appropriate degree of refinement
• Suggest & explore rather than confirm
• Ambiguity
Bill Buxton
Sketching User Experiences

13. "There is no more powerful way to
prove that we know something well
than to draw a simple picture of it.
And there is no more powerful way
to see hidden solutions than to pick
up a pen and draw out the pieces
of our problem.”
Dan Roam
The Back of the Napkin

14. The
Collaborative Sketching
Process

15. For the purposes of
our workshop,
sketching is …
• Quick
• Simple
• Collaborative

16. All the tools you
need:
Paper
Sharpies
Photo by JasonTank, Flickr

17. Defining Collaborative Sketching
Origins
• Rooted in Design Studio
Methodology
• Grew out of industrial design and
architecture
• Jim Ungar and Jeff White,“Agile user
centered design: enter the design
studio - a case study,” 2008

18. - Stefan Klocek,“Better together; the
practice of successful creative
collaboration,” Cooper Journal
Defining Collaborative Sketching
“Ninja. Rockstar. Gifted
genius. Many of the ways
we talk about creative work
(whether it’s design or
development) only capture
the brilliance of a single
individual.”

19. • To communicate your ideas effectively by
visualizing them
• To benefit from the participation of your
colleagues
• To quickly generate ideas and refine
through iterations
Goals

20. 1. Discuss
2. Sketch
3. Share
4. Iterate
Process

21. Discuss
• Discuss the experience you’re sketching
• What’s its purpose?
• What features are necessary?
• How would you prioritize them?
• Who’s the audience?
• You’re not discussing layout or design
• Just the problem you’re trying to solve
• Remember:You’re not sketching yet
Process

23. Sketch
• Sketch silently
• Limit your time – 5, 10 minutes
• Sketch as much as possible, as many different ideas
as possible
• Don’t worry about mistakes or style
• Emphasis is on the quantity of ideas not the quality
of sketches
Process

26. Share
• Review your work with your team
• Keep it short – 60 seconds each
• You provide feedback to others
• What you like
• Questions about what didn’t work for you
• You’re not grilling your colleagues and this isn’t a
competition
Process

27. Iterate
• Now sketch again if you need to
• Or collaborate on a high-level design (e.g. via
whiteboard)
• Then begin your design with a more informed view,
with more and better ideas
• Iterate on your design
Process

28. Now, it’s your
turn

29. Our Project

30. bump
Develop a secure, proximity-based file-sharing
app for mobile phones.
Our Project

31. Consider … Who is the audience?
• Journalists
• Whistleblowers
• Activists
• Others?
Our Project

32. • Ability to find and connect securely with another user
• Must be proximity based
• Must not use wi-fi or cellular data
• Must allow for accessing and sharing files
• Some level of file details and description
• Anything else? Profile, settings?
• Any key differentiators?
Key Features

33. Design a Key App Feature
In your teams, design a key feature for the Bump app
1) Discuss detailed requirements needed for file browsing
and selecting feature
2) Sketch your ideas for the feature individually
3) Share your sketches with your team mates
4) Collaborate on a single design
Our Project

34. 1) Discuss the file browsing and selecting feature in detail
• Develop a list of key requirements (E.g. filtering, sorting, file
details, selection options, etc)
• Remember: No sketching yet
30mins
Our Project

35. 2) Sketch your ideas for this feature individually
• Remember:You’re sketching quietly for now, not sharing yet
15mins
Our Project

36. 3) Share your sketches with your team mates
15mins
Our Project

37. 4) Collaborate on a single sketch for this feature
20mins
Our Project

38. Repeat this process for a second feature:
Finding and connecting with a user
Our Project

39. Share your results with everyone
Our Project

40. Any Questions?

41. Some Resources

42. Books

43. The following apps are all for
the iPad:
• Adobe Ideas
• Bamboo Paper
• Muji Notebook
• Penultimate
• SketchBook Pro
• Paper
Sketching Apps

44. • User Interface Design in an Agile Environment: Enter the Design
Studio – Jim Ungar and Jeff White
• Design Studio Methodology – Article by Will Evans
• The Design Studio Method – Presentation byTodd Zaki Warfel
Further Study

45. Thank you