Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School...

Bridget – IM facilitated Collaboration tool for visual designers

Miaoqi Zhu, HCI/d 2009The School of Informatics,

Indiana University BloomingtonMay 11th, 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 ResourcesAnd how can IM be integrated into these?

Research(2nd)

• More Literature Review• More Interviews• More Observation

Exemplar research(2nd)

InsightsIM is normally used to check simple/routine

tasks at the office ;

Resource: http://www.flickr.com/photos/library_of_congress/2179136411/sizes/o/

InsightsVisual designers like drawing stuff on any space

to support brainstorming;

Resource: http://www.flickr.com/photos/tofu_mugwump/2465191253/sizes/o/

InsightsDesigners need media and want to share ;

Resource: http://www.flickr.com/photos/maddito/887867054/sizes/o/ /

InsightsMost designers have good technical skills ;

Resource: http://www.flickr.com/photos/560/2608285937/sizes/l//

InsightsSocial connections are needed at work ;

Resource: http://www.flickr.com/photos/dmswart/474195730/sizes/o/

InsightsUI design affects collaborator’s awareness .

Resource: http://www.flickr.com/photos/martin-kulakowski/3055870213/sizes/o/

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 ShareWhiteboard 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 colleague’s 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 ?