Connecting Remote Teams

Microsoft

In spring of 2022, I joined an incubation team to work on a product helping people build connection in a remote environment.

The intent was to bring real-time multiplayer activities and games within the Microsoft Teams app.

In a previous role, I had spent time trying to design curriculum to help remote groups connect during 2020, so this felt like a natural extension of that goal.

Highlights

  • Visual refresh and interaction design for IceBreakers
  • End-to-end design on an original collaborative word game
  • Design & prototyping of a competitive trivia game
  • Component designs for platform navigation

Contributions

Product & Visual Design

As a designer on a smaller team I was able to work on multiple aspects of the product.

I worked on IceBreakers, the newest addition to the lineup along with the 3 classic games that had been reimagined for group play from Microsoft Casual Games.

I was responsible for the design of navigation features within the app, and a component system for the game tiles and ratings we needed to use.

In addition to the elements that shipped with Games for Work, I prototyped and worked on several other games for internal testing.

IceBreakers Visual Refresh

As an incubation we built and tested the conversation starter app. After encouraging play tests and feedback from users, it was picked to be apart of the initial Games for Work launch.

As we approached shipping, we needed to have the visual designs match up with the Microsoft Casual Game properties that would be apart of the collection.

I adapted visual patterns and styling to effectively re-skin our designs in time for the launch.

Communicating & Changing User State

In order to help the leader of a meeting manage the group activity I designed UI patterns with a few key features.

  • Easy visibility of who has taken action or not
  • Ability for Host to remove, add or nudge players
  • Options to keep an activity moving forward if a player was away
  • Ability to transfer host controls
Board Dynamics

One game concept we worked on was based on a collaborative board. Our goal was to create a dynamic that would encourage collaboration. We tried multiple configurations but found there would always be long moments of quiet as people tried to solve their words mostly by themselves.

While we had positive feedback in general, we still didn't reach the level of collaboration we were looking for. This created a "back to the drawing board" moment.

After some more exploration I proposed a dramatic redesign that centered around the moments that did stir conversation. This had all players focused on the same puzzle, but encouraged coordinated strategic guessing and submissions to achieve the goals. The amount of conversation and collaboration was much higher.

IceBreakers Dynamics

It was common to see variation in how participants responded to the activities. Some were competitive and others were more reserved and wanted something low-stakes. I looked for ways to engage less competitive players by offering metrics that stirred conversation instead.

One idea that I introduced to our IceBreakers game was to highlight shared affinity within the group. Rather than a ranking by score, we displayed a "Top 3" of people who responded similarly.

This was a broad success across test groups and sparked lots of conversation even among those who did not know each other very well before.

Nested Navigation

One convenient thing about the Games for Work app is that it is nested inside of Microsoft Teams. This made it easy to access and bring right into your meeting.

The downside is you were effectively using an app, in an app in an app.

The initial navigation flow to launch and manage apps wasn't ideal.
‍
To help with this, I designed a persistent "Games for Work" header bar that included a linked icon to other available games and a reload button for any situations where users might get stuck.

Individually, each game had a visually lighter secondary bar that included game specific options to avoid the cognitive clutter of multiple bars.

Game Tile Components

As an app within teams, Games for Work contained a small library of games.

One component I was responsible for designing was the tile for each property.

Even though we weren't a typical app store, we still needed to include descriptors for the content including:

  • Number of players
  • Typical playtime
  • Content rating by region specific standards and icon

We had a few iterations based on sizing for accessibility and ultimately used these components in a side bar navigation and a drop down menu within the Games for Work app.

Shipping & Release

In November of 2022, "Games for Work" was made available to enterprise Microsoft Teams clients with 4 initial games.

As a fun side note, the release was featured in mainstream press including The Washington Post, CNBC, and a good natured roast by Seth Meyers.

After the initial launch, I continued to work on designing several game concepts.

Recommendations

"...Cameron ramped up very quickly when he joined the team, and took on design ownership for an incredibly challenging experience for a UI that had a LOT of ambiguity and experience challenges to work through, and throughout the entire process from the initial design proposal to the end result he was a joy to work with."
‍
KC Lemson
‍Principal Program Manager
"He is an out of the box thinker who works very well with all disciplines. He produces high quality designs quickly and independently based on a UX framework that he defined with the team. Cameron articulates well his decisions and thought process, and he's very open to feedback. I highly recommend Cameron."
‍
Nadia Fortini
‍Principal Product Manager
"...He quickly became an invaluable member of our ensemble. He is always able to back up his instincts — which are usually spot on, by the way — with the rationale that led to a particular design result."
‍Nathan Smith
‍Principal Software Engineer