CommonSpace Cover Image
About
CommonSpace is a virtual breakroom which allows employees of organizations to socialize with each other in a common, shared space.

This space mimics a physical room such as a cafeteria, by using isometric, 3D representations of objects, to make the experience of virtual socializing as immersive as possible. In this space, users can take a virtual seat at a table and have conversations with their colleagues.

What makes CommonSpace different from a regular video call, is that by using picture-in-picture video, individuals can also see employees who are seated at different tables. It allows users to have impromptu break sessions for informal conversations with their colleagues - and also allows them to “bump into” other users who are also on a break - this allows users who are on a break and who are willing to have casual conversations visible and easy to approach.
Context
“The Covid-19 pandemic introduced new circumstances forcing us to think fast to innovate and design which resulted in accelerated innovation as a response to address the new challenges & constraints of a touchless world. Most of the solutions were to mitigate the challenges of critical but temporary in nature and possibilities are still there waiting to be explored. Although, it was not a surprise anymore, the second wave did more damage, forcing us to re-think some permanent changes in view of an impending third wave.”

This project was undertaken as part of my pre-thesis project in my final year of college. The unit, named “Re-wired: Re-orienting Human-Technology relationships in a Post Pandemic Era” required us to re-orient the disoriented relationships through design interventions at individual & community level in both urban & rural settings.
The Application
Registration Page
Opening CommonSpace for the first time prompts the user to register their account - which gets linked with their MS teams account. Fields such as “Interest” allow the user to put up some information about themselves, and serve as conversation starters and icebreakers which can be viewed on an individuals profile page.
Registration Page Mockup
The Breakroom
The breakroom features tables spread across a virtual space, mimicking a physical space. Here, users can see individuals who are seated at different tables, but can join the conversation only upon joining their table. This allows users to discover and find other employees who are on a break and strike up a conversation. This space also features a Bulletin Board, which can be viewed by all members.
The Breakroom Mockup
Members List
The members list clusters individuals according to their tables. Each table also indicates the number of empty seats that can be occupied at the table. From this list, users can easily navigate to a table by clicking on the individuals name. By opening up the context menu, individuals can also invite someone over to their table, view profiles, or send them a message on MS teams.
Members List Mockup
Join Table
Upon joining a conversation, the room zooms into the table and keeps the individuals at your table in focus. The toolbar offered uses the same layout as a MS Teams video call, in order to maintain the familiarity with the layout and icons.
Join Table Mockup
Zoom Feature
While seated a table, the user can also zoom out by scrolling, or by using the zoom buttons in the bottom right corner. This way, users can look around the breakroom. A highlight is also placed around the users current table, in order to easily navigate back. Whilst zoomed out, the users focus is brought back to the table after a couple of seconds of inactivity.
Zoom Feature Mockup
Bulletin Board
The Bulletin Board can be accessed and viewed by all members of the breakroom. Users can put up doodles, post its or even share images with captions. All unpinned posts get cleared ever Monday, to ensure the least amount of clutter.
Bulletin Board Mockup
Secondary Research
To start off, I listed areas that interested me as well as contexts and tech that would arise due to Covid-19. Some of the areas were telemedicine, inclusivity in the pandemic, remote working and work life balance among the others. Work Life Balance was interested me as it was something that I noticed was changing from first hand experience. As a part of my research, I looked at themes such as Work Life Balance, Long Term Impacts of Work from Home, Future Work Policies and Gen Z’s & Work from Home.
Secondary Research Affinity Map
Key Insights
Secondary Research Insights
Primary Research
Method 01: User Survey
Conducted a survey in order to seek out the experience that employees had in their first few months of work at their organization in the aspects of networking with employees, receiving mentorship, socializing with colleagues and communicating with their team members. This survey collected responses from individuals who started working in a remote environment, as well as individuals who started in an office environment, and was hence able to draw parallels between the two work models.
To what extent have you been able to network with members from other teams?

