A 3D immersive office for distributed teams, where people collaborate, meet, and socialize

TYPE
‍Group Project
‍
‍TEAM
‍1 product manager
3 product designer
‍
‍DATE
‍Sep-Dec 2022
‍

TOOLS
Figma, Rhino
‍
ABOUT
This project studies how to enhance productivity and facilitate social communication in a hybrid working setting. No matter where the team member is, SpatialMeet helps people connect and feel more immersive.
‍
MY ROLE
Led the whole design process

Since the beginning of pandemic, the hybrid office mode has become the mainstream. However, there are many problems in traditional office software, such as the inability to connect people, lack of immersion in work, and hard to collaborate closely. At present, Microsoft and Meta are exploring the possibility of office products from multiple dimensions, so I also start thinking about what's next step.

I led the team to design a smart office product to address boredom and lack of immersion while working.

It all starts with one simple question for everyone at work

Why am I so unproductive and so isolated?

You might be familiar with this scenario:
‍
Following company policy, you start your day teleworking. Intense work schedules prevent you from communicating with your colleagues after the meeting. A lack of work atmosphere at home reduces your productivity and enthusiasm. You start to miss the happy office hours of face-to-face communication.

There was a lot more to this project, but I am only using this as an example of my design thinking process.

Solutions?

Online immersive workspace for hybrid teams to get efficient simultaneous work and team building anytime, anywhere

Solutions?

Customize

If you don't know if the clothes online are right for you, how about creating "Another Self" and having him/her try it on?

Spatialize

If you want to make the effect more realistic, how about putting "Another Self" in your real room?

Streamline

If you want to change the color or size, you can simply selecting the choices.

Socialize

If you want to see the details of the product, try to approach the avatar.

Join our team

◉ Initial Design Question

How might we create an immersive office product?

Join our team

◉ UNDERSTAND THE PROBLEM

Employees have some pain points when working in a hybrid office mode.

Semi-structured Interviews

User feedback on existing office products

Purpose
‍In order to better understand the users' pain points when they are working, I interviewed 12 users of different ages to nail down the problem.

Questions
The questions revolve around the following three topics:
1. What smart office software do users use on a daily basis? What functions will be used?
2. What difficulties did users encounter when using different office software?
3. What are the deeper and unique reasons for boredom?

Research Findings:
Employees have some pain points :
➜   A lack of Networking opportunities
➜    Social Isolation
➜    Hard to collaborate closely
➜    Hard to concentrate

"Clothes bought online are often returned because the size is not the right and the quality is not as expected."

“The virtual experience should be more realistic, otherwise it will backfire.”

"The pictures should be more detailed and true, otherwise you don’t even know that the clothes are transparent."

"I often use Photoshop to put myself and clothes together to see if the clothes suit me"

◉ UNDERSTAND THE PROBLEM

What is the holistic user journey - from working to getting off working?

Based on interviews, I summarized a common experience flow of user's work day.

Join our team

"Clothes bought online are often returned because the size is not the right and the quality is not as expected."

“The virtual experience should be more realistic, otherwise it will backfire.”

"The pictures should be more detailed and true, otherwise you don’t even know that the clothes are transparent."

"I often use Photoshop to put myself and clothes together to see if the clothes suit me"

◉ UNDERSTAND THE USERS

Users struggle with productivity and social issues.

From the user research I conducted, I decided to focus on users who struggle with social demands and productivity issues at work and help them get a more comfortable working experience.

◉ UNDERSTAND THE MARKET

Current office software cannot meet users' needs.

Insights

Smart office software makes it easier for the remote-first team to feel connected, but most of them still have big user experience problems.

Strength

Users like the fun 3D customization and interaction aspects and they rather use one tool than many.

Weakness

Users worry about their privacy and some new interfaces are not very new user-friendly. Also, software on the market today cannot balance work and entertainment content.

◉ USER PAIN POINTS

Workers are separated from office life.

◉ design goals

Define three design goals.

Join our team

➜   Goal 1: Increase the efficiency of collaborating
An efficient collaboration process helps users get work done faster.

➜   Goal 2: Easy access to social communication opportunities
The solution should reduce user fatigue and boredom and make users happier to work.

➜   Goal 3: Get to work quickly in an immersive atmosphere
An immersive atmosphere is a crucial factor that affects workers’ willingness of working.

◉ Refined Design Question (POV)

How might we create an immersive office product in the hybrid mode that enhances productivity and facilitates social communication?

Join our team

◉ brainstorming

Main ideas for the smart office product.

Following the 3 design opportunities, I brainstormed some ideas to achieve them.

Join our team

Design goals

What's the design goal of our product?

Join our team

◉ narrow down scopes

Prioritize all the ideas and choose the solution.

Join our team

By using the Impact-effort matrix, I prioritized all the ideas and analyzed what should be focused on as MVP:

➜   FUN 1: 3D Customized office scene
Users can decorate their desks and virtual environment in the 3D scene.
‍
➜   FUN 2: Shared workplace
Multiple users can share content at the same time. During the meeting, users can also add elements such as gifs and clear and fun reactions. The breakout room is made easy by spatial interaction.
‍
➜   FUN 3: Social event in the company
Allow users to listen to music, play games, and watch movies with colleagues during breaks or after getting off work.
‍

◉ BASIC SETTING

Avatar Interactions.

Join our team

Status
The avatar's rich presence indicators convey information about the user's voice status and the video will be shown inside the circle.

Spatial Interactions
Walking in and out of conversations feels natural and seamless. The closer you get, the louder and clearer the sound.

‍Hover Interactions
It only takes one click to start viewing the information about the user and add a friend.

