Teams Chrome Extension


Make Microsoft Edge your own with extensions that help you personalize the browser and be more productive. Google Chrome Extensions are add-ons that allow users to customize their Chrome web browser. They are downloadable through the Chrome Web Store. Extensions are most often written in HTML, JavaScript, and CSS. Here are 9,712 public repositories matching this topic.

Creating an assistive tool that facilitates design processes, and promotes a productive environment for students virtually collaborating


The prototypes were created as a part of my Advanced HCI Design (INFO 4400) semester-long project at Cornell University.


This project consisted of 4 team members including myself. As a product designer and researcher, I contributed towards the Human-centered Design (HCD) process by conducting user focused research (i.e. literature review, contextual interviews and diary studies), affinity diagramming, storyboarding, persona creation. I lead the prototyping phase and independently created the high-fidelity Figma prototype.

Key Skills/Tools/Methods

Figma, HCD process, diary studies, contextual user interviews, affinity diagramming, storyboarding, persona creation


My initial exploration shed light on the increasing trend of virtual collaboration both in academic and industry settings. As educational institutions are spread across the globe, distance learning and virtual collaboration have become ubiquitous. In addition to this increase in global learning opportunities, the pandemic has pushed institutions to move to virtual instruction. How can student teams adapt to this new status quo?
Design-oriented classes include a great deal of group project work to provide hands-on experience. The creative collaboration process in virtual contexts can be affected by communication barriers, unfamiliarity, varied work styles and lack of physical proximity. How can students ensure an effective and functional team dynamic? How can teams organize work and improve productivity?

Project Based Design Course

Chrome extension for teams

Project-based design courses are classes where most of the semester is spent completing a design project.

Virtual Design Teams (VDT’s)

A virtual design team is a group of people in geographically dispersed locations working together to solve a design problem.

Existing Tools

Team members of virtual teams heavily rely on electronic communication and collaboration technology to facilitate interactions among them. Popular prototyping and communication tools include Zoom, Figma, Slack and Facebook Messenger.

Related Work

Me and my teammates presented a cross-disciplinary literature review on virtual design collaboration. Three overarching concepts came to light, the quality of work done virtually depends on the organization and communication of the design team. Clickhereto read the full literature review.

Research Questions

Further, 3 research questions were developed to guide the user studies.

Question 1

What factors do students in design teams value as most important to success and what factors do they associate with failure?


Question 2

What motivates students in design teams to perform tasks well and on time during virtual design?

Question 3

What tools are VDTs already using and are they effective at fostering organization and communication?

User Discovery

To answer our research questions, we conducted contextual interviews as well as diary studies. These methods were chosen to better understand users’ needs first-hand all the while being respectful of their situations during the pandemic.

Why Contextual Interview?

The virtual contextual interviews highlighted overall perceptions, challenges faced, habits, styles, and concerns of working in design teams.

Why Diary Study?

The diary studies helped in obtaining rich day-to-day inputs about working in design teams, in understanding certain nuances and reduced users’ reliance on recall.

Method 1: Contextual Interview

The virtual interviews provided rich contextual data since we were looking specifically at virtual design team collaboration. I took the role of note-taker as well as interviewer. Click here to read the full contextual interview plan.


The selection criteria for participants stated that they either previously attended or are currently attending classes that require working in groups to solve open-ended design problems. The participants were recruited using referral and snowball techniques.

Ethical Issues

Students may feel uncomfortable sharing information about challenges or conflicts that they have had with teammates. Questions that may trigger negative experiences were probed with caution. Additionally, collected data was anonymized.

Interview Procedure and Data Collection

The interviews were 20 minutes long and done using Zoom/Google Hangouts with an interviewer, interviewee, and notetaker. The data was collected in the form of notes/observations, anonymized, synthesized, and then used to draw insights.

Interview materials

The interview materials consisted of consent protocols, interview protocol and meeting links. The interview protocol consisted of questions about expectations, responsibilities, tools, conflict management, schedules and previous experiences.

