Spatial Mobile Chat

This past summer, I had the opportunity of working with Spatial.io as a Product Design Intern / Apprentice.

As Spatial was shifting to a SaaS model, it required us to think about new ways to uphold and maintain player engagement and interactivity. Already working on improving mobile responsiveness, I led the redesign of the mobile chat interface.

For the entire duration of this project, I was the sole designer responsible for UX auditing, diagramming user flows, wireframing, prototyping, and animating interactions.

Spatial was pivoting, again.

Software as a Service.

In 2024, Spatial introduced a Pro subscription model, blending gaming, collaboration, and virtual space creation. This shift empowers its diverse user base of players, creators, and businesses to build customized, interactive environments, supporting the creator economy with advanced tools and updates while positioning Spatial to remain competitive in the virtual space industry.

Founded as a platform for virtual meetings, Spatial expanded into NFT galleries and gaming, reflecting trends in digital art and immersive environments (Figure 1.0).

1.0 Article from Forbes — Image

Don't just maintain, improve.

The difference between hundreds and thousands of subscriptions.

Spatial's SaaS creator tool was going to be introduced to the mobile platform as well so we needed to refine the in-game interface so that creators saw the value in upgrading to be able to build games that other players would play and interact in. We aimed to ensure continued engagement in gaming, improving the experience there while transitioning to upsell models and creator tools.

Spatial's mobile chat was not being used.

Through qualitative feedback and player interaction data, it was evident that mobile players barely engaged with the multiplayer chat compared to desktop users.

Upon activation, the chat interface defaults to a fullscreen mode, obstructing controls, impeding navigation, and diminishing overall environmental visibility (Figure 2.0). Thus, players were not able to interact with the in-game environment while viewing and sending chats with other players.

My high-level goals were to:

• Enhance player accessibility & interactivity: Ensure player can effortlessly see and interact with their environment while using the chat.
• Streamline player interactions: Speed up message viewing upon delivery, allowing for quick and easy communication.
• Achieve seamless integration: Integrate the chat without distracting or interfering with the functionality of other platform features (HUD, touch controls, joysticks, and action buttons).

Identifying the best existing practices.

At the outset of this project, I didn't have a clear understanding of what a good chat interface entailed. Without pre-existing insights, I conducted an audit (Figure 3.0) on other mobile apps that have an in-game chat interface through usability tests and interviews.

3.0 Mobile In-game interface audit — Image

Following a thorough analysis of the user journey map and 8 comprehensive user interviews, I found that:

• 8/8 users liked being able to see messages without having to open the chat itself.
• 8/8 users preferred that the chat did not default to a full screen mode.
• Placing the chat icon at the top bar held the fastest speed of use by 30%, with second being on the right-side of the screen by the action buttons.

Every goal in its own place.

A modular goal-based approach to improving chat interactivity.

To tackle the goals efficiently, my approach was to treat each high-level goal highlighted earlier as their own distinct module.

Adopting the smaller chat interface.

I explored two smaller chat interfaces. One that expands/collapses from the top bar (Figure 5.0) and another that expands horizontally from a new chat button (Figure 5.1).

Upon usability testing & analysis:

The horizontal button had 45% slower speed of use than the top bar expansion, affirming my audit findings.

Horizontal expansion chat required more screen real estate as it would've been symmetrically offset compared to the top bar expansion if it were the same size.

First Goal Scored

Varying message preview options.

To streamline user interactions, I explored two message preview options: a drop-down preview (Figure 6.0) and an avatar-based chat bubble preview (Figure 6.1).

Upon usability testing & analysis:

7/8 users preferred the drop-down preview.

5/8 users complained about how the avatar chat bubble was distracting them from the actual environment/space they were in.

Second Goal Scored

Accommodating user needs.

With a diverse user base, these design decisions may not reflect every user's preferences. Therefore, I focused on accommodating various user needs by adding a full-screen button (Figure 7.0) and providing the option to disable message previews in the settings (Figure 7.1).

Third Goal Scored

An effortless, engaging experience.

One stone, lots of birds.

In bringing my final design (Figure 8.0) to life, I animated all potential user flows, ensuring that various edge cases were accounted for (Figure 8.1 & 8.2).

This solution not only addresses the visibility issue but also streamlines receiving messages and interaction. One solution, lot's of benefits.

Good Game :p

My most hands-on project yet.

Future Steps

Next, I would like to explore how this chat would look like in VR. Although most users are on either desktop or mobile, Spatial's emphasis on creating and redefining immersive 3D environments offers a unique opportunity to transform the chat experience into a more engaging and interactive format.

Additionally, I would like to explore other options for chatting with others, such as private messages or being able to create chats with others both inside and outside the environment.

1.0 Spatial VR platform capabilities — Image

What I learned:

Design in its epitome — This project highlighted the importance of flexibility and the willingness to embrace changes to enhance the overall user experience.

Design is a business — Through the scope and context of this project, I understood that even a minor change in a feature or design can make the difference between thousands of dollars.

Design to inspire — My mentor, Jimmy, emphasized the importance of creating designs that would excite stakeholders and engineers to build them. Hence, why I went the extra mile to animate using After Effects.

Lead with curiosity — Not having a clear direction allowed me to experiment with new design approaches and explore creative solutions to solve user problems.