AGILE UX DESIGN PROCESS: Web Communication and collaboration
Scenario Focused Engineering
-What we did ? !
-Why we did ? !
-How we did ?
( Reach – Current Progress )
Scenario Focused Engineering
“We must recognize that what a town or building is governed above all , by what is happening there[...] Those of us who are concerned with buildings tend to forget too easily that all the life and soul of place, all of our experiences there, Depend not simply on physical environment, but on pattern of events which we experience there....” Christopher Alexander-‐, the timeless way of building
Features for product Versus Designing for Space
Vs
Tools “do something Buildings are spaces in which “things are done” …
What is relationship between Design and Social Software?
Industrial Design Architecture
Gather data ( 3 days) Refine and review content ( 10 days) Present content ( 2 days)Create
Refine
Review
present
Storyboarding: understanding spaces and anticipating interactions
Storyboarding: understanding spaces and anticipating interactions The story board was designed at the end of SFE exercise. This is to help understanding scope of project. We have derived 22 scenarios through storyboard.
The Actors
Mark John Sarah Jay Kate
Context
• Contoso is a construction firm based out of Boston.
• Hirco is an Israel based real estate company.
• Hirco has approached Contoso to provide the workspace design for their Hospital in Dubai.
Sarah
• Director, Planning, Hirco
• Based in Spain
• Peculiar with timelines
• Always communicating, either F2F, phone, email, IM or web-‐conferencing
Kate
• A business executive based in Boston • A mother of 5 year old daughter, Mary, loves
to spend time with her • A typical day
– Starts her work at 08:30 AM and leaves at 05:30
– She picks Mary from the play school – She spends time with Mary in the
evening. • Typical activity
– Co-‐Creates and owns content – Gets content reviewed – Organized
Jay
• Accounts Manager, EMEA in Contoso
• Socially active and plays golf
• Focuses on partner relationship
• Travels heavily across the region
• Content is king for him,
• prefers viewing them in Hi-‐Fidelity
• Seeks captivating experience
• Always Multi tasking
• Seeks and consumes lot of info
John
• An architect with Contoso
• Quality Conscious
• Attention to details
• Adaptive to new technologies
Mark
• Designer with Contoso • A gizmo freak and loves his MacBook • Big fan of Pink Floyd • Works till late night !!!
!
Kate
JaySarah
Mark John
Pete
- High pace , high impact - Wide distribution of connections - Prefer Face to face - Mobile
- Individual + managerial duties - Communication up down - and across organization - Non mobile
- React to requirements - Mostly away from desk - mobile
at
eg ic
Le ad ers
hi p
Mi
dd le
Lin e
Su pp ort
Persona
New Assignment for Kate
Hirco has approached Contoso to provide the floor plan and design for their Hospital in Dubai.
!Kate is a Business Executive with Contoso and has been tasked with creating a proposal for Hirco.
!She has 15 days to complete this proposal.
HircoContoso
floor plan and design
Kate’s Dilemma
Kate is puzzled with this new assignment.
!She has never worked with Hirco before. She has never worked on Hospital design product either.
!She is anxious and looking every where to get more information about Hirco and folks who have worked with them in past.
Contoso Hirco
Kate Starts
Desperate Kate looks for possible help from the folks who have worked before with Hirco.
!Kate is thinking if she can get hold of some subject matter experts on Hospital architecture.
!She ponders if some artifacts exist from any earlier relationship with Hirco.
Kate’s Pre Meeting Actions
A tired looking Kate opens the email. She looks for the resource suggestions based on keywords.
!A ray of hope gleans into Kate’s eyes when she finds the list of suggestions for people and earlier resources/ documentation.
!She creates a draft presentation of objectives and process that Contoso needs to follow.
!She is little relaxed now that she has created something to talk about
Kate Schedules a meeting
She decides to organize a meeting with folks to discuss the 1st draft about objectives and processes.
!She picks up few folks from the suggestion list, which included people who worked with Hirco earlier or were involved in earlier hospital projects.
!She also picks up the relevant suggested document links. Some of these links are related to the standards of designing hospitals and previous contract agreement with Hirco.
!She sends the invite with lot of optimism about the meeting.
Participants Accept Meeting Requests
Meeting request appears in the inbox of Jay, Mark, John, Emmy and other SMEs.
!Jay looks at his calendar and finds that he would at the airport at that time. He opts for the meeting to call him back on his mobile phone.
!John gets the invite on his phone, he is able to preview documents which were sent as links within the meeting request.
!Mark can see a note on the draft presentation from Kate “I am still working on the document and please wait for updates”. He decides to go through the document
⌃ !
!"#
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Hirco Proposal Review Meeting
Required: Optional
UX proposal for BizTalk
Deepak: Nice Work Dhana…
Vivek: How did this perform in our usability test ?
2:24pm , Friday
2:44pm , Friday | Reply | Like
Task assigned : Kundan Bharti !☑ @Kundan: Please set up time for next review
Client proposal.ppt uploaded
Dubai .pptx uploaded Accept | Decline | Tentative | Delegate
2:30 – 3:30, Monday,5th July
Hirco Design Review I 2nd August
Hirco Draft BuildI 15st July
Hirco Client Meet | 18th July
Upcoming meetings✓
Documents :
Comments ? Questions☑
Task1
Agenda !
Will be 30 min late
Hirco Proposal Kick of Meet
This is a weekly Productivity Design Team UX review meeting created for the benefit of various teams present in MBD org.
Hirco Proposal kickoff Meet
✗ ✓✓✗
⌃ !
!"#
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Attended Missed
Comments ? Questions☑
Task1
post
Proposal for Hirco
Jay: Good Work Kate…
John: Is there any information about previous project Jay?
2:24pm , Friday
2:44pm , Friday | Reply | Like
Task assigned : Mark James !☑ @Mark: Please set up time for next design review
UX proposal.ppt uploaded
UX Review.pptx uploaded
3:24pm , Monday | Reply | Like
Monday ,3rd June Previous meetings
Hirco Proposal Kick of Meet
Hirco Proposal kickoff Meeting
Hirco Design Review I 2nd August
Hirco Draft BuildI 15st July
Hirco Client Meet | 18th July
Documents :
Kate is working on the document for the meeting
Kate compiled information from various resources and she puts next steps in the agenda slide.
!She appears happy after completing the presentation and updates it in the enterprise repository.
!She choo se s to no t i f y mee t i n g participants that the presentation is now available for review.
!Relaxed Kate walks to the parking area, she has to pick her daughter from the school.
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#" " #
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Document Name – Application Name
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. !You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. !Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. !You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. !To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On
✉
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#" " #
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Document Name – Application Name
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. !You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. !Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. !You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. !To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On
To: MarkJames@contoso
Hi Mark, !What do you think of this paragraph? !Thanks, -‐Kate
✉
Escalate to online meeting
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#" " #
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Document Name – Application Name
Escalate to online meeting
3:18PM 6/3/2010
Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#
" # ✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Online Meeting
$ $ % % Sheet 1 Sheet 2 Sheet 3
!Kate :Are these this final draft you are proposing !Mark :Let me check with John. 1:27 !John : I think I can add screenshot here !Mark : Put it in drop box !!!!
Kate Smith Business executive
Participants Review the document
John will be on construction site and he reviews the document from home PC before going to bed. He inserts few images for better illustration. He saves the document back to the repository. !Jay is in a train travelling back to DC. He uses this time to see what Kate has updated. He opens the document on his mobile. !He notices that Hirco may not be receptive to one of clauses in the proposal and makes a comment that he want to discuss it further in the meeting. !Kate is notified that she has received review comments on the document.
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#" " #
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Document Name – Application Name
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. !You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. !Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. !You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab.
.Kate Smith
Mark Jones
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4 ⌃ !
!"#" " #
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Document Name – Application Name
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. !You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. !Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. !You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab.
.Kate Smith
Mark Jones
1 3 4
Kate is notified of OOF message from one of the participants
Mark had originally accepted the meeting request but due to a family emergency, he will not be in the office tomorrow. He sets up an OOF message. Due to urgency, he could not decline or delegate his meetings.
!Kate is notified about mark being OOF. She looks at his OOF message to find that Charles will be the point of contact in his absence.
!She invites Charles to the meeting.
Meeting Starts
The presentation is already put on meeting stage and the meeting is all set to start at 10:00.
!As Jay has opted to get a call back from the meeting, he receives a call on his mobile when he is waiting for the flight on airport. He accepts the call and joins the meeting immediately.
He is able to see the presentation on his mobile screen. Thanks to auto adjustment to best view. He swaps to video view to see all participant.
Charles joins late
Charles was stuck in traffic jam and is little embarrassed that he is late for the meeting by 10 minutes. He is curious to know what all got discussed in those 10 minutes.
!He is able to quickly slide through the discussion captured in the transcripts. He understands that Jay had just shared his experience in working with Hirco.
!Charles is up to speed in almost no-‐time.
Fred decided to change his profile photo on his Win 8 machine. He goes to the user page and starts the process .He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. !Sagar : Fred decides to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. !Girish; Fred decides to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. Fred decided to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image.
10:30 11:30
10:45
Kate starts recording the meeting
Kate chooses to record the meeting so that she can refer to the content even later.
!When she finds a key discussion happening in the meeting, she places a bookmark in the recording. These bookmarks provide an easy way to navigate in the recording.
10:30 11:30
Assigning action items
In the discussion, it came up that there was some recent changes in the process of getting the license. Emmy tells the team that she will find more about the details and get back by next Monday.
!Participants see an action item assigned to Emmy on the meeting screen.
Time Tracking
The screen tracks the progress of agenda items.
!Kate had set last 15 minutes to discuss the cost estimates.
!At 10:50, participants are intimated that that they are overshooting the time. The cost discussion is yet to happen.
!Kate quickly wraps the current discussion and moves on to the next agenda item.
!Kate feels equipped at the end of the meeting as she has captured lot of useful inputs.
10:30 11:30
10:45
Closer on budget
#
Task Tracking
At the end of the meeting, all participants receive a summary of meeting with action items clearly assigned. !
The action item gets added to Emmy’s calendar with Monday as the deadline. !Emmy sees a reminder on Friday for the action item. As she had already finished investigating about change in licensing process. She just marks the action item as complete and updates the meeting workspace with her findings. !Participants are notified about the task completion.
Kate seeks input from amobile co-‐worker
Kate needs John’s input on the floor plan. She starts a sharing session with John from the document itself. !John is at the construction site and Kate’s invitation lands on his mobile phone. !John accepts the request. In a single action he is connected to video and data as well, which adjusts to best viewing experience on mobile. !During the discussion, John switches the display from content to participant video as needed. !Kate gets all the necessary information and starts refining the customer presentation.
Scheduling meeting with Client
Kate knows importance of conducting effective and timely meetings to build professional impression and personal relationships !
Kate checks out Sarah’s calendar, her preferred time and schedules meeting with her who is in Spain. !
Kate chooses an equipped room in Sarah’s office so that they can have lifelike face to face interaction with Sarah. !
Before sending the invite, Kate confirms with Sarah if the time and location works for her
Auto generation of MoM
Kate wants to focus on the presentation and wants to avoids note taking during the presentation.
!She switches on the automatic MoM generation.
!She is confident that she will not miss on any information as it captures the transcription along with time, speaker and photograph.
Fred decided to change his profile photo on his Win 8 machine. He goes to the user page and starts the process .He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. 10:38 !Kate : Fred decides to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. 10:41 !John; Fred decides to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image. Fred decided to change his profile photo on his Win 8 machine. He goes to the user page and starts the process He finds that he can record a video of a few seconds from the webcam. He prefers this rather than a static image. His small video shows up on instead of his static profile image.
10:30 11:30
10:45
Video walkthrough of design
Kate has prepared a 10 minutes video to walkthrough the proposed floor plan. She starts playing the video.
!Sarah sees the video playing on the meeting screen. Sarah is impressed as the video had covered smaller details of the floor plan.
!Sarah has few doubts about interior design in middle of the video.
!Kate pauses the video and clarifies her doubts. She again resumes the play of video. Video on Sarah’s side also gets resumed.
Meeting as an object
Pete has joined California office of Contoso as a new architect.
!He has been assigned the new project for a shopping mall in Dubai .
!He looks for prior information on projects Contoso has done Dubai.
!He finds the link to the Hirco Hospital project. He finds all documents and archive of all meetings along with their pa r t i c i pan t s , s ummary, con tent , recordings, video and transcripts.
• New Assignment for Kate
• Kate’s Dilemma
• Kate Starts
• Kate’s Pre Meeting Actions
• Kate Schedules a meeting
• Participants Accept Meeting Requests
• Kate is working on the document for the meeting
• Participants Review the document
• Kate is notified of OOF message from one of the participants
• Meeting Starts
• Kate starts recording the meeting
• Charles joins late
• Assigning action items
• Time Tracking
• Task Tracking
• Kate seeks input from a mobile co-‐worker
• Scheduling meeting • with Client
• Customer meeting – • Lets get started
• Video walkthrough • of design
• Meeting as an object
Natural and Intuitive • Entry Points to meetings : Easier than picking up phone, as effective as face to face meeting , better scheduling experience.
• Integrated to the existing MBD products for content, tracking and communication
Empower the Mobile info workers • Any time Any where Great Attendee Experience • Leverage mobile -‐ Integrate with SMS, Voice and Camera from mobile
Rich Meetings • Multi Media support , Life like experience , Specialized Conference room • Auto Agenda Track Co Edit, Smart Whiteboard • Transcription, personal book mark the recordings • Automatic MomMeetings are first class enterprise assets • Archiving, Sharing and searching • Meeting as object “.mtg”
Meeting Experience Pillars
Comments are synchronized with Word
3:18PM 6/3/2010
Other Explorations
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4
!"#"
✂!"
Paste $
Clipboard
●●●⬤Text $Title
● Some Text ● Some Text ● Some Text
⬤Text $
Title
⬤Text $
Title
⬤Text $
● ● ● ● ● ●
Title
● Some Text ● Some Text ● Some Text ● ● ● ● ● ● ● ● ! Font
● ● | ● Calibri $ 11 $
Online Meeting
Girish Chatting With Justin
Girish: Hi Justin, You should check out this link on YouTube – Russell Peters is hilarious! Justine: Yeah ..? Girish: Do you want to go to his show? Let me know, Justine: Sure man…
Russell Peters Tickets Palace Grounds , Bangalore 500-‐ 2000 Rs Choose a date: June 8 9 12 14 15 20
3:18PM 6/3/2010
File Tab 1 Tab 2 Tab 3 Tab 4
!"#"
Group Title TitleRelated content
Online Meetings
Links Preview
Title
Related content
Russell Peters on YouTube My calendarSat., July 3, 2010
6pm7pm8pm9pm10pm Prachis b-day party
Girish Chatting with Justin
Girish: Hi Justin, You should check out this link on YouTube – Russell Peters is hilarious! Justine: Yeah ..? Girish: Do you want to go to his show? Let me know, Justine: Sure man…