collaborative sketching for secure & usable apps
Embed Size (px)
TRANSCRIPT

Robert Stribley03/10/17
Collaborative Sketching for Secure & Usable Apps

Robert Stribley / @stribsAssociate Experience Director, RazorfishContinuing Education Faculty, School of Visual 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


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

Overview
1. What Collaboration Is2. What Collaboration Is Not3. What We Mean By Sketching4. The Collaborative Sketching Process5. Our Project6. Q&A7. Some Tools & Resources

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

Collaboration is not …Having a meeting to discuss an idea or issue is not collaborationCompleting a presentation or review with discussion or feedback is not collaborationAssigning roles and deliverables to team mates is not collaborationProviding feedback in person or via email is not collaboration
What Collaboration Is Not

What We Mean By Sketching

Some Advice from the Pros

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

“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

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 BuxtonSketching User Experiences

"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 RoamThe Back of the Napkin

The Collaborative Sketching
Process

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

All the tools you need:
PaperSharpies
Photo by JasonTank, Flickr

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

- 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.”

• 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

1. Discuss2. Sketch3. Share4. Iterate
Process

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


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



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

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

Now, it’s your turn

Our Project

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

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

• 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

Design a Key App FeatureIn 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 individually3) Share your sketches with your team mates4) Collaborate on a single design
Our Project

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
30minsOur Project

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

3) Share your sketches with your team mates
15minsOur Project

4) Collaborate on a single sketch for this feature
20minsOur Project

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

Share your results with everyone
Our Project

Any Questions?

Some Resources

Books

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

• 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 by Todd Zaki Warfel
Further Study

Thank you