Total Participants
Male Participants
Female Participants
Age Group

Method 2: Diary Study

The diary studies provided rich detailed insights about day-to-day activities and augmented the contextual interview data . I recruited participants, sent out reminders and analyzed the findings. Click hereto read the full contextual interview plan.


The selection criteria for participants stated that they should currently be attending classes that require working in groups to solve open-ended design problems. The participants were recruited using referral and snowball techniques.

Ethical Issues

Students may feel uncomfortable sharing information about challenges or conflicts that they have had with teammates. Questions that may trigger negative experiences were probed with caution.

Interview Procedure and Data Collection

Diary studies based on feedback were conducted to obtain valuable qualitative data. The week-long diary study was started on a Monday, the beginning of a school week.

Throughout the week, the students were asked to fill out a Google form. At the beginning and end of the study, they were also asked to complete an entry and exit survey. Timely reminders were sent everyday at 9 PM EST.

Interview materials

The interview materials consisted consent protocols, instruction template, daily reminders, daily Google survey, entry and exit interview protocols. The daily survey consisted of questions about tools, progress, conflicts and daily thoughts about collaborating with teammates.

Total Participants
Male Participants
Female Participants
Age Group

Affinity Diagramming

Using the data in the raw interview notes and the analytics from the diary study, I identified key points and extracted activity notes. Then to better organize extracts, me and my teammates assembled our notes into clusters to form an affinity diagram, developing themes and categories that align with the research questions.


Use of webcam helps feel more connected to teammates. Real-time communication plays a key role in putting across honest thoughts, managing conflicts and reducing misunderstandings.

“We were all productive on camera. We used webcams to check on other teammates – which increased accountability”


Students feel confident in the abilities of current tools (e.g. Figma, Google Suite). Differing work styles contribute to the failure of organization in student design teams.

'Figma is easiest to collaborate with since I can see what my other teammates are doing in real-time.'


Students are motivated by external forces including the perceptions of their work by peers and instructors.

'In group work, we keep each other accountable and personally I feel more guilty if I don’t make set/agreed upon deadlines”. I feel like I am letting my teammates down. I also feel happy when we receive good feedback from the instructor!'

Refined Microsoft Teams Extension


Insights from the affinity diagram clusters informed details of the persona, thus truly representing the target population. Sarah is an Information Science Master's Student who aspires to become a UX designer.

The user persona was referenced throughout the project to ensure that the solution met all the requirements of the target user.

Insights from Discover Phase

Three main success criteria of virtual design teams were identified from the Discover phase: real-time collaboration and communication, accommodations for asynchronous sharing which include effective task management and version control, and facilitating team motivation.

Tool Overload

Current collaboration/communication tools (e.g. Zoom, Slack, Trello, Figma) are state-of-the-art and excel in their niche areas. Students however struggle to balance the myriad of tools available and need a more streamlined all-in-one task management tool.

Pivoting the Design Direction

Following the tool overload problem the design direction pivoted to innovating a browser extension that integrates all other tools in real-time. One that facilitates dynamic control and overview functionalities.

Rationale: Why Google Chrome Extension?

A Google Chrome extension is an apt form as all collaboration/ communication tools are accessed through web browsers.

Proposed Solution

A Google Chrome extension called Viionwas proposed, Viion is a one-stop shop with gamification and tool management features. You can access all web-based applications required to effectively collaborate with your teammates!


Additionally, I created storyboards to visualize how this tool would be integrated into a team’s workflow. The salient functionalities visualized include Dashboard, Workspace, Schedule, Tool Tracker, To-Do’s, Onboarding and Settings:

  • Dashboard: The Dashboard section acts like the homepage of the extension; it consists of user cards, recent activity and notification sections.

  • Workspace: The Workspace section allows users to accept invitations, choose, view as well as add/edit workspaces.

  • Tool Tracker: The Tool tracker shows the card views of all the tools in a particular workspace as well as dynamic real time statuses about active members. The tools can be viewed by clicking on them and then edited at any time.

  • To-Do’s: This feature allows team members to track all the current tasks, their deadlines and assignments as well as check completed tasks off.

