Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1lipH8E. Jennifer Hayes, Adam Archer present how they built a mixed team (local&remote) to learn the practice of design studios, making them an integral part of doing UI design. Filmed at qconsf.com. Adam Archer is a technical team lead at IBM working on the JazzHub project, a cloud-hosted software development platform. He spent the early portion of his career as a web application developer on the Jazz product line. Jennifer Hayes is a UXD lead at IBM working on the JazzHub project, a cloud-hosted software development platform, as well as Rational Team Concert.

1. Lean Apart
A Case Study in Agile UX Design for a Distributed Team
Jennifer Hayes, IBM
Adam Archer, IBM
UXD lead, JazzHub
jhayes@ca.ibm.com
Dev lead, JazzHub
agarcher@ca.ibm.com
QCon San Francisco
November 12, 2013
IBM Rational Design
1

2. Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/agile-ux-design-distributed-team
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

3. Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Our team, our challenges
Becoming a lean team
Designing together
Lessons learned
IBM Rational Design
2

5. Our team, our challenges
Working remotely and the nature of our work
IBM Rational Design
3

6. Our team is pretty remote
IBM Rational Design
4

7. In the past: A designer’s disconnect
1. Engineering-driven solutions – Designer as editor
2. Wasted time on unused design – Why is your
release theme more important than mine?
3. Problem-solving oriented – Is this the right thing to
solve / do we understand the problem well?
4. Different workflows and cadence – Silos suck
5. Distributed teams – It’s lonely on the phone all the
time
Ref: Kimberley Peter, IBM Design
IBM Rational Design
5

8. In the past: A developer’s pain
1. Late breaking, unexpected changes – I was
already fully committed before you came along
2. Development teams (and product management
teams) are too ‘feature’ oriented – Just give ‘em
the functionality they asked for
3. Impractical designs – Gee, I wished you’d talked
to me sooner
4. Distributed teams – What ‘page’ are we on
anyway?
IBM Rational Design
6

9. Hmmm, these seem familiar
A designer’s disconnect
A developer’s pain
Eng-driven solutions
Late-breaking changes
Wasted time on unused
designs
Too feature oriented
Too problem-solving
oriented
Impractical designs
Different cadences
Distributed teams
IBM Rational Design
Distributed teams
7

10. Becoming a lean team
In February 2013, we embarked on a mission
to become a leaner, Agile team. It was time
for a culture change in how we worked
together.
IBM Rational Design
8

11. A new project, a new context
IBM Rational Design
9

12. Enough waterfalls, already!
IBM Rational Design
10

13. Learning to be a lean team
IBM Rational Design
11

14. How we put change into practice
IBM Rational Design
12

15. Weekly backlog planning
IBM Rational Design
13

16. Planning poker for sizing tasks with the team
IBM Rational Design
14

17. Group chat for daily scrum meetings
IBM Rational Design
15

18. Development wiki to share information
IBM Rational Design
16

19. Designing together
Getting our sketch-on in design studios,
learning locally, practicing remotely
IBM Rational Design
17

20. Learning to design lean
IBM Rational Design
18

21. How we design together
IBM Rational Design
19

22. Between 5 and 8 cross-discipline team members
get together
Developer
Developer
Business
UX Designer
Business
Users, if appropriate
IBM Rational Design
20

23. The materials we use
IBM Rational Design
21

24. We practice the Design Studio method
Step 1:
Understand
the problem
Step 2:
Step 2:
Sketch
Sketch
a solution
a solution
Step 3:
Step 3:
Pitch
Pitch
the ideas
the ideas
Step 4:
Step 4:
Critique
Critique
the ideas
the ideas
Step 5:
Converge
on one design
IBM Rational Design
22

25. Step 1: Understand the problem (30 – 45 min)
Identify the problem space and scope
Know the business goals
Understand for whom you are designing
Generate some ideas
IBM Rational Design
23

26. Step 2: Sketch, and sketch some more (5 min)
Step 2: Sketching
Based on our definition and constraints, we each sketched as
many ideas as possible in 5 minutes.
Image source: UIE Webinar, Sketching by Nathan Curtis, Eightshapes
IBM Rational Design
24

27. Sketches: Exploring JazzHub projects (5 min)
IBM Rational Design
25

28. Step 3: Pitch and Critique (3 min each)
Image source: The Design Studio Method - Todd Zaki Warfel
IBM Rational Design
26

