UXDI Case Study

Nichole Tyler
10 min readSep 20, 2020

Remote Communication Redesign- Water Cooler Feature for Microsoft Teams

Nichole Tyler

My Role: UX Researcher | Duration: 2 Weeks | Project Status: Completed

Project Overview

We were tasked with redesigning an aspect of remote communication through an existing mobile application; to narrow our scope, we decided to focus on the social aspect of working from home and first set out to define the actual problems remote workers are facing. We began by acknowledging our assumptions that remote workers needed a social outlet within their professional routine and created a hypothesis that we needed to provide them a way to mimic the socialization of an office setting.

To validate (or invalidate) those initial beliefs, we conducted user testing and used those observations to create affinity maps and I-Statements to lead us to the following insights: remote workers miss the frequent and natural social interaction of an office setting, they rarely balance work and personal time well outside the office setting, and they feel collaboration is better done in person.

We used those insights to build a persona, an amalgamation of our interviewees into the profile of our target user, to use as a representative tool as we began the design process to make sure that we were constantly aligning ourselves and our solution to the target user. With the insights from our interviews and persona at hand, we were able to view the problem specifically from the eyes of our user, validate our original hypothesis, and redefine our problem statement to the following: how might we provide remote workers a convenient way to socialize and interact on unplanned work breaks?

Enter the idea for Water Cooler, a video chat feature integrated into Microsoft Teams that regularly prompts users to take a work break by pairing them up with a randomly-selected available coworker for a video chat. The feature also includes an optional topic and question generator to reinforce that this call is strictly non-work related and provide ice-breaker conversation for people that are not the most familiar with one another.

We ideated several different versions of the way this feature could look and ultimately landed on a design that we turned into paper wireframes and then converted into a lo-fi clickable prototype through Figma. To test the feature’s initial viability, we conducted usability tests and got some great high-level feedback that the feature was helpful and would encourage interaction and team building as well as some usability feedback about how the interface design could be improved.

We took that feedback and designed a mid-fi clickable prototype, which we ran through another round of usability tests. Again, the users (for the most part) had no issue with the intended tasks, the feedback on the feature’s usefulness was positive, and we collected another round of recommendations regarding the design of the interface.

Going forward, the next steps are to apply the recommended changes from the second round of usability tests to the mid-fi prototype, create a hi-fi prototype, and conduct another round of usability tests.

We believe that Water Cooler directly addresses the user’s problem while offering a solution that is unique and fun; we have included research and artifacts below that confirm the validity of the feature and that it is worth exploring further.

Scope of Work

Remote communication is a daily reality for today’s majority and has fundamentally changed the way we are used to relating to other people in a professional environment. Working from home presents a further set of challenges in that the lines between work and personal time are blurred and conversation is regarded as transactional. For our project, we narrowed our focus from working remotely to the social component of professional communication that has nearly become lost in the current remote environment.

Process (Explaining the UX Framework at a High-Level)

For our project methodology, we first focused on designing the right thing through research of our target user and problem and synthesis of our findings; we then transitioned to designing things right through solution ideations and delivery.

Problem Space Statement

Hypothesis: People working remotely need an easy way to socialize with their coworkers at will through different mediums during work hours.

Assumptions: 1) People working from home will want an easy way to socialize with their coworkers. 2) People working from home will want to socialize at random intervals throughout the day. 3) People working from home will want to be able to socialize through different mediums. 4) People working from home will not want to socialize with coworkers/supervisors outside of work hours.

Initial Problem Statement: How might we provide people working remotely with the ability to mimic the natural socialization provided in an office setting?

RESEARCH PHASE

Goal of Research

Our goal for initial research was to validate that remote workers need socialization in their professional setting and currently had few to no outlets that satisfied that need.

Methodology

Our research methodology was to conduct short, qualitative interviews with five remote workers via Zoom and learn more about their behaviors, thoughts, and feelings while working from home. We asked open-ended questions such as “Describe how your work-life balance has changed due to being remote?” and “What do you miss most about working in-office?” to draw meaningful observations from our interviewees about their current needs, goals, and pain points.

Affinity Map

Synthesis » Affinity Mapping

We wrote the observations we gathered through user interviews on sticky notes and grouped them in like categories to see if any natural patterns presented themselves. We then took those themes and turned them into I-Statements to better empathize with our user in first person. We used the I-Statements to create insights on which to base our features around.

Insights

  • Remote workers rarely balance work and personal time consistently without an in-office work structure.
  • Remote workers miss the natural and frequent social interaction provided by an office setting.
  • Remote workers prefer working in person on collaborative or challenging tasks.

Persona

We applied the insights from our user insights to create a persona, combining our interviewees into a fictional target user. The persona serves as a representative tool that allows us to make sure that our insights are valid in a real-world setting and also allows us to constantly align our research and design around our target user.

Revised Problem Statement

INSIGHT: Remote workers miss the natural and frequent social interaction provided by an office setting.

PERSONA/PROBLEM: As a result, Samantha often finds it difficult to take breaks throughout the day and ends up feeling overworked.

GOAL: How might we provide remote workers a convenient way to socialize and interact on unplanned work breaks?

RESEARCH » DESIGN (Intersection)

  • Insight: Remote workers miss the natural and frequent social interaction provided by an office setting » Feature: Natural environment to promote frequent socialization within a professional setting
  • Insight: Remote workers rarely balance work and personal time consistently without an in-office work structure » Feature: Time component that will encourage users to take a break regularly
  • Insight: Remote workers prefer working in person on collaborative or challenging tasks » Feature: A way for users to see each other face to face.

