Space customization for teams on Gather
WEB APP · Onboarding/Activation
Giving Space Admin the ability to instantly transform their office space as their team shapes its culture and evolves over time.
Responsible for designing the feature end-to-end, working closely with engineering to architect the template switching system.
Jul 2022 - Aug 2022
Launched in August
Start off with one of our remote office templates when creating your first virtual office on Gather.
These templates allow you to quickly get started with optimal office layouts, while still allowing you to customize the space to reflect your company culture and mission.
First template wasn't the one for your team? Space Admin can instantly switch to another map theme and size that better suits their teams needs.
Any changes can easily be reverted by restoring a backup of the previous map template with all customizations.
With the shift towards remote work, Gather offers virtual office spaces that bring your team together in one place to hold meetings, collaborate 1:1, spur spontaneous conversations, and host team socials.
Conversations are held through video/voice chat with an avatar representing you in the virtual office space.
Physical or virtual, an office space should be functional, visually appealing, comfortable, and inviting — all of which promote productivity and efficiency.
A virtual office space allows for full creativity control over the office design with no constraints around budget and size compared to physical office buildings.
Gather creates virtual environments with the use of pixel art to represent physical space, furniture, objects, and people.
Companies can design their offices by using our in-house templates, utilizing our map making tools and assets, or working with one of our ambassadors to fully build out their office.
Most teams trying Gather for the first time are not ready to build out their own office. They are looking for a work environment that is familiar and functional but inspiring to work in every day.
New users were taken through a quick space creation flow that generates a standardized office map so teams can get started working and collaborating right away.
But was our office template design hurting activation?
We found a large percentage of new office spaces were abandoned within the first few days. Our team wanted to explore if there were hold ups in activation due to space design and space setup process.
I sat in user interviews with active and churning users to understand what issues they are facing regarding setting up their office space.
Office design can be very personal to each company as it is a reflection of their brand and culture. Some companies felt that our template was too whimsical or not serious enough for work.
After space creation, templates were difficult to edit with existing tools and could not be switch out for a different size. This led some teams to churn as it took too much time and energy to set up a new space.
Offer multiple template options at space creation to test if customers gravitate towards certain styles.
After space is created, provide space admin with a system to switch templates out for a different one.
✦
Try to minimize disruption to active users in the space when any map changes are made
✦
Can we make this a multiplayer experience? Input from the team is valuable when choosing a shared workspace
✦
How should we tackle version control and saving existing space customizations?
Identifying our target users helped us shape our feature and make design decisions geared towards our primary users.
For Space Admin that want to try out different office styles and office sizes before fully bringing in their team. Less concerned about destructiveness or disruption since there may be little to no other users or customizations in the space.
For Space Admin who want to try the newly offered office styles or change the size of their office space based on their team needs. More concerned about destructiveness or disruption since it may be an active space.
The Maps team worked on designing 3 additional office template designs in different themes using our established pixel art style.
✦
A desk for each team member and desk pods so members of each specific team can sit together
✦
1:1 meeting areas, small group meeting areas, and large group meeting rooms
✦
Hallways where you can naturally bump into each other
I updated the design of the office template picker by building off the existing design. I added a section for theme options and enlarged the preview image for a better viewing experience. I also added informational text to communicate that changes can be made later.
Our team discussed how we should store and update map data. We prioritized the new user experience
A space can store multiple maps, but only one map can be active at a time. Maps remain independent from each other.
✦
Better for more developed offices with larger, custom changes that also care about preserving old versions
✦
Similar to moving from building to building
A space hosts a single map that can be overwritten by a new map template. A backup of the previous state will be created.
✦
Better for just getting started or making small changes like keeping theme but changing space size
✦
Similar to renovating an existing building
Our team ideated on a few ways we could allow users to test templates in the space. We opted for a format that prioritizes new spaces and allows all users to try out the templates together. We also heavily prioritized feasibility and short engineering time.
Overlay or transport user(s) to a simulated space where they can test templates by walking around before updating the live space.
✦
Simulation allows for template testing without the disrupting the real space
✦
More design and engineering complexity
Preview template options and update the map template in the live space instantly.
✦
Template changes disrupt the real space but enables input from other users directly
✦
Design and engineering is more straightforward
I designed a new tab 'Map' within the Customize panel to hold all map related editing features. This tab is only available to Space Admin to prevent unauthorized changes.
Space Admin can select a different size or theme map template and preview large map images before commiting to a change.
When a template change is made, all users in the space will be transported to the lobby of the new map and informed of the change via a temporary pop-up on screen.
In the case that Space Admin want to revert back to a previous version, we save a backup of the map and customizations whenever a template change is made. When a previous version is restored, all users will be transported to the lobby of the restored map.
Empty state
Informational tooltip
Restore and Delete functions
Updating the map template takes a few seconds so I designed a loader to show the change in progress. I envisioned a working hammer to represent a space under construction. The final animation was a collaboration with Shaoping, our interaction designer.
To reduce production time, we limited the number of template sizes for each new template design. I designed a disabled state with tooltips to communicate template availability.
To introduce the new feature, I added badges and tooltips to educate Space Admin on where to try different map templates and the effects of template changes on their space.
After release, we quickly realized there may be some selection bias if the template theme options were positioned in the same spots and the same theme was pre-selected. So we randomized the position of the template theme options moving forward.
Our hypothesis turned out to be true. When given options, teams lean towards different styles. We also learned certain styles had better activation rates than others.
Now that we have a system for delivering and testing map templates, the Arts & Maps team kicked off a new project to experiment with different map and avatar styles outside of our pixel art style.
%202.svg)
.svg){kind=icon}