Team Collaboration App

a figma prototype of a team collaboration app

Project overview

  • Team size: 1

  • Software: Figma

  • Setting: project in Graphical interfaces course

This team collaboration app was created as part of the course Graphical interfaces that was a part of my masters.

Features and requirements

Online collaboration is nowadays a natural part of many professionals work life. Much collaboration these days take place online by using collaborative tools. Zoom is just one of the tools. Many are anticipating more remote work to decrease traveling and thus climate impact. However, even collaborative tools are designed by some large teams of designers, we still experience some problems in usage, or, we could envision collaborative tools being much better for online collaboration.

The task we got was pretty straightforward: Make a smartphone application for remote collaboration

These where the minimum requirements:

  • Video and audio calls – with traditional options such as name of the user, off/on mic, and camera options

  • Break-out rooms feature

  • Synchronous text messages – personal and to group

Then there where some additonal features that could be implemented

  • Feature for brainstorming/affinity mapping cards

  • Live collaborative creation – you can choose what kind of content (text, audio, pic, video)

  • Video meeting customisation – the size of the speakers' window/field, position of each participant, shape, etc

The Result

The resulting projcet is a Figma prototype which can be seen here:

Group view

The group view shows the groups you are a part of, as well as potential subgroups. If you are a group administrator, you can see all subgroups as well as add new ones. You enter a group chat by tapping on the group, and from there you can join or create calls within the group, or view the group overview by pressing the group name again. The chats view(the chat icon in the navigation bar) works in the same way but with less functionality, tailored for individual communication.

Call view

The call view works as one might expect, with the regular call functionality of muting, turning on/off video, leaving the call and chatting. What is extra here is the button to go to the call board, for live collaboration. The triple dot button also gives you the opportunity to create breakout rooms, or join if already created. This view is also supported by landscape mode.

Board view

The board view works like a common whiteboard, with options of putting up sticky notes, images, comments, etc. This provides an opportunity for brainstorming with your group. This feature can be used for brainstorming or as a domain for collaborative activities, as it allows for drawing (freehand and with preset shape/line support) and text & image input. These controls can be brought up by selecting the magenta ⊕ button. As with the Call view, a landscape mode is also supported.

breakout room view

The breakout room works like the call view, with the difference that you can leave the room to get back to the call. When creating breakout rooms you can choose to do so either from preset sets of subgroups (individuals that belong to several groups would get invited to all but can choose which to join), randomized ones, or empty ones that participants can join themselves. You also have the option to set a time limit on the breakout rooms.

Learnings

Working on this project was an enriching experience that greatly expanded my understanding of collaborative design. I gained valuable insights into creating designs that are not only intuitive and user-friendly but also easy to navigate. Through hands-on experience with Figma, I honed my skills in building prototypes that are straightforward and accessible.

One key lesson I learned was the importance of simplicity in design. Ensuring that users can easily find what they're looking for and understand how to interact with the design is crucial. I now appreciate the value of making designs as intuitive as possible to enhance the user experience.