DESIGN PHASE

MVP Reveal

The synthesis of our research findings naturally led us to the formulation of our solution: Water Cooler, a video chat feature integrated into Microsoft Teams that regularly prompts users to take a work break by pairing them up with a randomly-selected available coworker for an unplanned video chat (validating the natural interaction, frequency, and face-to-face insights). The feature also includes an optional topic and question generator to reinforce that this call is strictly non-work related and serve as ice-breaker conversation for people that are not totally familiar with one another.

Design Studio: Sketching + Concepting

The three layouts above are initial design concepts for the main video chat screen for the Water Cooler feature within the Microsoft Teams app. The design used in the paper wireframes was a combination of the three sketches.

Lo-Fi Paper Wireframes

After landing on a design concept, we sketched lo-fi paper wireframes to show the interface and functionality of the feature. The sketches start with the Microsoft Teams home screen and the notification of a Water Cooler chat, then lead to the actual chat itself and the functionality of the topic and question generator, then into the Water Cooler home screen, and finally into screens describing the creation of a new chat and setting invite preferences. We used the lo-fi wireframes to create a clickable prototype through Figma that we would ultimately use for our first round of usability testing.

Lo-fi Prototype: https://www.figma.com/proto/Wy7Uku2t66li6zZrlvetIy/Water-Cooler-Prototype?node-id=11%3A0&viewport=175%2C123%2C0.2431872934103012&scaling=scale-down

Takeaways
This portion of the UX Design process allowed us a vital opportunity to think through the feature from the user’s perspective and center our design around their experience.

Mid-Fidelity Screens

After testing the lo-fi clickable prototype and applying the usability feedback from the first round of usability testing (described in detail below), we created mid-fi wireframes to show a more realistic view of what the end-product might look like. We then converted the mid-fi wireframes into a clickable prototype through Figma to use for our second round of usability tests.

Takeaways
The sequential nature of the mid-fi frames and prototype allowed us consider some limitations in terms of usability testing; going into hi-fi prototyping, we need to build functionality that allows users the opportunity to navigate more naturally through the feature to receive better insight into potential areas of confusion.

Mid-Fi Prototype: https://www.figma.com/proto/Sc6pD9OszIRtxbH2Cyos7k/Untitled?node-id=1%3A91&scaling=min-zoom

Initial User Testing: First Round

In our first round of usability testing, we tested the user’s intuitive ability to 1) enter into an unplanned Water Cooler chat, set conversation preferences, and exit the chat and 2) how well a user could create a planned Water Cooler chat, set invite preferences, and send the chat request. As the scorecard illustrates, all of our users were able to complete the intended tasks, with only one participant completing via an indirect path. Going forward, We received positive qualitative feedback that the feature was useful, fun, and would encourage team building.

High-Level Insights

  • Thought feature was useful in getting them to engage and team-build during their breaks
  • Wanted to be able to visually personalize water cooler breaks
  • Wanted more control over default settings when creating a water cooler break

Feature Confusion

  • Struggled between knowing which icon changed topic and which one changed question
  • Couldn’t visually tell the difference between the timer and the clock
  • Didn’t know whether you could select more than one invitee when creating a chat

Takeaways
We realized we needed to word-smith the script for the second round of usability tests because we had inadvertently included some word hints in our scenarios and tasks (such as “Jill” and “friend”) that might have helped our user know where to click on the screen.

Design Iterations: First Round

The annotated wireframes illustrate which changes we needed to take into account when moving into mid-fi design and allowed us some insight into the ideal functionality envisioned by the target user.

Takeaways
The feedback from round one of usability testing illustrated to the team the importance of clear design and how icons that feel inherently intuitive upon design can be still be confusing to the user.

User Testing: Second Round

(As with round one) in our second round of usability testing, we tested the user’s intuitive ability to 1) enter into an unplanned Water Cooler chat, set conversation preferences, and exit the chat and 2) how well a user could create a planned Water Cooler chat, set invite preferences, and send the chat request. Although one user wasn’t able to complete the task of creating a new video session, overall the users had little to no difficulty in completing the intended tasks.

The table above describes the difference between rounds one and two of usability testing: although users perceived tasks to be slightly more difficult through the mid-fi prototype and the average time on task increased marginally, overall the feedback was that the feature was easy to use and fulfilled its intended purpose. We also gathered feedback regarding the tasks and generated recommendations (on a task-specific level) of usability changes to be made in creating the hi-fi prototype.

Task 1: Enter the meeting- Usability Feedback
Task 2: Access the list of available subject matter themes- Usability Feedback
Task 3: Select the theme that will most likely provide questions related to Christmas- Usability Feedback
Task 4: Move on to the next question in the current theme- Usability Feedback
Task 5: Leave the conversation- Usability Feedback
Task 6: Create a new video session- Usability Feedback
Set conversation preferences and ask coworker to join you for a conversation.

Takeaways
Although there was much more usability feedback gathered in this round of testing, the high-level feedback still validated that Water Cooler was fun, easy-to-use, and provided a solution that directly addressed the target user’s problem.

Next Steps

  • Apply recommended usability changes from mid-fi usability test
  • Create high-fidelity prototype
  • Conduct third round of usability tests

--

--