Video chat for FigJam

Exploring light, synchronous collaboration

Background

FigJam is an incredibly fun, light and effective tool for collaboration. Recently, I’ve used it extensively in school projects as it helps us gather, sort and document our ideas.

Sometimes FigJam works best asynchronously — especially when gathering your own research.

However, I find myself frequently gravitating towards a more synchronous work style as it can ensure nuanced information doensn’t get lost. This is especially important in brainstorming and analytical phases which FigJam is perfect for.

Since my team often works remotely, we end up on a video chat of some sort. To minimize the effort to meet, I’ve started calling them in our messaging group. But even this makes it quite challenging to work in FigJam at the same time. Since I want to see my team member’s faces, I resize windows at the expense of my FigJam experience.

This got me thinking: how could video chatting be integrated into the FigJam experience?

Considerations

As I already mentioned, FigJam is very playful and light. Collaboration should be easy, fast and without barriers. So traditional video chat layouts wouldn’t work as they mainly focus on more deliberate conversations.

In FigJam, the work should be the focus with video only supporting the conversation.

So, to only include the bare minimum for a distraction free experience, I aimed to support the following fuctions:

• See who’s currently in the chat
• Starting a video chat
• Joining a video chat
• Viewing the member’s cursor colors
• Mute/turn off camera
• Mic and camera settings
• Change position of videos
• Leave video chat

Explorative design

At first, I thought about having videos moving with the cursors — combining how comments and collaborative cursors work — but quickly realized that the experience would be too confusing and hectic.

To start a video jam (the naming further communicates that it’s a lighter video chat experience), I added a simple button.

But when other’s already started a video jam, I wanted to highlight the ongoing conversation and invite other members to join. This is why I created an additional banner.

To not disturb other’s workflows though, I made the background of the banner translucent.

Before joining the video jam, I wanted to give user the opportunity to check their video and audio so they can feel more comfortable entering the conversation.

For the actual video chat itself the user won’t be able to fully see their own video as that can cause stress and a lack of focus (we tend to look at our own video way to much).

All videos are essentially floating circles to enable a lighter collaboration experience that’s focused on actual contents while incorporating the element of human connection.

When muting or turning off the camera, the icons will show so clearly. This ensures user’s aren’t confused about the state of their audio and video.

Since videos on a digital work environment could go against individual’s layout preferences, I included options to move the videos to the sides as well.

And lastly, to ensure the floating elements of the video call can be seen over a complex FigJam file, I put all information into buttons and containers that also matched the rest of Figma’s own UI.

Overall, this was a very fun exploration to see how I could remove barriers for collaboration. This was a very short exploration without any context or constraints the team at Figma has to keep in mind.

Next up

I’ll be looking at the internal system at Aalto University for choosing electives. Students need to consider many constraints when picking additional classes but the current system barely assists them with that.