Collaborative Meeting Software UI Redesign

Output

STUDENT PROJECT (FICTIONAL)

Role

INTERACTION & UI DESIGNER, STRATEGIST, RESEARCHER

Background

Teams is an app that facilitates meetings and collaborative opportunities for students and teachers. It solves communication barriers in online educational settings by allowing users to hold virtual meetings where participants can view and talk to each other.

Objective

I was asked to redesign the Teams meeting task flow and UI. The goal was to address a lack of peer-to-peer collaborative learning and engagement for students of post-secondary design programs.

Strategy

Secondary research found that Teams doesn’t allow students to easily talk one-on-one or see classmates’ work. In a study by Marshalsey and Sclater (2020), students described a feeling of “…having a wall between them and their class,” comparing in-person to online.

I conducted interviews about online collaboration with design students and teachers at St. Lawrence College (SLC) to gain local perspective. The inability to work next to people was the largest issue. Both parties expressed a need for in-app tools to help them work together.

The mandates created from research were to streamline communication using minimal inputs and offer more collaboration options between individuals in class.

Design

The solution I developed is a virtual design studio for Team meetings with movable participant avatars. Communicating with one another is easier as students gather in private spaces called Bubbles. Students may talk privately, directing audio only to individuals. Collaborative tools such as mind maps and sticky notes are available. These are placed on the Teams meeting board for anyone to interact with.

A think-aloud test of the original design was conducted with users to determine usability. They appreciated the privacy and tools in helping with collaboration. Some users didn’t realize the Bubbles were interactive due to their neutral colours. They had trouble understanding the difference between the different text tool icons in the Collaborative Toolbar.

Revisions added an interactive purple outline to the Bubbles to facilitate understanding. The various text options in the Toolbar were nested into one area with a pop-out menu to help users distinguish the tools.

The final high-fidelity prototype can be found here.

Challenges

Designing the Bubbles was difficult as users didn’t initially understand its functionality as a place for their avatar to enter. This was addressed by iterating with various door metaphors, colour treatments, and conducting desirability tests to determine user understanding. The final design was based on a latch door as it proved successful with users.

References

Marshalsey, Lorraine, and Madeleine Sclater. “Together but Apart: Creating and Supporting Online Learning Communities in an Era of Distributed Studio Education.” International Journal of Art & Design Education, vol. 39, no. 4, Nov. 2020, pp. 826–40. EBSCOhost, https://doi-org.stlawrence.idm.oclc.org/10.1111/jade.12331