UX design for AltspaceVR, a social VR app acquired by Microsoft.
Microsoft
3½ Years • Aug 2018 - Dec 2021
UX / UI Design, Systems Design, Level Design, Technical Art
AltspaceVR is a social VR platform that was first launched in 2015, and was later acquired by Microsoft in 2017. It's a place for people to attend live, virtual events, or meet new friends and interact with a friendly community from around the world.
I moved over to AltspaceVR team in 2018, after the different Mixed Reality teams working on multi-user experiences were consolidated into one.
I was the designer responsible for all new UX / UI efforts. This work consisted of things like taking UI from initial concept to final implementation, designing new systems and levels, project planning, optimizing content, and creating 3D assets.
I collaborated with other designers, artists, engineers, and product managers to transform AltspaceVR into an events focused platform.
I had the opportunity to work on a variety of AltspaceVR projects, but I picked just a few that highlight some of my efforts.
The pre-existing Main Menu in AltspaceVR had many problems that the team wanted to resolve. The menu was dependent on a 3rd party package called Coherent UI, which was a unstable, non-performant, and a security risk. The menu also had an inconsistent visual language, issues with content scrolling, and was described by users as confusing or hard to use.
The team wanted to remove the dependency on Coherent by switching the menu over to Unity's native UI. As a part of that UI rework, we needed to redesign the main menu, improving its usability and overall appearance.
🎯The Goal: Refresh the design of the main menu, resolve any performance issues, and polish the UI to a high level of quality.
Discover (#1) is the main menu's home page. It's where users go to discover popular ongoing events, and access various social hubs like "The Campfire." An event's Info page (#2) can be accessed from Discover, and it features a more detailed view of the event.
These pages were redesigned to present more information on screen, make use of the new visual language, and provide a better event discovery experience.
I worked alongside Todd Omotani to create UI mockups for the new main menu. We ended up simplifying the menu to just a main panel, the friends list, and a more comfortably positioned bottom nav.
The Discover page evolved from these earlier designs into the layout seen above, which was going for a more informative, Netflix-esque type of content preview.
The Events page is where users can find upcoming events or create their own events. AltspaceVR wanted to be the place to go for events in VR. To reach this objective, we first needed to redesign our Events page, making it easier for users to find the events that they're interested in.
The first tab on the Events page, "This Week," was designed to display event info and a weekly calendar that showed users what was going on that week.
One of our goals was to streamline the event creation process and make it easier for users to create and host events. We simplified event creation into a few basic steps:
The Me panel was a new page created for the UI update. It moved avatar customization from the left side of the main menu, into its own section. Originally, the avatar customization was very clunky and difficult to use, and there was no way to preview any options.
For AltspaceVR's new Avatar System Update, we replaced the old avatar customization with a brand new interface, providing many new customization options with clear preview thumbnails.
There were additional menu pages that we updated as part of the UI rework:
As time went on, I started to compile a few aspects of the new UI into a style guide. It remains unfinished, but what's there shows some of the recurring elements that were used across our menus.
We succeeded in redesigning and updating the Main Menu. Usability and performance were improved as a result. It took months of effort and lots of bug fixes and polish, but we finally got rid of the dependency on Coherent UI.
The team wanted to create a new environment focused around performances. The idea was to build a rooftop space that could fit a small crowd of people, match our wonky art style, and be more than just a reskinned version of our existing rooftop level.
🎯The Goal: Create a rooftop environment that's designed for performances and presentations. Must support 30+ people.
There were previous attempts at making a late night rooftop space, but most of them just repurposed existing environments rather than being designed for a specific purpose.
I gathered references to guide my designs and give our environment artists a potential art direction. I wanted a comfortably lit space that preserved some of the purple hues from the other night levels.
With my sketches, I was trying to figure out how to give the rooftop three different floors and make the stage its focal point.
The Vista Stage level was designed with a few different functional areas in mind:
I blocked out multiple versions of the rooftop in Maya and brought them into Unity for testing. My intention was to make a cozier environment with a clear flow through and visibility of the stage. I designed it to look similar to our other levels so that we could reuse some props and save the art team's time.
We were never able to get the resources to add art and finish up this level, but it did serve as a good example for what our future performance spaces could look like.
The team planned to retire our old MCM (Mid-Century Modern) House environment, and replace it with a new home space. We wanted to give this new home an updated layout, improved performance, and better alignment with our new art style.
🎯The Goal: Create a comfortable home space that gives users several locations to talk, hang out, and engage in activities.
The MCM House was a nice place for users to hang out and was loved by the community, but it no longer fit within our visual style.
I wanted to create a very light and relaxing modern home, centered around a courtyard containing lots of vegetation and natural materials. It would feel airy and spacious, with tall ceilings, dozens of skylights, and an open floor plan.
I drew some sketches to help me figure out how to arrange the rooms of the home around a courtyard. I wanted the house to be a terraced, open space, where you come in on the upper level and descend down into the kitchen, living room, and a large backyard.
I created a top down layout of the level that shows where the main areas of the Modern House are:
I built a basic whitebox for the home. I wanted the interior to feel like you were outside, with every room facing the open courtyard. When users spawn into the entryway, they have a direct line of sight to the courtyard and the backyard behind it. We expected people to spend a majority of their time hanging out in these two locations.
The Modern House never received a more detailed graybox pass or the resources needed to replace it with environment art. I had to move on to a different project before I could finish the design, so it remained in an incomplete state.
There were several different tutorial efforts for AltspaceVR that I was involved in. For our main tutorial, I was asked to create a waypoint arrow and an additional mini-tutorial slideshow.
Later on, I had to design a help section for our settings page, which would provide users with further information and access to customer support.
🎯The Goal: Contribute to AltspaceVR's tutorial efforts by creating a mini-tutorial, waypoint arrow, and help section.
The mini-tutorial was a slideshow of images visualizing some of the important features in AltspaceVR. We showed it to new users the first time they enter a space (via UI pop-up cards). It teaches users how to mute their mic, emote, turn on their safety bubble, and add friends.
Our main tutorial didn't cover every feature, so the mini-tutorial gave us the chance to explain more and also provide some guidance to users who might've skipped the main tutorial.
The main tutorial in AltspaceVR takes new users through a rooftop environment, where they're taught how to move around, interact with objects, and customize their avatar. I was asked to create a waypoint arrow that guides users between the different tutorial spots throughout the space.
I built a wonky, animated arrow that fit our art style and could grab the user's attention. The arrow's shader draws through walls, making it visible to users no matter where they are. Unfortunately, the shader's draw order was broken when I recorded this video, but you can still see the waypoint arrow in action.
I designed a help section for our main menu. It contains a getting started guide, a controller diagram for the user's current input device, access to our online documentation, and the ability to submit a customer support ticket, request a feature, or file an abuse report.
I had already made different controller diagrams for the main tutorial, but the gamepad diagram was a new addition. I also created slides for "Getting Started", which was a short, text-based tutorial that taught some basic information about AltspaceVR.
Both the mini-tutorial and waypoint arrow were successfully added to AltspaceVR's tutorial experience. The help section never made it into the app before the team moved over to work on Microsoft Mesh.
The old loading screen, or what was called the "Purgatory" space, had some problems that we wanted to resolve. The space was bright blue, which caused eye strain and hitching issues during loading (visual artifacts from a drop in frame rate). It was also not a particularly interesting or useful space, yet we showed it every time the app loaded and transitioned between environments.
🎯The Goal: Create a new loading screen that replaces the old Purgatory space, fits our art style, and shows some helpful UI.
I had many ideas for what we could do with the loading screen. It could be an inviting space with avatars that welcome you in, or maybe a dark, nighttime environment, with a cozy campfire or city in the background.
During the loading screen, we planned to show users tips that would teach them about AltspaceVR. When I started sketching the UI, I tried to make it more rounded and friendly looking than the main menu.
I worked with our two environment artists, Travis Fike and Frank Vanderwel, to create mockups for the loading screen. They were responsible for the look of the space, while I primarily worked on the UI and provided feedback.
In the images below, you can see the gradual evolution of both the UI and the environment.
I experimented with a variety of different panel shapes and arrangements of the UI. We wanted the loading screen to be more friendly and inviting, so I made the UI bright and warmly colored to help convey that feeling. It also contrasted nicely with the dark environment that was being worked on.
Our environment artists created the skybox for the space. It started as a dark, infinite grid stretching out to the horizon, but eventually became a large mountain range with a vibrant sky.
I found the bright purple in this new sky to be a bit unpleasant to look at, so I edited the skybox and gave it a nicer range of colors with some warmer pink and green hues.
The final version of the loading screen was successfully added into AltspaceVR, replacing the previous Purgatory space. It didn't end up quite as compelling as I initially imagined, but it did the job.
AltspaceVR's emoji system let users express themselves through clouds of emojis released over their heads. The existing emoji menu didn't support gamepads, which was needed for our port of AltspaceVR to Xbox. The menu had also suffered as a result of movement system updates, becoming jankier and hard to use.
Our plan was to replace the old emoji system with two new reaction menus: a simple "Reaction Wheel", and an expanded "Reaction List," capable of holding many emojis.We wanted to make it easy for users to find and fire off emojis with as few clicks as possible.
🎯The Goal: Design an extensible Reaction Menu System that's straightforward to use and contains plenty of reaction options.
The Reaction Wheel enables the quick selection of emojis with a mouse or joystick. It's made up of multiple pages containing a ring of 8 remappable slots that users can bind their favorite emojis to.
I audited a number of games and played around with their radial menus and emote systems, picking out aspects that I liked to incorporate into my own menu designs.
The Reaction List is a larger, scrollable grid of emojis, similar to what you might find on your phone. The menu is extensible, meaning that it's capable of expanding to support new emojis and additional reaction categories like emotes, stickers, or GIFs.
I looked at the emoji menus from other social apps (like Teams, Discord, Facebook, etc), paying close attention to how they packed all of their reactions into a compact space.
I designed the two reaction menus to be easy to toggle between when a user wants to replace or access more emojis. I kept the UI rough looking, so that the team would focus on the interactions and usability of the menus, instead of their appearance.
For the Reaction Wheel, I added an icon that mirrors the user's input device, popup labels, pagination support, and selection feedback. I gave the Reaction List a top nav with the different reaction types, a search bar, and a scrollable side nav showing emoji categories.
I built an interactive prototype of the menus in Figma for the team to test and get a feel for. I made a few variations of the base prototype to help us answer some open questions:
We started building a Unity prototype for the Reaction Menus, but weren't able to finish it before the team started work on Microsoft Mesh. The rough UI mockup never received a polish pass, but it was still useful as a reference for the Mesh team.
I worked on AltspaceVR for 3 years before it evolved into Microsoft Mesh and the app was left running in maintenance mode. I made a lot of great friends during the experience and had fun working on a live service product with a global community.
I contributed a lot towards making AltspaceVR the place to go for events. My UX / UI work helped improve event discovery and made the event creation process easier for our users.
