Sketching Collaboratively UXSG 2016

63

Transcript of Sketching Collaboratively UXSG 2016

Page 1: Sketching Collaboratively UXSG 2016
Page 2: Sketching Collaboratively UXSG 2016

Currently…UX Manager

Previously…User Researcher, Ethnographer, UX Consultant, Service Designer, Product Designer, Customer Experience Specialist @HFI, GrameenPhone, Samsung, Stanford, Startups…

@mphaxise mphaxise

Introductions

Page 3: Sketching Collaboratively UXSG 2016

Expectations

Page 4: Sketching Collaboratively UXSG 2016

Agenda

Exercise 1 Sketching Break10:45am – 11:00am

Exercise 2 Wrap up

Page 5: Sketching Collaboratively UXSG 2016

Exercise 1

Page 6: Sketching Collaboratively UXSG 2016

Exercise 1

Each one gets a sheet

When I say start…Fill up as many circles as possible in a minute

Page 7: Sketching Collaboratively UXSG 2016

Exercise 1

Each one gets a sheet

When I say start…Fill up as many circles as possible in a minute

Page 8: Sketching Collaboratively UXSG 2016

Exercise 1

When I say share…

Pass your sheet to the person sitting on the right

You get a minute again to see and fill more circles

Page 9: Sketching Collaboratively UXSG 2016

Exercise 1

We will continue until a full circle is completed

Page 10: Sketching Collaboratively UXSG 2016

Exercise 1

• Each one gets a sheet• When I say start…• Fill up as many circles as possible in a minute• When I say share…• Give your sheet to the person sitting on the right to you• Continue to fill circles• ……….

• Until a full circle is complete

Page 11: Sketching Collaboratively UXSG 2016

Exercise 1 : Discussion

• How did it go?

• Did you draw outside the circle?

• Did anyone use more than one circle to form objects?

• Did anyone label their objects?

• How did your ideas evolve over each round?

Page 12: Sketching Collaboratively UXSG 2016

Exercise 1 : Discussion

• How did it go?

• Did you draw outside the circle?

• Did anyone use more than one circle to form objects?

• Did anyone label their objects?

• How did your ideas evolve over each round?

Page 13: Sketching Collaboratively UXSG 2016

Exercise 1 : Discussion

• How did it go?

• Did you draw outside the circle?

• Did anyone use more than one circle to form objects?

• Did anyone label their objects?

• How did your ideas evolve over each round?

Page 14: Sketching Collaboratively UXSG 2016

Exercise 1 : Discussion

• How did it go?

• Did you draw outside the circle?

• Did anyone use more than one circle to form objects?

• Did anyone label their objects?

• How did your ideas evolve over each round?

Page 15: Sketching Collaboratively UXSG 2016

Exercise 1 : Discussion

• How did it go?

• Did you draw outside the circle?

• Did anyone use more than one circle to form objects?

• Did anyone label their objects?

• How did your ideas evolve over each round?

Page 16: Sketching Collaboratively UXSG 2016

Early sketch of an idea that became…

Page 17: Sketching Collaboratively UXSG 2016

Twitter

March 2006

June 2006

And now…

Page 18: Sketching Collaboratively UXSG 2016

Twitter

March 2006

“[This sketch] has very special significance – it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down.”

– Jack Dorsey, Twitter & Square

Page 19: Sketching Collaboratively UXSG 2016

Why Sketch?

• Enable communication

• Make abstract concepts concrete

• Iterate on ideas

• Ensure recollection

• Humanize ideas

• Jumpstart collaboration

Page 20: Sketching Collaboratively UXSG 2016

Why Sketch?

• Enable communication

• Make abstract concepts concrete

• Iterate on ideas

• Ensure recollection

• Humanize ideas

• Jumpstart collaboration

Page 21: Sketching Collaboratively UXSG 2016
Page 22: Sketching Collaboratively UXSG 2016

Sketching, else where