29. Step 4: Sketch to iterate and refine (5 min)
IBM Rational Design
27

30. Step 5: Converge on a final team design (45 min)
IBM Rational Design
28

31. What’s so great about Design Studio?
Generate 2 weeks of work in one day
Cross-functional viewpoints
Levels playing field – everyone is uncomfortable with sketching
Vet design concepts
Creates team buy-in, everyone invests
More accuracy in development estimates
IBM Rational Design
29

32. When we want to explore or refine ideas
IBM Rational Design
30

33. We do weekly sessions with playback
Playback to team
Design Studio
IBM Rational Design
31

34. How we do remote design studios
IBM Rational Design
32

35. The workspace setup
IBM Rational Design
33

36. The screen setup: Seeing our teammates faces
Google Hangout with visuals only
(We use the phone for audio)
IBM Rational Design
34

37. The screen setup: A web meeting to screen share
SmartCloud (web meeting) window overlays the Hangout
so we can see screens and faces at the same time
IBM Rational Design
35

38. The sketch set up: Sharing sketches with IPEVO
Start up your IPEVO camera and resize the window so that
it’s the same height as the SmartCloud (web) meeting.
IBM Rational Design
36

39. Now you’re ready to start the Design Studio
Now bring the SmartCloud (web) meeting window
to the front to get ready to start the Design Studio.
IBM Rational Design
37

40. Understand the problem
IBM Rational Design
38

41. Brainstorm: Each person gets a row
Adam’s ideas go here
IBM Rational Design
39

42. Affinity groups: One group, one column, one color
IBM Rational Design
40

43. Sketch, pitch and critique
IBM Rational Design
41

44. Converge on one design
IBM Rational Design
42

45. Playback to the team
IBM Rational Design
43

46. Lessons learned…
A summary of what worked well for us
and what needs some tweaking
IBM Rational Design
44

47. The benefits
•
•
•
•
•
•
•
IBM Rational Design
Inclusive – everyone is involved in some way
Fun and easy to do
Possible to do across geographies
Builds camaraderie
Low-cost and fast
Quick to process and share broadly
Gets to implementation with lower investment
45

48. The limitations
•
•
•
•
•
Technical difficulties at set up
Slightly more prep required
Moderator might need technical help
Not everyone has IPEVO cameras
IBM has constraints on what we can expose in cloudbased tools
• Keeping the right balance of disciplines
IBM Rational Design
46

49. Sources for further learning
Articles, webinars and tools
IBM Rational Design
47

50. About the methods
Agile / Lean UX Methods
• 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)
Design Principles
• Hess, W., Design Principles: The Philosophy of UX (Slideshare, 2011)
Design Studio Method
• Curtis, N., Sketching for Understanding (UIE Webinar, 2013)
• Evans, W., Introduction to Design Studio Methodology (UX Magazine – Article, 2011)
• Evans, W., The Design of Design Studio (UX Magazine – Article, 2011)
• Evans, W., Design Studio and Agile UX: Process and Pitfalls (UX Magazine – Article, 2011)
• Zaki Warfel, T., The Design Studio Method (Agile UX NYC 2012 – Vimeo, 2012)
Remote Collaboration Methods
• Curtis, N., Efficient Sketching Studios With Remote Participants (EightShapes – Blog, 2011)
• Gothelf, J., Designing with remote teams (Jeff Gothelf – Blog, 2013)
IBM Rational Design
48

51. Tools referenced, tools used
Agile team practices
• IBM Sametime: Scrum meetings
• IBM Rational Team Concert, Backlog planning
• Hat.Jit.su: Distributed scrum planning poker for estimating agile projects
Sharing sketches, faces and screens:
• IPEVO camera: Sharing sketches
• SmartCloud ™ Meetings for IBM: Sharing screens and sketches
• Google Hangouts: Showing the face of participants
• Balsamiq: Creating wireframes from sketches
Sharing information and requirements:
• IBM Rational Requirements Composer: Playbacks, sharing research and prep for sketching
• Google Drive: For non-confidential ideation on a shared surface
Software development in the cloud:
JazzHub: Task Tracking, Planning, Code
IBM Rational Design
49

52. Questions?
IBM Rational Design
50

53. Thanks!
IBM Rational Design
51

54. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/agile-uxdesign-distributed-team