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

Core problem Can we talk about this more ? Send

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

Core problem What kind of red do you want ? Send

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

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

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

Research Literature Review Survey User Interviews Participation Observation

Exemplar research

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

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

Exemplar research (2 nd )

Insights IM is normally used to check simple/routine tasks at the office ; Resource:

Insights Visual designers like drawing stuff on any space to support brainstorming; Resource:

Insights Designers need media and want to share ; Resource: /

Insights Most designers have good technical skills ; Resource:

Insights Social connections are needed at work ; Resource:

Insights UI design affects collaborators awareness. Resource:

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

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

Prototype – Two Workspaces

Prototype – Workspace - Brainstorming

Prototype – Workspace - Get it done !

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

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

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

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

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.

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

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.

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

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

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

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

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.

Usability Testing Paper prototypes 3 participants Scenario based tasks

Usability Testing Positive feedback on concept Problems with UI elements

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

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

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

Thank you ! And Questions ?