“We sit around, stand around those tables and we draw. We still draw. … We would draw and we would make lots of models.” - Jonathan Ive

Page 23: Sketching Collaboratively UXSG 2016

Sketching isn’t

• Difficult

• Drawing

• Only for designers

Page 24: Sketching Collaboratively UXSG 2016
Page 25: Sketching Collaboratively UXSG 2016

Sketching, else where

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

Page 26: Sketching Collaboratively UXSG 2016

Attribute of a Sketch

• Quick

• Disposable

• Plentiful

• Minimal details

• Appropriate degree of refinement

• Suggest & explore rather than confirm

Page 27: Sketching Collaboratively UXSG 2016

Sketching: Basic Shapes

Page 28: Sketching Collaboratively UXSG 2016

Sketching Techniques : Combine the basic shapes

Page 29: Sketching Collaboratively UXSG 2016

Sketching Techniques: Line Thickness

Increasing the weight of the lines to give emphasis to parts of the design.

Page 30: Sketching Collaboratively UXSG 2016

Sketching Techniques: Size

Draw attention to parts of your sketch by drawing elements with varying size.

Page 31: Sketching Collaboratively UXSG 2016

Sketching Techniques: Shading

Shading an area can draw attention away from it. De-emphasize part of the sketch.

Page 32: Sketching Collaboratively UXSG 2016

Sketching Techniques: Selective Detail

To save time, just fill in details for the important bits. Shows what’s important.

Page 33: Sketching Collaboratively UXSG 2016

Sketching Techniques: Isolation

Only sketch certain areas leaving the rest fuzzy.

Page 34: Sketching Collaboratively UXSG 2016

Sketching Techniques: Depth

Use shading to add depth and perspective to make clickable widgets

Page 35: Sketching Collaboratively UXSG 2016

Sketching Techniques: Notes

Don’t hesitate to mix text with your sketches to explain what’s going on

Page 36: Sketching Collaboratively UXSG 2016

Collaborative Sketching…

• Rooted in Design Studio Methodology

• Grew out of industrial design and architecture

• Jim Ungar, Jeff White, Will Evans, Todd Zaki Warfel, many others…

Page 37: Sketching Collaboratively UXSG 2016

Why Collaborative Sketching workshop…

• Communicate ideas effectivity

• Capture assumptions

• Bring out differences in ideas/thoughts/vision

• Move faster

• Generate more ideas, refine faster

• Diversity of experience and expertise

Page 38: Sketching Collaboratively UXSG 2016

Process

• Setup and ice breaker exercise

• Sketch

• Share

• Iterate on sketches and share for a complete circle

• Vote to Prioritize• Discuss and add notes

Repeat one more round of Sketch (Optional)

Page 39: Sketching Collaboratively UXSG 2016

Process : Setup and Ice breaker

• Set agenda/purpose

• Bring use cases/user stories/insights/personas/usability test results

• You are defining the problem, not giving solutions• What is the purpose? In scope/out of scope• What features are necessary? In what priority?• Who is the audience?

• Team doing sketching for the first time?• Ice Breaker Exercise

Page 40: Sketching Collaboratively UXSG 2016

Process : Sketch

• Sketch silently• Limit the time – 5/15 mins• Sketch as much as possible, as many different ideas as

possible• Don’t worry about mistakes or straight lines• Emphasis on quantity over quality

Page 41: Sketching Collaboratively UXSG 2016

Process : Share

• Give your sketches to the person sitting next to you

• Review the sketches silently…• Do you see something interesting?

Page 42: Sketching Collaboratively UXSG 2016

Process : Iterate Sketches

• Start sketching again• Maybe you have a new idea• Maybe you want to build up on an idea• Maybe there is something that can be done better

• Repeat sketching and sharing until one full round

Page 43: Sketching Collaboratively UXSG 2016

Process: Vote to prioritize

• Put up all the sketches on a wall/pin board

• Let everyone review the sketches silently

• Vote : dot voting, limit votes

Page 44: Sketching Collaboratively UXSG 2016

Process: Discuss and add notes

• Start discussing trends• Is there a clear winner?• Are there multiple directions/different solutions?

• Are there ideas that did not get voted up but have potential?

• Add notes to the sketches using post-its

Page 45: Sketching Collaboratively UXSG 2016

Exercise time again…

Page 46: Sketching Collaboratively UXSG 2016

You all work for accuweather.com

You are going to generate ideas/concepts on defining a social experience on the Accuweather mobile app

A mobile app for - Local weather - Alerts- Forecast

Page 47: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

In teams, sketch your ideas for accuweather app

1. Setup, talk about who the users are, what kind of features belong here (10 mins)2. Sketch your ideas silently (10 mins)3. Share 4. Sketch again (5 mins).. Go full circle 5. Put up the sketches for everyone to see (5 mins)6. Vote (10 mins)7. Discuss and add notes (15 mins)8. Sketch once more, incorporating what you just learnt (10 mins)

Page 48: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 1: Setup 10 minutes

You are defining the problem, not giving solutions• What is the purpose? In scope/out of scope• What features are necessary? In what priority?• Who is the audience?

• Goal: Define your use case/scenario

Page 49: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 2: Sketch 10 minutes

• Solution mode• Sketch silently• Sketch as much as possible, as many different ideas as possible• Don’t worry about mistakes or straight lines• Emphasis on quantity over quality

Page 50: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 3: Share 2 minutes

• Give your sketches to the person sitting next to you

• Review the sketches silently…• Do you see something interesting?

Page 51: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 4: Sketch 5 minutes

• Solution mode• Sketch silently• Build on top of ideas you saw

vs new ideas with new inspiration

Page 52: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 5: Share 2 minutes

• Give your sketches to the person sitting next to you

• Review the sketches silently…• Do you see something interesting?

Page 53: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 6: Sketch 5 minutes

• Solution mode• Sketch silently• Build on top of ideas you saw

vs new ideas with new inspiration

Page 54: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 7: Share 2 minutes

• Give your sketches to the person sitting next to you

• Review the sketches silently…• Do you see something interesting?

Page 55: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 8: Sketch 5 minutes

• Solution mode• Sketch silently• Build on top of ideas you saw

vs new ideas with new inspiration

Page 56: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 9: Put up the sketches 5 minutes

Page 57: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 10: Dot voting 10 minutes

• You are given dot stickers, see all the sketches and place your votes on the top 5 ideas

Page 58: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 11: Discuss and add notes 15 minutes

• Start discussing trends• Is there a clear winner?• What do you like? • What do you not like?• Are there ideas that can be eliminated?• Are there multiple directions/different solutions?

• Are there ideas that did not get voted up but have potential?

• Add notes to the sketches using post-its

Page 59: Sketching Collaboratively UXSG 2016

Exercise 2 : Design Social Experiences for a Weather App

Step 12: Sketch again 10 minutes

• Solution mode• Sketch silently• Sketch as much as possible, as many different ideas as possible• Incorporate what you just learnt

Page 60: Sketching Collaboratively UXSG 2016

Post workshop

• Take pictures of all/prioritised sketches

• Make sure these are available to all the members (wiki/SharePoint/Dropbox…)

• Setup a follow –up meeting to talk next steps

• If there is consensus, wireframe/prototype to move forward

• Usability test with prototypes?

Page 61: Sketching Collaboratively UXSG 2016

In the trenches

Afraid of sketching

Want to talk about only one idea

Dominating personalities

Anything else?

Page 62: Sketching Collaboratively UXSG 2016

Variations of the method

Sketch & Pitch

Sketch in groups of 2/3

Sketch in two groups

Sketch on whiteboards

Page 63: Sketching Collaboratively UXSG 2016

Wrap up!

Plusses

Deltas