In addition to these main functionalities the Chrome extension consists of Onboarding and Settings sections..

Microsoft Teams For Chrome


Low Fidelity Sketches

My teammates and I discussed about key specifications, space efficient placements, security features, control and feedback. I then sketched out the basic screens of the Google Chrome extension.

High-fidelity Prototype

Following the cognitive walkthrough (see Evaluation section), I designed the high-fidelity Figma prototype of the extension and added the interactive elements.

The prototype consists of all the elements outlined in the initial sketches along with a set style and brand identity. Key visual considerations are as follows:

  • The side navigation bar consists of icons representing the Dashboard, Schedule, Tool Tracker, To-do’s and Settings sections.

  • To ensure the best use of the small canvas space icons consisting of tool-tip hover animations were used instead of traditional button titles.

  • To ensure users can view real-time statuses of other collaborators, team member pictures with online/offline markers were used.

  • Card views – for workspaces, tools and user information – were used to ensure a coherent visual hierarchy across screens.

Interactive High-fidelity Prototype

Teams Calling Chrome Extension

Click through and interact with the final high-fidelity prototype! The Figma prototype has been embedded on this website, you can either view it here or access it on Figma directly.

Cognitive Walkthrough

My teammates and I conducted a cognitive walkthrough and feedback session in class. We received feedback from the instructor as well as fellow classmates. the key discussion points included efficient UI space considerations, shortcuts and privacy. My classmates drew from own experiences and discussed about how such a tool could be put to use.

Due to constraints surrounding the pandemic the design walkthrough was completed but further prototype iterations were not developed.

Microsoft Teams On Google Chrome


Through virtual interviews, diary studies, and literature review, it was discovered that the key to successful virtual design teamwork lies at the intersection of organization and communication. By iterating upon designs, Viion was developed, a team management tool for virtual design teams that is implemented as a Google Chrome extension.

Viion has the potential to improve students’ attitudes towards learning, motivate teams to collaborate and leverage the diverse skill sets brought in by different members.

Viion can be extended to support remote instruction and learning experiences. Such a tool not only increases overall productivity, but also ensures an enjoyable work experience.

Success Criteria

Measuring success based on stakeholder analysis included 1) supporting real-time collaboration and communication 2) accommodating asynchronous sharing coupled with effective task management and version control 3) facilitating team motivation. Through user interviews and cognitive walkthroughs it has been confirmed that the above criteria has been met.

Measuring the success of this project in terms of the coursework expectations included 1) application of class concepts 2) execution of HCD concepts 3) effective presentation. This project met the above criteria and has been assessed by the course instructor accordingly.

Overcoming Constraints

The shift to virtual conduct disrupted the collaboration process and posed constraints but informed by these personal experiences, my teammates and I innovated workarounds to effectively conduct human-centered design processes.

Teams Chrome Extension

Chrome Teams Download

A novel solution was successfully innovated to support virtual team management, motivation, organization and remote communication.

Bottom Line

In the global move to virtual collaboration, there is a strong need to motivate virtual design teams, innovate effective communication channels and support efficient team organization. Utilizing gamification, real-time communication and management features Viion attempts to address this need, empowering virtual design teams to customize their workflows at both the individual and team level.

Refined Microsoft Teams Chrome Extension

Through this project I hope to contribute towards emerging HCI research on VDT’s and encourage further innovation of supportive and collaborative environments for students. Looking forward, I see this as a step towards building virtual design environments that support students and prepare them for the next era of virtual industry-level collaboration.

This project was carried out as a part of the my semester-long project for Advanced HCI Design (INFO 4400), under the guidance of ProfessorGilly Leshed, Senior Lecturer and the Director of the MPS program in the Department of Information Science at Cornell University, and Jingjin Li, graduate teaching assistant..