◉ END RESULT

Design & Solutions.

Join our team

Make Your Virtual Office on Dashboard

Customize your favorite office space style and items with check-in rewards

Your Dashboard

Punch in

Record the user's working hours and encourage users to punch in and get virtual money

Your Dashboard

Customize
your office scene

Start with a template, decorate your desks, or create a fully custom Space. It's an extension of the company culture

Cowork in A Digital Office

Experience a new quality of meetings with all the necessary tools and resources at hand.
Invite people to discuss, share documents and collaborate in virtual purpose-based rooms.

Before

Quotes from the usability testing:
➜ "The chat box accounts for 1/3 and affects my viewing of the main content"
➜ "Can't find the button for the chat window"
➜ "It is easy to confuse the icons on the interface"

After

➜ Set a chat entry in the lower right corner that conforms to user habits
➜ Design more intuitive and clear icons

Before

Quotes from the usability testing:
➜ "When viewing files and shared screens in full screen, the background switches abruptly, which is no longer the original meeting environment"

After

➜ A background consistent with the virtual scene of the meeting,
which is more user-friendly

Office Meetings

Add elements

Embed your favorite whiteboard and add some elements to encourage your colleagues

Office Meetings

Multi-screen sharing
and annotation

Share a single screen or multiple screens simultaneously with others. You can also highlight and tag the content.

Have An Efficient Breakout Room Experience

Enter the breakout room by interacting with your virtual space

Breakout Rooms - General User

Enter breakout room the easier way

When a larger meeting break to several smaller meeting, people can enter small group to discuss with other people or the speciffic person they want to talk to

Before

Quotes from the usability test:
➜ "The chat box accounts for 1/3 and affects my viewing of the main content"
➜ "Can't find the button for the chat window"
➜ "It is easy to confuse the icons on the interface"

After

➜ Set a chat entry in the lower right corner that conforms to user habits
➜ Design more intuitive and clear icons

Option 1×
‍‍Users can enter the group space by clicking the breakout room icon below
to freely group and engage in activities‍
➜ Pros: General users have more autonomy to group and explore freely
➜ Cons: There is a big learning barrier for new users. The usability of this feature scored an average of 2 out of 5 in testing result.

Option 2✓
The user is assigned a room by the host first, and then joins after accepting. If the user wants to change the room, he can also click the space to request to join the waiting list.
‍
‍➜ Pros: Users can more quickly commit to breakout session content. The scheme presents the traditional grouping process in the form of spatial interaction.
➜ Cons: Lack of flexibility and innovation

Breakout Rooms - Host

Time extension

Get a time extension for the breakout rooms when you feel the discussion is intense

Easily Participate in Team Building Activities

Build a connected and productive team with interactive objects like music, movies, and games.

Social Communication

Get a more
interactive reaction

Start audio chatting with others around you by sitting next to them. React by sending cute emojis.

Social Communication

Listen together

Listen to the same playlist with everyone in the coffee room. You can add new songs and point it to the top right of the screen if you think the player is blocking your view

◉ OUTCOMES

How will we measure success?

Our goal is to help hybrid teams enhance working productivity and facilitates social communication. While this project was a case study, we conducted usability testing with 12 users after design for feedback and the success of this project can be measured by the following points:

➜   11/12 of users feel more relaxed while working
➜   12/12 of users like the way we use 3D to visualize the information in traditional office software
➜   Increase in average time spent collaborating on SpatialMeet
➜   Increase in 30% workers engagement through online questions or chat
➜   Number of clicks or impressions on social links‍

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
‍
Usability testing goals:
‍1. Discover what stimulates people’s interest in exploring the space/social with others
2. Learn what people find immersive throughout the experience
3. Discover where in the process people need instructions
4. Find opportunities to improve the product in order to enhance immersiveness and productivity

Overall takeaway:
‍
1. Virtual fitting feature has improved the efficiency of Lululemon shopping
This includes customizing the user's body model, showing products one-to-one and comparing products through AR, and viewing details that help users improve the efficiency of fitting.
‍
2. Size recommendations and virtual profile generation are a relatively new experience for users, and the interaction process should be as simple and routine as possible
Users want to view virtual models with simple operations rather than complex processes.
‍
3. User feedback helped us understand the lack of some features
This includes rotating and moving delicate models, adding shopping cart and wishlist with one click, returning to the previous menu on some pages.

See full feedback here

Join our team

◉ reflection

Takeaways and if I have more time...

‍
➜   Put yourself into users’ shoes
As a newcomer to the workplace, I have experienced the inconveniences of working with a hybrid team: when I am at home, I sometimes have concentration issues; when I am in the office, I feel lonely when my team members are not there.

But not everyone’s key issues are these. Some users prefer a relaxed working environment. As an interaction designer, I need to comprehensively consider how our users think and understand their needs.
‍
➜   Unify the interactive language and add more spatial interactions
Transforming traditional content into spatial language is the feature and innovation of this product. For example, office products will no longer require users to click on boring text interfaces, but in space. At present, this product is still a mixed mode, and I hope to explore more non-traditional interactive content.
‍
➜   Lower learning barriers for new users: design tutorials
The functions of new products are very different from traditional products, especially when users are used to clicking text buttons and other instructions. Certain users report that they have learning barriers to products that interact with the space. If I had more time, I would consider including a new user tutorial to guide users to use it more easily.

➜   Consider more edge cases and accessibility issues
I will continue to lead the team to study innovative issues such as voice interaction in online meetings, and at the same time consider accessibility issues for people with eye fatigue, visual impairments, and voice impairments.

Join our team