Lean Apart
A Case Study in Agile UX Design for a Distributed Team
Jennifer Hayes, IBM

Adam Archer, IBM

UXD lead, JazzHub...
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/agile-ux-design-distributed-t...
Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Our team, our challenges

Becoming a lean team

Designing together

Lessons learned

IBM Rational Design

2
Our team, our challenges
Working remotely and the nature of our work

IBM Rational Design

3
Our team is pretty remote

IBM Rational Design

4
In the past: A designer’s disconnect
1. Engineering-driven solutions – Designer as editor
2. Wasted time on unused design ...
In the past: A developer’s pain
1. Late breaking, unexpected changes – I was
already fully committed before you came along...
Hmmm, these seem familiar
A designer’s disconnect

A developer’s pain

Eng-driven solutions

Late-breaking changes

Wasted...
Becoming a lean team
In February 2013, we embarked on a mission
to become a leaner, Agile team. It was time
for a culture ...
A new project, a new context

IBM Rational Design

9
Enough waterfalls, already!

IBM Rational Design

10
Learning to be a lean team

IBM Rational Design

11
How we put change into practice

IBM Rational Design

12
Weekly backlog planning

IBM Rational Design

13
Planning poker for sizing tasks with the team

IBM Rational Design

14
Group chat for daily scrum meetings

IBM Rational Design

15
Development wiki to share information

IBM Rational Design

16
Designing together
Getting our sketch-on in design studios,
learning locally, practicing remotely

IBM Rational Design

17
Learning to design lean

IBM Rational Design

18
How we design together

IBM Rational Design

19
Between 5 and 8 cross-discipline team members
get together
Developer
Developer

Business

UX Designer
Business
Users, if a...
The materials we use

IBM Rational Design

21
We practice the Design Studio method

Step 1:

Understand
the problem

Step 2:
Step 2:

Sketch
Sketch
a solution
a solutio...
Step 1: Understand the problem (30 – 45 min)

Identify the problem space and scope
Know the business goals
Understand for ...
Step 2: Sketch, and sketch some more (5 min)

Step 2: Sketching

Based on our definition and constraints, we each sketched...
Sketches: Exploring JazzHub projects (5 min)

IBM Rational Design

25
Step 3: Pitch and Critique (3 min each)

Image source: The Design Studio Method - Todd Zaki Warfel
IBM Rational Design

26
Step 4: Sketch to iterate and refine (5 min)

IBM Rational Design

27
Step 5: Converge on a final team design (45 min)

IBM Rational Design

28
What’s so great about Design Studio?
Generate 2 weeks of work in one day
Cross-functional viewpoints
Levels playing field ...
When we want to explore or refine ideas

IBM Rational Design

30
We do weekly sessions with playback

Playback to team

Design Studio

IBM Rational Design

31
How we do remote design studios

IBM Rational Design

32
The workspace setup

IBM Rational Design

33
The screen setup: Seeing our teammates faces
Google Hangout with visuals only
(We use the phone for audio)

IBM Rational D...
The screen setup: A web meeting to screen share
SmartCloud (web meeting) window overlays the Hangout
so we can see screens...
The sketch set up: Sharing sketches with IPEVO
Start up your IPEVO camera and resize the window so that
it’s the same heig...
Now you’re ready to start the Design Studio
Now bring the SmartCloud (web) meeting window
to the front to get ready to sta...
Understand the problem

IBM Rational Design

38
Brainstorm: Each person gets a row

Adam’s ideas go here

IBM Rational Design

39
Affinity groups: One group, one column, one color

IBM Rational Design

40
Sketch, pitch and critique

IBM Rational Design

41
Converge on one design

IBM Rational Design

42
Playback to the team

IBM Rational Design

43
Lessons learned…
A summary of what worked well for us
and what needs some tweaking

IBM Rational Design

44
The benefits
•
•
•
•
•
•
•

IBM Rational Design

Inclusive – everyone is involved in some way
Fun and easy to do
Possible ...
The limitations
•
•
•
•
•

Technical difficulties at set up
Slightly more prep required
Moderator might need technical hel...
Sources for further learning
Articles, webinars and tools

IBM Rational Design

47
About the methods
Agile / Lean UX Methods
• Ries, E., The Lean Startup, (2011)
• Gothelf, J., Seiden, J. (editor), Lean UX...
Tools referenced, tools used
Agile team practices
• IBM Sametime: Scrum meetings
• IBM Rational Team Concert, Backlog plan...
Questions?

IBM Rational Design

50
Thanks!

IBM Rational Design

51
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/agile-uxdesign-distributed-tea...
Upcoming SlideShare
Loading in...5
×

Lean Apart: A Case Study in Agile UX Design for a Distributed Team

1,612

Published on

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.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,612
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Lean Apart: A Case Study in Agile UX Design for a Distributed Team

  1. 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. 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. 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. 4. Our team, our challenges Becoming a lean team Designing together Lessons learned IBM Rational Design 2
  5. 5. Our team, our challenges Working remotely and the nature of our work IBM Rational Design 3
  6. 6. Our team is pretty remote IBM Rational Design 4
  7. 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. 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. 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. 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. 11. A new project, a new context IBM Rational Design 9
  12. 12. Enough waterfalls, already! IBM Rational Design 10
  13. 13. Learning to be a lean team IBM Rational Design 11
  14. 14. How we put change into practice IBM Rational Design 12
  15. 15. Weekly backlog planning IBM Rational Design 13
  16. 16. Planning poker for sizing tasks with the team IBM Rational Design 14
  17. 17. Group chat for daily scrum meetings IBM Rational Design 15
  18. 18. Development wiki to share information IBM Rational Design 16
  19. 19. Designing together Getting our sketch-on in design studios, learning locally, practicing remotely IBM Rational Design 17
  20. 20. Learning to design lean IBM Rational Design 18
  21. 21. How we design together IBM Rational Design 19
  22. 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. 23. The materials we use IBM Rational Design 21
  24. 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. 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. 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. 27. Sketches: Exploring JazzHub projects (5 min) IBM Rational Design 25
  28. 28. Step 3: Pitch and Critique (3 min each) Image source: The Design Studio Method - Todd Zaki Warfel IBM Rational Design 26
  29. 29. Step 4: Sketch to iterate and refine (5 min) IBM Rational Design 27
  30. 30. Step 5: Converge on a final team design (45 min) IBM Rational Design 28
  31. 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. 32. When we want to explore or refine ideas IBM Rational Design 30
  33. 33. We do weekly sessions with playback Playback to team Design Studio IBM Rational Design 31
  34. 34. How we do remote design studios IBM Rational Design 32
  35. 35. The workspace setup IBM Rational Design 33
  36. 36. The screen setup: Seeing our teammates faces Google Hangout with visuals only (We use the phone for audio) IBM Rational Design 34
  37. 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. 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. 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. 40. Understand the problem IBM Rational Design 38
  41. 41. Brainstorm: Each person gets a row Adam’s ideas go here IBM Rational Design 39
  42. 42. Affinity groups: One group, one column, one color IBM Rational Design 40
  43. 43. Sketch, pitch and critique IBM Rational Design 41
  44. 44. Converge on one design IBM Rational Design 42
  45. 45. Playback to the team IBM Rational Design 43
  46. 46. Lessons learned… A summary of what worked well for us and what needs some tweaking IBM Rational Design 44
  47. 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. 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. 49. Sources for further learning Articles, webinars and tools IBM Rational Design 47
  50. 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. 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. 52. Questions? IBM Rational Design 50
  53. 53. Thanks! IBM Rational Design 51
  54. 54. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/agile-uxdesign-distributed-team

×