This document summarizes Memi Beltrame's presentation on collaborative design at the 6th phpDay conference in Verona, Italy in May 2009. The presentation discussed how collaborative design occurs whenever two or more participants plan or implement an artifact. It noted challenges that can arise from interdependencies between participants and suboptimal outcomes when local interests are not aligned with global objectives. The presentation provided examples of collaborative design in areas like architecture, software and movies, and suggested that raising awareness, removing barriers, high iteration, and open communication are needed for successful collaborative design.

1. Memi Beltrame
Made by Many
On Collaborative Design
phpday, may 15th 2009
Verona
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

2. Who I am: Memi Beltrame
• Developping websites since 1997
• Using php since 2000
• 2003-2007 Study of cinematography
• 2007 to present:
specialising in frontend and interaction design
• Since 2008 for Liip Agile Web Development
• Movie enthusiast
• 1st feature film in preparation... some day...
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

3. Why am I here?
To raise awareness and to show the
dynamics of collaborative design
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

4. Argh! Design! Go away, I am a Developer!
Design is not only pushing pixels
Designing means arranging stuff:
Pixels, Databases, Code, Processes
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

5. Collaborative Design takes place
whenever an artefact is planned
and/or implemented by two or more
participants.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

6. Typical Collaborative Design Areas
Architecture
Software
Movies!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

7. The Internet is (probably) the
biggest single instance of
Collaborative Design
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

8. Collaborative Design is a reality.
It is the inevitable process that
emerges when you build something
as a team.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

9. Unlike UCD or TDD it is nothing you
choose, it just happens,
nolens volens.
UCD: User centered design
TDD: Test driven development
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

10. It just happens, ok.
Understand it.
Control it.
Embrace it.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

11. Even the simplest
Customer < > Contractor Relationship
involves Collaborative Design
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

12. It involves is a network of participants
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

13. The goal is a common product
with a high overall utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

14. Every participant can propose
solutions for design issues
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

15. In theory a Design should move
towards an optimum of utility
Utility
Time
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

16. In theory. Not in reality.
Utility
Time
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

17. Why does collaboration
not automatically mean
improvement?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

18. Participants are inter-dependent.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

19. Participants are inter-dependent.
Inter-dependency means
„I need something“
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

20. Every participant has a self-interest
Customer:
Affordable yet magic
Developer:
solid, stable and performing
Designer:
beautiful and usable
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

21. Fulfilling self-interest means
Reaching a local optimum of utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

22. Are participants willing to
compromise their self interest for
the sake of a global optimum?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

23. A B C D global Utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

24. A B C D global Utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

25. The system can become very complex
php-Developer Grafics Webserver admin
Management
Proxy guy
Usability guy
Mobile Services admin
DB Specialist DB Admin
Project Lead
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

26. It's hard to keep track of the
interactions and design decisions
Grafics Webserver admin
Management
php-Developer
Proxy guy
Usability guy
Mobile Services admin
DB Specialist DB Admin
Project Lead
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

27. Subsytems can emerge
Grafics Webserver admin
Management
php-Developer
Proxy guy
Usability guy
Mobile Services admin
DB Specialist DB Admin
Project Lead
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

28. Subsytems also have a local
optimum utility plus they are loyal!
Grafics Webserver admin
Management
php-Developer
Proxy guy
Usability guy
Mobile Services admin
DB Specialist DB Admin
Project Lead
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

29. Every new participant brings a shift
in the oveall utility.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

30. Every old participant must be aware
of this and accept it. Otherwise the
team is possibly ripped apart.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

31. Successful Collaborative Design is
based on the commitment of each
participants to achieve an optimum
of overall utility.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

32. How is that achieved?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

33. ● Raising awareness
● Remove barriers between you and the
customer to form a team
● High iteration in the workflow
● Elaboration of interdisciplinary patterns
● Talk, talk, talk, talk!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

34. An example of interdisciplinary patterns:
The Undo Dilemma
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

35. A list of users to be administered
Edit Delete
Edit Delete
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

36. The Undo dilemma
Edit Delete
Edit Delete
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

37. What happens if you hit Delete?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

38. What happens if you hit Delete?
Usually: a pop up!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

39. Pop ups are Bad!
Avoid them!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

40. Use Undo!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

41. Because:
UNDO
• is the rescuer of users in distress.
• encourages exploration.
• eliminates sensless confirmation-dialogs
! Don‘t ask, do and UNDO !
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

42. Pop Ups are easy to implement,
Undo is not.
It requires a well planned process
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

43. Frontend and backend people must
decide on a pattern of implementation.
This is a collaborative design decision.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

44. Possible patterns of implementation of
undo in the database:
1) Through a Flag
2) Through a history table
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

45. Implementation of Undo
1) Through a FLAG
TABLE users VIEW view_users
------------------------------------- ------------------------
| ID | name | surname | is_deleted | | ID | name | surname |
------------------------------------- ------------------------
| 1 | Pio | Polli | 0 | | 1 | Pio | Polli |
------------------------------------- ------------------------
| 2 | Enzo | Enzi | 1 | | 3 | Toni | Marroni |
------------------------------------- ------------------------
| 3 | Toni | Marroni | 0 |
------------------------------------- SELECT * From `users`
WHERE is_deleted = 0
• simple
• Ideal to undo deletions
• Downside: data may be materialized twice
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

46. Implementations of undo
2) Through a history table
TABLE users TABLE users_history
------------------------ ----------------------------------
| ID | name | surname | | ID | ID_users | name | surname |
------------------------ ----------------------------------
| 1 | Pio | Polli | | 1 | 1 | Pio | Polli |
------------------------ ----------------------------------
| 2 | Enio | Enzi | | 2 | 2 | Enzo | Enzi |
------------------------ ----------------------------------
| 3 | Toni | Marroni | | 3 | 3 | Toni | Marroni |
------------------------ ----------------------------------
| 4 | 2 | Enio | Enzi |
----------------------------------
Table users: every change is Table users_history: every change
an UPDATE also executes an INSERT
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

47. Implementations of undo
2) Through a history table
Pros
• Allows endless undo
• Works as a history
• Is not limited to a single data entry
• allows „edit in place“ on a high level
Cons
• Needs a more complex system
• Executes more SQL queries and creates more traffic and data
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

48. Thank you!
Slides: http://slides.liip.ch
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy