-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog_20200120_gathertown.html
198 lines (190 loc) · 15.4 KB
/
blog_20200120_gathertown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
<title>Blog</title>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="functions.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
</head>
<body>
<!-- Header -->
<div id="header"></div>
<div class="w3-content">
<div class="w3-container w3-padding-32 grey">
<h1 class="w3-border-bottom w3-border-light-grey w3-padding-16">How to create a virtual office</h1>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto von 2021-01-20 20-03-37.png" width="600" alt="Our office today"></p>
<h3 id="table-of-contents-">Table of Contents:</h3>
<ul>
<li><a href="#motivation">Motivation</a></li>
<li><a href="#gather-town-tool-introduction">Gather.town - Tool introduction</a></li>
<li><a href="#customize-it-to-fit-your-needs">Customize it to fit your needs</a></li>
<li><a href="#what-makes-our-room-an-office">What makes our "room" an office</a></li>
<li><a href="#how-make-your-own-virtual-office">How to make your OWN virtual office</a></li>
<li><a href="#give-it-a-try-with-a-workshop">Give it a try - with a workshop</a></li>
</ul>
<h3 id="motivation">Motivation</h3>
<p>During the Covid-19 pandemic, a lot of people are forced to work from home. Due to cloud applications, homeoffice is a technical possibility for most tech companies (such as <a href="https://sonah.blog">S O NAH</a>, where I work).
But the technical possibility to work from home did not replace what we value most about our work: The interactions with the team and all the non-work randomness that makes working in a start-up (or ex-start-up, now SME) so exciting.</p>
<p>If your team is like us and you are really thirsty for that office atmosphere, here is a possible relief (if not cure) for your problem:</p>
<h3 id="gather-town-tool-introduction">Gather.town - Tool introduction</h3>
<p><a href="https://gather.town/">Gather.town</a> is a web application that is essentially a browser video conferencing tool (like Jitsi, Google Meet or Zoom) combined with an old Pokémon gameboy game.</p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto von 2020-12-20 21-09-48.png" width="600" alt="Gather.town standard world"></p>
<p>You have a character that you can move around on the map with "W", "A", "S" and "D" and when you get close to anyone, the video conference start dynamically.</p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-20%2020-49-23.png" width="300" alt="Video conference starts dynamically when you get close to somebody else."></p>
<p>But the real added value to your team comes with the adaptability of the tool:</p>
<h3 id="customize-it-to-fit-your-needs">Customize it to fit your needs</h3>
<p>In this tool, you can not only go into break-out-rooms dynamically by "walking away" with someone (which is way more fun than on Meet or Zoom), but you can also design the space to support your work culture and the interactions at work, that you are now missing out on.</p>
<p>The easiest inbuilt extras, that might make this video conferencing tool a suitable replacement for a physical office are </p>
<ul>
<li>easily <strong>show your screen</strong> to people near you</li>
<li><strong>games</strong> like scribble.io, poker, mahjong or chess that can be launched just inside the same interface</li>
<li><strong>video screens</strong> (with youtube videos) that pop up when you get close to them<ul>
<li>awesome to showcase your favourite christmas tunes</li>
<li>or show the latest company PR video</li>
</ul>
</li>
<li><strong>whiteboards</strong> that can be drawn on by multiple people at the same time </li>
<li><strong>shared documents</strong> that can be placed in the room, so they are easier to find than by searching for them in the depths of the company cloud.</li>
</ul>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-01%2017-44-31.png" width="300" alt="Bildschirmfoto von 2020-12-01 17-44-31.png"> <img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-01%2017-44-55.png" alt="Bildschirmfoto von 2020-12-01 17-44-55.png"></p>
<h3 id="but-to-make-this-a-replacement-for-your-physical-office-you-need-more">But to make this a replacement for your physical office, you need more</h3>
<p>While gather.town was fun and easy to access for a simple workshop, the standard "rooms" or "worlds" were not keeping my team engaged.</p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-20%2021-35-47.png" width="600" alt="Different standard "rooms" or "worlds" that you can select from"></p>
<p>After the first workshop with this tool ended, everybody left immediately and went back to work. In addition to that, nobody was pleased with my proposal to use it as an alternative to Google Meet:
<strong>"Why use gather.town instead of Google Meet? Only because I can run around - which gets boring soon enough?"</strong></p>
<h3 id="defining-the-goal">Defining the goal</h3>
<p>To really get my team to use this tool and thus <strong>enable them</strong> to get some of the office experience back, I had to define the characteristics of an office that I want to emulate. I came up with the following:</p>
<ul>
<li><strong>separate rooms</strong> that enables private conversations</li>
<li>employees have their <strong>"own" space</strong> where they can be found</li>
<li>employees can <strong>"shut their door"</strong> on the rest when they don't want to be disturbed</li>
<li><strong>internally public information can be presented</strong> (like a whiteboard with the roadmap or a TV with some current KPI stats) to everyone without them searching for that information</li>
<li><strong>communal spaces</strong> where you can have meetings with multiple people</li>
</ul>
<p>Due to gather.town's <strong>mapmaker</strong>, it was possible to incorporate all that!</p>
<h3 id="what-makes-our-room-an-office">What makes our "room" an office</h3>
<p>When you have a "room" in gather.town, the admin (or everybody if you activate it) can upload a background image, which then becomes the world.
I got creative and made an "office" for us in Sims 4, which looks like this:</p>
<p><img src="/blog/20210120_gathertown/The%20Sims%E2%84%A2%204_20201129184916.jpg" width="600" alt="Background image for our gather.town room - feel free to use it for your own virtual office"></p>
<p>I imported that picture into the gather.town mapmaker. It gets set as a background image and you have <strong>tiles on top of it, which can have different functions</strong>:</p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20vom%202020-12-20%2021-53-49.png" width="600" alt="Upload a picture as the background"></p>
<h5 id="impassable-red-">impassable (red):</h5>
<p>This is great to separate the different rooms in the office from each other.</p>
<h5 id="spawn-green-">spawn (green):</h5>
<p>Here, newly logged on participants are starting their journey - I put it at the buildings entrance.</p>
<h5 id="private-pink-">private (pink)</h5>
<p>Only people with the same number on the tile can talk to each other. <strong>One of the most important features</strong>, in my opinion. This is how I separate offices and meeting rooms from each other.</p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-20%2020-49-43.png" width="600" alt="If you are on tiles with the same number, you can talk - if not, you can't"></p>
<h5 id="spotlight-orange-">spotlight (orange)</h5>
<p>This is really useful, until it gets abused.
Whoever is on a spotlight can <strong>talk to everyone, but can't (or doesn't have to) hear them</strong>. We use this if somebody has to make an announcement, but the tile is hidden and only two people know where it is (yet).</p>
<h3 id="how-make-your-own-virtual-office">How make your OWN virtual office</h3>
<p>In the following, I will a brief summary of steps you have to take to create your own virtual office:</p>
<ul>
<li>go to www.gather.town and create an account</li>
<li>create your own space</li>
<li>change url from <ul>
<li><em><a href="https://gather.town/**app**/ZaksdjrPrkGk/your_room">https://gather.town/**app**/ZaksdjrPrkGk/your_room</a></em> to</li>
<li><em><a href="https://gather.town/**mapmaker**/ZaksdjrPrkGk/your_room">https://gather.town/**mapmaker**/ZaksdjrPrkGk/your_room</a></em> </li>
</ul>
</li>
<li>now upload either your own office creation or reuse the office building I have build for S O NAH</li>
<li>edit the tiles to have walls, private spaces, etc</li>
<li>place interactive objects with informational value in the office, like<ul>
<li>employee happiness questionnaire</li>
<li>latest company PR video</li>
<li>games you know your teammates like</li>
<li>pictures of the team</li>
</ul>
</li>
</ul>
<h3 id="special-advice-if-you-want-to-make-your-own-office-background-image-in-sims-4-">Special advice if you want to make your own office background image (in Sims 4)</h3>
<p>These are some tips that can help you get the most out of your own office creation:</p>
<ul>
<li><strong>use cheats</strong> to have unlimited money ("motherlode" yeah)</li>
<li>fill every wall with <strong>windows to have bright rooms</strong></li>
<li>but <strong>basic furniture</strong> in every office in Sims, it has much more variety than gather.town</li>
<li>make every room or office <strong>unique</strong></li>
<li>you have to <strong>exit the building mode</strong> to remove the UI elements for a screenshot<ul>
<li>go to "living" mode</li>
<li>pan the camera to have a birdsview perspective</li>
<li>take a screenshot</li>
</ul>
</li>
</ul>
<h3 id="how-to-establish-a-virtual-office">How to establish a virtual office</h3>
<p>Remember when I said that <em>doing homeoffice is a technical possibility for most tech companies but that does not mean it is going to work just as well on its own</em>? The same applies of course for your virtual office. While creating it is a technical procedure that everyone can do, the real challenge is establishing it. Before you can reap the benefits of what you have sown, you need to put some more work in! </p>
<p>I can recommend the following approach:</p>
<ul>
<li>you (as the initiator) should be <strong>logged in all the time</strong> (while you work)<ul>
<li>you can set your status to "yellow" which activates your camera and microphone only if you are actively in the gather.town browser tab, but you will still hear people that are coming to your office to talk to you, even if you are doing something else on your computer</li>
</ul>
</li>
<li>ask people to have any <strong>meeting with you in the virtual office</strong> instead of using Meet or Zoom<ul>
<li>it really is necessary to be the pain in the a** here</li>
</ul>
</li>
<li>make employees <strong>choose their own room</strong> and write their name on the floor<ul>
<li>next person to join only for a meeting will get jealous and also demand her/his own office</li>
</ul>
</li>
<li>have <strong>events or workshops</strong> there...<ul>
<li>this is where gather.town really excels naturally, so it is easy to convince people to join for such an occasion</li>
</ul>
</li>
<li>...where you <strong>use all the different tools</strong> that are available<ul>
<li>I integrated a lot of the tools into our christmas party, which was a great showcase for how to use them</li>
</ul>
</li>
</ul>
<p><img src="/blog/20210120_gathertown/session-2020-12-29-185154.jpg" width="500" alt="Share your screen with a video, so everybody watches it at once - here everybody is folding a paper christmas tree"> </p>
<p><img src="/blog/20210120_gathertown/session-2020-12-29-185320.jpg" width="500" alt="Put a quizz as a shared document at the table, so everybody has access without asking you for the link constantly"></p>
<p><img src="/blog/20210120_gathertown/session-2020-12-29-184901.jpg" width="500" alt="Big meeting in the office"></p>
<h3 id="give-it-a-try-with-a-workshop">Give it a try - with a workshop</h3>
<p>If an actual virtual office is just too much to start with, then <strong>a workshop is a good way to try out the tool</strong> and see the responses and interactions of your coworkers. We used the tool the first time for a strategic workshop and it got overwhelmingly good responses:</p>
<ul>
<li>4,4 of 5 rating for the workshop</li>
<li>4,5 of 5 rating for doing such a workshop again</li>
</ul>
<p><em>(I do the same questionnaire, which takes about 1-2 min for every participants, after every workshop or company event and this has been the best rating I ever got)</em></p>
<p><img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-29%2019-02-24.png" width="400" alt="Bildschirmfoto von 2020-12-29 19-02-24.png">
<img src="/blog/20210120_gathertown/Bildschirmfoto%20von%202020-12-29%2019-02-37.png" width="400" alt="Bildschirmfoto von 2020-12-29 19-02-37.png"></p>
<h3 id="to-get-the-most-out-of-your-workshop-here-are-some-final-tips-to-make-it-work-well-">To get the most out of your workshop, here are some final tips to make it work well:</h3>
<ul>
<li>have <strong>alternating group sizes</strong> at different stages of the workshop<ul>
<li>surely you will have some discussion with <strong>all workshop participants</strong></li>
<li><strong>smaller subgroups</strong> (e.g. departments) that do certain methods together, depending on what workshop you do</li>
<li>I can also recommend some "sparring" (presenting your results and getting feedback) randomly with <strong>another team member 1:1</strong> before presenting the results to the whole groups</li>
</ul>
</li>
<li><strong>use the interaction possibilities</strong> in the world - instead of posting into the chat or sharing links to external documents<ul>
<li>the <strong>screen share</strong> function is the easiest way to present a method that the participants are going to do</li>
<li>alternatively you can set up a <strong>interactive video screen</strong> with a youtube video explaining the method you are using - this way everyone can go through the instructions at their own speed</li>
<li>have <strong>a shared document placed on a virtual conference</strong> table - where the results of the different methods are written down (we use Google Slides for this mostly) </li>
</ul>
</li>
<li><strong>utilize breaks</strong><ul>
<li>you should always incorporate specific breaks into your workshop, but especially keep it in mind for trying out gather.town</li>
<li><strong>place games around the world</strong> you are using - so people can use the break to experience the virtual world and learn the interaction possibilities while having fun </li>
</ul>
</li>
<li>place <strong>easter eggs</strong>, to have some "secret" interactions to find for people who are exploring the world, e.g. <ul>
<li>a funny youtube video</li>
<li>a passable wall into an otherwise unaccessible part of the world</li>
</ul>
</li>
</ul>
<h3 id="thanks-for-reading">Thanks for reading</h3>
<p>If you've enjoyed this article or have constructive cristicism, feel free to contact me. I would also <strong>love</strong> to hear about your experiences, if you try this out.</p>
<p>Jonas Zagatta |
CKO @ S O NAH |
zagatta [ at ] sonah.tech |
zagatta.github.io</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>