Design Project: Designing a Multi-Player Recording Feature for Loom

Project Overview:

I wanted to practice product design.
Rather than a hypothetical project, I chose to design a possible feature for a real company.
I really like Loom, so I took a feature idea from their product roadmap and designed it in Figma.

Ideation

I wanted to build a design portfolio and improve my design skills. Without work experience or a designer job, the way for me to achieve both would be to make my own projects. Rather than some design for a hypothetical company or situation, I decided to design something for a real company.

But first, where do I get an idea for what to design? I like Loom, so I looked at Loom’s product roadmap and picked a feature that’s under consideration to design.

Loom roadmap feature card

The Use Cases

Loom offers a screen recording and video messaging software. Since video messaging is asynchronous communication, why would there be a feature for synchronous group recording?

What would be the use cases? I mainly thought of two.

Group presentations, where the presenters are synchronous but the audience is asynchronous
Hybrid meetings where real-time colleagues send the recording to async colleagues

User Actions and Roles

Next, I considered steps of the user flow that would be necessary for group recordings to work.

There needs to be some way to invite and coordinate with members
Group members need to see the screen being recorded
Starting and stopping recording should not be confusing
Everybody should be ready when the recording starts

As a result, I decided to divide the group members into two roles: The group leader and the group participants.

The separation of roles clearly defines individual responsibilities.
This makes coordination easier since certain tasks (recording, screensharing) are assigned to one person.
Group leader: The leader invites other participants, shares the screen with everyone else when applicable, and is responsible for recording the Loom.
Group participants: The participants receive invitations, join the room, and set their status to “ready” when they are ready to record.
Recording can only happen when all participants set their statuses to “ready”. This makes sure everyone is on the same page for the recording process.

The Loom Room

The feature can be implemented by just adding some details to the existing screens. The new screen being introduced would be the “Loom Room”, which is the screen where group members coordinate. This is where the members invite others, the participants set their ready status, and the leader shares screen and starts the recording.

Designing in Figma

This was my first time using Figma, so I was very clumsy with how I used the tool. I mainly just grouped shapes and texts together. At the time, I lacked a good understanding of frames and auto layouts and layout columns.

Replicating Design Components

In order to make a basic design for Loom, I first made Figma components to somewhat replicate their design system. For the icons, I used an icon plugin in Figma. The fonts and icons were not the same as what Loom uses, but they sufficed for making a rough prototype.

design components for forms buttons and icons

Wireframe Prototyping

For prototyping, I put together a basic wireframe to demonstrate the various user flows. Looking back on the project now, I understand that I still lack experience in making higher fidelity prototypes and designing more detailed interactions.

Other Notes

I would say I’m simultaneously proud of and embarrassed by this project. For my first time using Figma, I did quite alright (even if I did not use it all that well). At the same time, I became more aware of this project’s flaws as I improved.

I might revisit this project in the future, perhaps to design a much better Version 2 prototype.