1. Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11 th, 2009

2. Core problem Can we talk about this more ? Send

3. Core problem I am sorry I thought you were gone… Send

4. Core problem What kind of red do you want ? Send

5. Core problem I cannot design this, it is too hard ! Send

6. Core problem I am sorry, can you send me the file again? Send

7. Any attempt to move beyond the physical should address the need to make the technology so transparent that it does not feel like anything is lost, by which I mean as a visual designer, I do not want to lose the creativity from collective thinking ! - Ryan McCullah

8. Research Literature Review Survey User Interviews Participation Observation

9. Exemplar research

10. Reduce Complexity Designers collaboration Status Awareness Brainstorming Final Production Sharing Resources And how can IM be integrated into these?

11. Research (2 nd ) More Literature Review More Interviews More Observation

12. Exemplar research (2 nd )

13. Insights IM is normally used to check simple/routine tasks at the office ; Resource: http://www.flickr.com/photos/library_of_congress/2179136411/sizes/o/

14. Insights Visual designers like drawing stuff on any space to support brainstorming; Resource: http://www.flickr.com/photos/tofu_mugwump/2465191253/sizes/o/

15. Insights Designers need media and want to share ; Resource: http://www.flickr.com/photos/maddito/887867054/sizes/o/ /

16. Insights Most designers have good technical skills ; Resource: http://www.flickr.com/photos/560/2608285937/sizes/l//

17. Insights Social connections are needed at work ; Resource: http://www.flickr.com/photos/dmswart/474195730/sizes/o/

18. Insights UI design affects collaborators awareness. Resource: http://www.flickr.com/photos/martin-kulakowski/3055870213/sizes/o/

19. Concept Systems Emotion Teller Interactive awareness map 3D Office peeping Whiteboard DIY Whiteboard Fun Sketch matching iFile Share ……… Mind Map

20. Final Concept IM facilitated Whiteboard Emotion Teller iFile Share Whiteboard Fun Sketch matching ……...... Mind Map

21. Prototype – Two Workspaces

22. Prototype – Workspace - Brainstorming

23. Prototype – Workspace - Get it done !

24. Prototype – features in Brainstorming 1.Pencil for drawing; 2.Pen for writing; 3.Eraser for removing objects on the board; 4.Brush for rough painting; 5.Basic shapes (line, rectangle …) 6.Color selection 7.Move whiteboard and Zoom in/out

25. Prototype – features in Brainstorming 1.Individual work area; 2.Collaboration at the same time; 3.IM provides video conferencing;

26. Prototype – features in Final Production 1.Leave comments on colleagues artwork at anytime 2. Comments can be retrieved by the author(s)

27. Prototype – features in Final Production 1.Add any design tool from local PC or MAC; 2. Drag any tool to whiteboard to open it.

28. Prototype – IM 1. Group people into different categories; 2.Icons for collaboration, audio/video conferencing, and mobile chatting; 3.Hide your artwork from others temporarily.

29. Prototype – IM 1.Input messages by both typing and handwriting; 2.Control of messages receiving velocity; 3.Single or multiple chatting threads

30. Prototype – Sharing Resources 1.One folder is only shared with just ONE person; 2.Drag anyone to Share Center panel to create a new shared folder; 3.Top part only shows the people in the current IM list.

31. Prototype – Sharing Resources 1.The host of each file is represented by her/his picture 2.Drag any file to Share Center to create a new shared resource 3.Paste URL and hit Enter to save website if the resource is online

32. Prototype – Sharing Resources 1.Confirmation requests will be sent by Bridget if your resource is shared by others

33. Prototype – Sharing Resources 1.Users can also view how a specific file was shared in the past.

34. Prototype – Status Awareness 1.Click on icon on the top left part of others work area to open up the widget; 2.Quick access to IM functions; 3.See status messages from social networking sites; 4.View past projects of your colleagues

35. Prototype – Additional features 1.Users can record collaboration process for future reference; 2.Users can also print and save sketches on the whiteboard. 3.Users can switch between projects at anytime.

36. Usability Testing Paper prototypes 3 participants Scenario based tasks

37. Usability Testing Positive feedback on concept Problems with UI elements

38. Future directions Redesign the interfaces Develop the actual application Conduct more Usability Testing Market Bridget

39. What I learned Understand users are important Various approaches to do HCI design - First reduce, then combine Make technology support technology

40. Many Thanks to The School of Informatics Dr. Shaowen Bardzell Dr. Erik Stolterman Dr. Martin Siegel HCI/d class of 2009 Indiana Memorial Union Cheryl Crouch Damen Morris Brandon Morley Kristine Ki Jason Gross Anne Patterson

41. Thank you ! And Questions ?