1

Jennifer HayesSenior Manager, IxD Practice LeadRoyal Bank of Canada

Image source http://productblog.seek.com.au/collaborative-design

Stories from the UX trenchesDesigning together across functions and geographies

2

My teams, our challengesWorking remotely and the nature of our work

Photo by Kai Gradert on Unsplash

3

Ottawa, ONJen in Toronto, ON Zurich

Krakow

Raleigh, NC

Beaverton, OR

Littleton, MA

Richmond, VA

My teams have been pretty remote

4

Engineering-driven solutions – Designer as editor

Wasted time on unused design – Why is your release theme more important than mine?

Problem-solving oriented – Is this the right thing to solve? Do we understand the problem well?

Different workflows and cadence – Silos suck

Distributed teams – It’s lonely on the phone all the time

In the past: A designer’s disconnect

Ref: Kimberley Peter, IBM DesignPhoto by rawpixel on Unsplash

5

Late breaking, unexpected changes – I was already fully committed before you came along

Development teams (and product management teams) are ‘feature’ oriented – Just give ‘em the functionality they asked for

Impractical designs – Gee, I wished you’d talked to me sooner

Distributed teams – What ‘page’ are we on anyway?

In the past: A developer’s pain

Ref: Kimberley Peter, IBM Design Photo by rawpixel on Unsplash

6

A designer’s disconnect

Eng-driven solutions

Wasted time on unused designs

Developers are too feature-oriented

Different cadences

Distributed teams Distributed teams

Impractical designs

Designers are too problem-oriented

Late-breaking changes

A developer’s pain

Hmm… these seem familiar

Ref: Kimberley Peter, IBM Design Photo by rawpixel on Unsplash

7

Our waterfall way of working

Photo credit: Sergey Pesterev

8

Designing way over on the right

Build and RefineDiscover and Envision

This is where we want to be This is where we are

9

A perfect storm for changeIBM Design Thinking and becoming lean

Photo by Annie Spratt on Unsplash

10

A new project, a new context

11

Build-Measure-Learn – Fail early, fail fast

Cross-functional approach – Designing together, bringing non-designers into design

Focus on user outcomes, not output – Solving user problems over building “cool” features

Externalize your work – Getting out of your head and computer into public view, to develop a shared understanding

Continuous discovery – Regular validation of ideas with customers

From waterfall to Lean

Build-Measure-Learn – Fail early, fail fast

Cross-functional approach – Designing together, bringing non-designers into design

Focus on user outcomes, not output – Solving user problems over building “cool” features

Externalize your work – Getting out of your head and computer into public view, to develop a shared understanding

Continuous discovery – Regular validation of ideas with customers

12

IBM Design Thinking launched

Build-Measure-Learn – Fail early, fail fast;

Cross-functional approach – Designing together, bringing non-designers into design; “Radical collaboration”

Focus on user outcomes, not output – Solving user problems over building “cool” features

Externalize your work – Getting out of your head and computer into public view

Continuous discovery – Regular validation of ideas with customers; Restless reinvention – Observe, reflect, make

13

From principles to practiceBecoming a lean team, together

Photo by Rob Bye on Unsplash

14

Product Management

Design Development

“Radical collaboration”

Marketing

Customers

Contentstrategists

Sales

15

Sketching together (my favorite!)

16

We practiced the Design Studio Method

Step 2:Sketcha solution

Step 3:Pitch

the ideas

Step 4:Critiquethe ideas

Step 1:

Understandthe problem

Step 2:

Sketcha solution

Step 3:

Pitchthe ideas

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

17

When did we do it?

Discover and Envision Build and Refine

18

Playback to stakeholders

Design Studio sketching

When did we do it?

19

Collaborate to understand together

Generate ideas quickly from different perspectives

Solidify ideas via shareable artifacts

Provide more accuracy in development estimates

What’s so great about it?

Create shared ownership

Allow for open and honest critique and force participants to defend concepts

20

Who should participate?

Scenario designer Developer

DeveloperQA

UX/Design researcher

Product owner

21

Materials you need

22

Materials you need (cont’d)

A brief introductory slide deck

Personas

Inspiration

Phone/audio

Overhead projector

Caffeine

23

Participate with others in a room

24

Participate from your desk

25

Live sketching in action!

26

Inclusive

Low-cost and fast

Faster processing and sharing

Builds camaraderie

Technical difficulties

Slightly more prep

Moderator might need technical help

Remote sketching benefits and limitations

27

How: Understand

Step 2:Sketcha solution

Step 3:Pitch

the ideas

Step 4:Critiquethe ideas

Step 2:

Sketcha solution

Step 3:

Pitchthe ideas

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

Step 2:Sketcha solution

28

How: Sketch

Step 3:Pitch

the ideas

Step 4:Critiquethe ideas

Step 2:

Sketcha solution

Step 3:

Pitchthe ideas

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

29

How: Sketch

Image source: UIE Webinar, Sketching by Nathan Curtis, Eightshapes

Step 3:Pitch

the ideas

Step 2:Sketcha solution

30

How: Pitch

Step 4:Critiquethe ideas

Step 3:

Pitchthe ideas

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

Step 2:

Sketcha solution

Step 4:Critiquethe ideas

Step 3:Pitch

the ideas

Step 2:Sketcha solution

31

How: Critique

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

Step 2:

Sketcha solution

Step 3:

Pitchthe ideas

32

How: Iterate and refine

Step 4:Critiquethe ideas

Step 4:

Critiquethe ideas

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

Step 3:

Pitchthe ideas

Step 2:

Sketcha solution

33

Step 4:Critiquethe ideas

Step 3:Pitch

the ideas

Step 2:Sketcha solution

34

How: Converge

Step 5:

Convergeon onedesign

Step 1:

Understandthe problem

Step 2:

Sketcha solution

Step 3:

Pitchthe ideas

Step 4:

Critiquethe ideas

35

How: Converge

36

How we do remote design studios

Establishing the MVP

by Henrik Kniberg http://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp

37

Using pattern and widget libraries

38

Sharing with the team

39

Testing early, testing often

40

Lessons learned

41

Moving design further to the leftUnderstanding the problem space

Photo by Nick Fewings on Unsplash

42

Understanding the problem

Discover and Envision Build and Refine

43

Start with context

5W + H

44

What do we know and not know?

45

Who are we making this for?

46

What value should we provide?

47

Lessons learned

Make room for creative thinking – Create the space (virtual, physical) and time for understanding problems – support the endeavor.

Everyone has knowledge – Interdisciplinary teams and cross-functional teams are essential, to harness different perspectives.

People care – About the work they do, about creating great outcomes, and about each other.

Distributed teams work – With a bit of planning, and technology, any collaborative activity with remote participants is possible.

48

Questions?

Photo by Evan Dennis on Unsplash

49Image source http://productblog.seek.com.au/collaborative-design

Jennifer HayesSenior Manager, IxD Practice LeadRoyal Bank of Canada

LinkedIn: linkedin.com/in/jenniferjhayesEmail: Jennifer.hayes@rbc.com

Thank you!

50

Agile / Lean UX / Design Thinking

• Ries, E., The Lean Startup, (2011)

• Gothelf, J., Seiden, J. (editor), Lean UX: Applying Lean Principles to Improve User Experience, O'Reilly Media (2013)

• Ramsey, A., Designing with Agile Workshop: Fast, Effective Methods that Work (Anders Ramsey – Blog, 2011)

• Wodtke, C., A Unified Theory for Designing Just About Anything (Medium, 2017)

• The Design Process: What is the Double Diamond? (The Deign Council, 1944)

• IBM Design Thinking

• Pragmatic Marketing

Design Studio Method

• Curtis, N., Sketching for Understanding (UIE Webinar, 2013)

• Evans, W., Introduction to Design Studio Methodology (LinkedIn – Article, 2014)

• Lindstrom, J., Design Studios: The Good, the Bad, and the Science (UX Booth, 2011)

• Zaki Warfel, T., The Design Studio Method (Agile UX NYC 2012 – Vimeo, 2012)

Referenced methods and tools

51

Remote Collaboration Methods

• Curtis, N., Efficient Sketching Studios With Remote Participants (EightShapes – Blog, 2011)

• Gothelf, J., Designing with remote teams (Jeff Gothelf – Blog, 2013)

Tools:

• IBM Sametime or Slack: For remote stand-ups and daily communication

• IBM Rational Team Concert: Backlog planning

• IPEVO camera: Sharing sketches, live sketching

• IBM SmartCloud Meetings: Sharing screens and sketches

• Google Hangouts: Sharing screens, showing the face of participants

• Balsamiq: Creating wireframes and prototypes from sketches

• Mural: Live collaboration and sharing

• Box: Sharing, editing, storing project collateral

• Bootstrap: UI Component library

Referenced methods and tools