Data showed that individuals who started working in office were able to network with other members at a larger extent as compared to remote employees.
This data directly correlated with the data displaced in the next question,
Research Chart 1
Research Chart 2
Did you proactively try to network with other colleagues?

94.7% of employees who worked in office said they proactively tried to network with other colleagues, while more than half remote workers said they did not
Rank The Following: Which aspect do you feel you are missing out in a virtual environment?

Individuals who started in a virtual environment, ranked Networking as the first aspect they are missing out, followed by Mentorship – but in both graphs, the aspect of Socializing has a high number of votes – showing that although Networking and Mentorship are important, the social aspect also has importance for the younger generation and new joinees. In Office employees ranked Socializing first, followed by Networking – while mentorship took the back seat for them.
Research Chart 3
Method 02: User Interview
Interviews were conducted with new joinees at organization to find out in depth about their entire process when they joined, and their experience in an online environment with regards to their work, their interaction with their mentors and colleagues and their ability to network and  socialize with others. The interviews focused around the main themes of Socializing, Networking, Mentorship and Communication in their current work model.

The following are the findings and insights:
  • Relation with their mentors and bosses were strictly professional – because they did not know anything about their mentors and had never met them in person. They didn’t have anything in common.
  • They limited their socializing as they felt like they were pushing boundaries, due to the seniority of their colleagues.
  • They weren’t aware of other employees in the company as they didn’t interact or see them. Their interaction was usually limited only to their immediate team or others who they had to work with.
  • When they started meeting their colleagues in office, they observed their relation with them evolved and there was more cohesion. They felt more comfortable with their mentors and bosses.
  • When they are sitting idle in a remote environment, interviewees reported watching Netflix or taking a nap to pass time. But when they were idle in the office, they said they would have no other option but to socialize.
  • They also reported to ability to get more solid projects when sitting idle in office, as their bosses would notice them, and also as it was easier to approach their seniors for more work.
  • They received feedback faster in office, as their seniors were around and would be able to provide casual on-the-go feedback on the projects – this in turned saved them the time and effort of having to make multiple revisions. But on the downside, one interviewee said that this felt controlling and didn’t leave any scope for exploration.
  • In an online environment, when the Virtual Meeting call ends, you immediately get disconnected from the other individuals. When you are in person, you are still around the individual, and that leaves scope for conversations and socializing.
Following the insights gained from the secondary and primary research and by drawing connections, I narrowed down to the initial problem statement. Further focused research was conducted which helped me zero down to the final problem statement that would guide the remainder of the project.
Problem Statement
How might we bridge the physical and digital words so that younger employees can experience the same kind of individual development opportunities in the aspect of socializing and networking with their colleagues.
Analysis
User Personas
Collecting information that I received through the primary interviews that I conducted, I put together a persona for my target audience. This helped me keep the user at the center, as it laid out a focused group I would be focusing on, with their specific needs and frustrations addressed.
User Persona
Empathy Map
Empathy Map
W's Map
5 W's Map
Develop
Information Architecture
I created an information architecture to visualize what the logical flow of the service would be.
Information Architecture
User Flow
I further mapped out the proposed user flow to represent how the user would move through the service
User Flow Diagram
Low Fidelity Wireframes
Low Fidelity Mockups
User Testing
In order to conduct user testing to validate the prototypes, I listed out the possible user tasks, and narrowed down to five of the Critical User Journeys.
User Testing Tasks List
After setting up the CUJs, I conducted offline as well as online user tests. A Figma prototype was set up, with intermediary screens in between that described the task to the user, along side the verbal explanation provided. Users were encouraged to think aloud while completing the tasks.
Task Success Rate
Task Success Rate Table
Time On Task
Time on Task Table
Satisfaction Score
Satisfaction Score Table
Following the tests, users were asked what they liked the most, what they liked the least and for reccommendations - regarding specific tasks, as well as the overall design. Based on the test results and the feedback given by the users, further iterations were made and implemented in the final design.
View the detailed process and documentation of this project below