This presentation is about the challenges faced when doing prototypes and to make sure that these prototypes are useful for the developers. It is about how the prototyping activity fits into the iterative implementation cycles (Scrum Sprints) and how the triangle of UX, development and visual design works together, in particular if external service providers are involved.

1. Agile Experience Meetup Zurich
Prototyping and Scrum
Memi Beltrame
@bratwurstkomet
April 3rd 2013

2. I Like Magic
UX Designer for Founder of
Less a Mess
Content Strategy

3. 7 Challenges
1. Know your audience
2. Make it interactive
3. Make it testable
4. Get the right data
5. Get it done
6. Work on your process
7. Cope with 3rd party designers

4. 1
Know your audience

5. Knowing your audience means
Do your research!

6. User Research Methods
Analysis
Userstatistics
What people did
Observation
Contextual User Diary
Observation Inquiry
What people do
Focus Groups
Structured
Interviews
Unstructured
Surveys
Inquiry interviews
What people say
Quantitative Quantitative
Why and how? How many? How often?
Source: Moser, Chistian „User Experience Design“. 2012, Springer Vieweg

7. Research helps defining
the relevant criteria to base
your prototoype on

8. Relevant Criteria =
High impact on Experience
• Age.
• Devices.
• Location.
• Homogeneity.
• Education / Professional background.

9. Age

13. • Single Page
• No Chrome
• No adds
• No wrong
places
visit
http://preview.liip.ch/zoo
on an iPad or iPhone.

14. Location

15. Züriwald App Educational Hiking
Planning
Offline =
Download
Closed Places
Weather

16. 2
Make it interactive

17. Jungfraubahnen Tourism
Scribbles Balsamiq HTML-Web
Prototype

18. Speed vs. Accuracy
Pick one.

19. Neue Zürcher Zeitung Webpaper

21. 3
Make it testable

22. The more interactive,
the easier to test.

23. Testable prototypes
anticipate behavior
(as well as possible)

25. Fake it.

26. 4
Get the right data

27. Do anything to get
real data.
Does it exist?
How does it look like?

28. Prototype Data:
(Fonds in an application
for bankers)
VF - European Mid and Small Cap Equity B (Lux)
Real Data: Aberdeen Global - Emerging Markets Equity A Acc
UBS (Lux) Medium Term Bond Fund - CHF P-acc
UBS (Lux) Medium Term Bond Fund - EUR P-acc
UBS (Lux) Medium Term Bond Fund - USD P-acc

29. 5
Get it done

30. Pen and Paper
or
Clickables

31. What you need
Extremely rudimental
Affordable
Fast and without
electricity

32. What you get
Extremely rudimental
Affordable
Fast and without
electricity

33. Design Studio
Quantity has its own quality

34. Design Studio

35. The Power of Pen & Paper
Design Studio
• Fast and cheap.
• Awesome to integrate
stakeholders
• Scribble with external Designers
• Impressive start to signal
„We get a lot done fast“

36. PoP - Prototyping on Paper
http://popapp.in

37. Protostrap
Code: https://github.com/liip/Protostrap
Demo: http://preview.liip.ch/Protostrap/

38. Protostrap
• Based on Boostrap
• Library with CSS and Javascript Files
• PHP Files to hold templates and snippets together
• Documentation and examples in the package
• Optimized for Mobile:
- fast tap recognistion
- iOS Tabbar for Prototyping of native apps
- „Add to home“
• Basic PHP knowledge needed
• Not pretty, but functional!
• Can get messy.

39. 6
Work on Your Process

40. Crossfunctional
Teams

41. Crossfunctional Teams
help with:
• Avoiding silos
• Spreading knowledge
• Making dialogue easier
• displaying unity towards the client

42. Preparation

43. Prep-versions
Each Sprint has a preceding
Prep version.

44. A Prep version for us is just a „Fix
For“ version in JIRA.

45. If you can‘t prep it
you can‘t do it.

46. One sprint ahead prep
• User stories for the coming sprint
• Prototyping:
Tasks in the user stories
• Not only Prototyping has to
be prepped!
• No commitment in Prep:
too many unknown variables

47. Board = Daily
Regular Prep
Board Board
Board = Daily

48. Prototype - Demo

49. Demoing
• Show the interaction, not the elements
(Prototypes are about flow)
• Go through user stories
• Show to devs & visual designers before demo
to get feedback
• Make prototype available (web & git)
• Add „How to demo“ in story if necessary
• Make screencast if necessary

50. When are prototypes
useful for devs?
• When they help devs anticipate
the scope for implementation.
• Prototypes have to be complete:
- realistic data
- complete interactions

51. 7
Cope with 3rd
party designers

52. 3rd party designers
• Demand a visual designer with
experience in web.
• Communicate clear expectations.
• Integrate them early. Scribble with
them and let them be part.
• Say no. Seriously.

53. Things that don‘t work
• Design Briefings
• Lists of deliverables
• If they have to adapt to agile just
for you.
(if they are waterfall, you are waterfall too)

55. Questions?

56. Thank you!
I‘m Memi Beltrame
@bratwurstkomet on twitter