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

Collaborative Sketching for Secure & Usable Apps

Embed Size (px)

Citation preview

Page 1: Collaborative Sketching for Secure & Usable Apps

Robert Stribley03/10/17

Collaborative Sketching for Secure & Usable Apps

Page 2: 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

Page 3: Collaborative Sketching for Secure & Usable Apps
Page 4: Collaborative Sketching for Secure & Usable Apps

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

Page 5: Collaborative Sketching for Secure & Usable Apps

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

Page 6: Collaborative Sketching for Secure & Usable Apps

True collaboration means ...

Acknowledging different points of viewAcknowledging contributions even when they conflict or overlap with your own

What Collaboration Is

Page 7: Collaborative Sketching for Secure & Usable Apps

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

Page 8: Collaborative Sketching for Secure & Usable Apps

What We Mean By Sketching

Page 9: Collaborative Sketching for Secure & Usable Apps

Some Advice from the Pros

Page 10: Collaborative Sketching for Secure & Usable Apps

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

Page 11: Collaborative Sketching for Secure & Usable Apps

“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

Page 12: Collaborative Sketching for Secure & Usable Apps

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

Page 13: Collaborative Sketching for Secure & Usable Apps

"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

Page 14: Collaborative Sketching for Secure & Usable Apps

The Collaborative Sketching

Process

Page 15: Collaborative Sketching for Secure & Usable Apps

For the purposes of our workshop, sketching is …

•Quick• Simple•Collaborative

Page 16: Collaborative Sketching for Secure & Usable Apps

All the tools you need:

PaperSharpies

Photo by JasonTank, Flickr

Page 17: Collaborative Sketching for Secure & Usable Apps

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

Page 18: Collaborative Sketching for Secure & Usable Apps

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

Page 19: Collaborative Sketching for Secure & Usable Apps

• 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

Page 20: Collaborative Sketching for Secure & Usable Apps

1. Discuss2. Sketch3. Share4. Iterate

Process

Page 21: Collaborative Sketching for Secure & Usable Apps

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

Page 22: Collaborative Sketching for Secure & Usable Apps
Page 23: Collaborative Sketching for Secure & Usable Apps

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

Page 24: Collaborative Sketching for Secure & Usable Apps
Page 25: Collaborative Sketching for Secure & Usable Apps
Page 26: Collaborative Sketching for Secure & Usable Apps

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

Page 27: Collaborative Sketching for Secure & Usable Apps

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

Page 28: Collaborative Sketching for Secure & Usable Apps

Now, it’s your turn

Page 29: Collaborative Sketching for Secure & Usable Apps

Our Project

Page 30: Collaborative Sketching for Secure & Usable Apps

bump

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

Our Project

Page 31: Collaborative Sketching for Secure & Usable Apps

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

Our Project

Page 32: Collaborative Sketching for Secure & Usable Apps

• 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

Page 33: Collaborative Sketching for Secure & Usable Apps

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

Page 34: Collaborative Sketching for Secure & Usable Apps

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

Page 35: Collaborative Sketching for Secure & Usable Apps

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

15minsOur Project

Page 36: Collaborative Sketching for Secure & Usable Apps

3) Share your sketches with your team mates

15minsOur Project

Page 37: Collaborative Sketching for Secure & Usable Apps

4) Collaborate on a single sketch for this feature

20minsOur Project

Page 38: Collaborative Sketching for Secure & Usable Apps

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

Our Project

Page 39: Collaborative Sketching for Secure & Usable Apps

Share your results with everyone

Our Project

Page 40: Collaborative Sketching for Secure & Usable Apps

Any Questions?

Page 41: Collaborative Sketching for Secure & Usable Apps

Some Resources

Page 42: Collaborative Sketching for Secure & Usable Apps

Books

Page 43: Collaborative Sketching for Secure & Usable Apps

The following apps are all for the iPad:

• Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro• Paper

Sketching Apps

Page 44: Collaborative Sketching for Secure & Usable 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

Page 45: Collaborative Sketching for Secure & Usable Apps

Thank you