Microsoft requested new chat window designs for their product support teams. Chat windows were built with two users in mind: Microsoft's expert technicians and their customers currently facing issues. 
• Create a templated window chat design that can be used across products
• Support the needs of both internal and external users
• Update users with statuses
User Diagrams
The user’s journey was provided by the UX team, based on technical requirements from the client. The workflow is mostly linear and simple, although a disconnect may interrupt the flow.
If the disconnect originates from Microsoft, the workflow will automatically attempt to reestablish. If the disconnect originates from the user, the option to reconnect or exit the flow will be offered. Occasionally one agent will need to transfer the user to another agent. Once the chat has ended, users can exit the experience.
Chat Window Suite

The project spanned two weeks, two concepts were explored and the visual and interactive designs were set. Design decisions ranged from chat window placement, how time stamps are treated, to what user accessibility features should be included, as well as the following:
What happens when the chat....
• begins
• loses connection
• is minimized
• changes its status
• ends
What happens when an agent...
• joins the chat
• types in the chat
• transfers the user to a different agent
• loses their connection
What happens when the user...
• joins the chat
• is waiting in line to speak with a representative
• minimizes the chat window
• loses their connection
• emails the transcript
• ends the chat
Branded Skins
The chat window was designed to be reskined for multiple Microsoft products. The window navigation included branded welcome messaging and logo. Product brand colors accentuate features like scrollbar and status bar. 
Window Placement and Minimization
Connection with the chat experience is maintained either through a minimized status bar or an open chat window. The window lives at the top most layer of the browser, so long as the originating support page is kept open on the browser.
Both the status bar and chat window are anchored at the window’s lower right corner by default. However, the user can manually move them anywhere within their desktop screen.
Queue Messaging
Once the user has requested a chat, a message confirming the request is displayed; it also shows information the user has provided about their issue, and indicates their position in the queue. Periodic updates appear, indicating position change in the queue and thanking the user for their patience.
Status Bar Messaging
The status bar remains visible in the browser window for the duration of the chat experience. As the user moves through the work flow, the messaging changes to reflect different states. 
Each message is paired with an icon that represents the relevant state, from agent search to disconnect. The “—” and “x” are always present, and allow the user to minimize or close the chat window. The message and icons pulse to notify the user when a new state has been entered, and prompt an audible notification, as well.
Agent Connecting
When an agent begins typing, all previous information the user received while waiting in the queue clears. Progress dots under the agent’s ID indicate he or she is typing; no user action is required.
The status bar at the footer updates its messaging again, and the chat box has now become available. When the agent finishes typing, the progress dots are replaced with the agent’s message. 
User Connections
When an agent has been assigned, the “Connecting” progress indicator is used within the chat to notify the user.
Additionally, the status bar at the foot of the window replaces its “searching” message with a “connecting” message.

During agent transfers, the first agent remains connected until the new agent has joined. The customer’s send button is deactivated until the transfer is complete, to ensure the new agent does not miss any of the conversation. The user may still print a transcript or exit the chat window during this time.
Printing Transcript
Clicking the print icon will make the user’s computer print dialog box appear. The print dialog box allows the user to select options for a particular print job, such as specifying a printer, page range, and number of copies.
Time stamps are not displayed after each message is entered in the chat window. Instead, time stamps only appear after a sixty second period between messages. This information is still collected and the full information of the session is accessible; presented in detail only when the chat transcript is printed or emailed.
Email Transcript
Clicking the email icon will trigger an overlay pop-up to appear within the chat window. Users can specify more than one recipient to receive a copy of the chat transcript.
On a desktop or laptop, settings can be obtained by positioning the cursor over an individual icon. Hover states include reversed-out icons with colored backgrounds that match the branded skin to showcase interaction options. When the cursor is no longer hovering over the area, the box disappears.

You may also like

Back to Top