Roblox Internship


Roblox offers a platform for developers to build games. Some of the largest games average over 10 million users monthly, and more than half of U.S. children ages 9 through 12 play Roblox.

A Unique Internship Experience

In the summer 0f 2021, I interned at Roblox on the social and 17s teams. There, I had the opportunity to work on several projects and increasingly ownership towards the end of my experience. My absolute highlight was having my work picked up by product leaders and presented to founder & CEO, David Baszucki, as part of the future vision of Roblox Design.



How I Contributed

In this case study, I'll present an overview of 3 key projects, my methods, and the outcomes: Bubble Chat, Platform Chat, and Voice Chat.

Check back for more updates in the future, much information is correctly protected due to a NDA.

Company

Roblox (iOS App, Web)

Role

Product Design Intern

Teams

Social: focused on designing and building new social experiences to connect and engage users

17s: focused on designing and building new product experiences for an older demorgaphic

Tools

Figma, Abstract, ProtoPie, Principle







 showcase
 showcase

Screenshot of "bubble chat hell" - a situation where your screen becomes overwhelmed with overlapping bubbles.

How might we create value out of the chat experience?

When too many players are in the same space, it becomes extremely difficult to have meaingful conversations through all of the noise. I began research by talking to players & developers, reviewing data, and discussing previous learnings with product managers. Then, I identified the key insights:

      1. The in-game chat is unusable when there are too many other players.

      2. The visual clutter detracts from the immersive experience of Roblox.

      3. Many developers refuse to use the built-in bubble chat, which can lead to major compatibility and safety issues for players.

Demo for a proximity text chat concept

Discover relevant conversations as you move through a space

I started out by exploring out of the box solutions to chat relevancy. My explorations sought to blur the lines between chat and the 3D environment, making a more immersive and natural experience. In this concept, we associate relevancy with where a message is sent. Thus, messages are only shown when a user is "within range" in 3-dimensional space. As a user navigates throughout an environment, only relevant conversations become surfaced to the user.

Making concept into action



 showcase

"Bubble Hell"

Design concept

 showcase

New version launched 2020

This far off vision helped guide my next steps for new ways to improve our existing Bubble Chat system. Partnering up with a handful of engineers, I designed a new version of Bubble Chat which was built and launched Fall 2020. This featured several new improvements to the visual treatment and display logic of bubbles, to much excitement of our developer community.

 showcase

Feedback from Fall 2020 launch




 showcase

Platform chat has always been considered a majorly underutilized feature, especially when accounting for the number of users it can potentially reach every day.

My Focus: Support better out-of-game socializing

After reviewing data and user insights with product managers, it became clear that our platform chat experience was lacking. Most users had trouble figuring out the appropriate ways to use platform chat or socialize outside of the current game they were playing.

Your social hub

Working closely with a senior designer and two product managers, we decided to consolidate our disparate social features into a single hub. This single space allowed you to move easily between personal conversations, discussions, and your contact book.

Making a complex feature feel simple

I went through several iterations of the information hierarchy to ensure it was simple to navigate. The final design was a product of serious testing with both casual and power users.

Demo for Social Hub

Setting the stage


 showcase

Previous design

New design

I worked closely with one senior designer to first redesign the entire v0 of platform chat. My focus was to maintain visual cohesion with the rest of our product using our design system, fix UX bugs within the existing flows, and add motion to enhance the UX of chat.


Keep your eye out

The first update for the new platform chat experience should come to you soon!










 showcase


 showcase

Bringing a concept to life

I was brought onto lead early conceptualization and design for Roblox Voice. This feature sought to bring voice to the gaming experience, creating a more immersive and rich in-game experience for older players.

Play anywhere
A streamlined experience between all your devices.

Simple & Intuitive
Spend no time figuring out any settings. Simply jump in, and immediately find friends to chat with or start your own call.



Inherently social and inclusive
Through open calls, players can meet trusted friends-of-friends and make new friends. Voice itself becomes a discovery tool.



An Avatar-based Experience
We leverage player avatars to create an even more immersive and “metaverse” voice experience.

Research

I took a look at existing voice apps and how they were being used by everyday people. To my surprise, there is no predominant way to treat voice. Many mental models exist, and it they all have a huge impact on the overall voice experience.

impact

Discord research scraps. Discord was one of the many apps I researched in this phase


Brainstorming

Building this user flow was necessary to expose edge cases and ensure I stayed focused on the core user flow. I went through several iterations. Slowly, the necessary screens logically materialized, ensuring the designs were being derived directly from user needs.


impact

Voice Room mental model (top). Basic task flow (bottom)


Lo-fi Wireframes

I very quickly got my ideas down on paper. The task flow significantly helped clarify the features I would need to design, so sketching features were relatively straight-forward and logical.

impact

Image: Basic wireframes demonstrating main components of app and how they relate to one another.


Rapid Iteration

I made several iterations of UX/UI and began gathering feedback from users and other designers.

impact

Voice Room mental model (top). Basic task flow (bottom)


Final Wireframes

impact

Wireframes of task flows


Testing & Iterations

After bringing the designs to medium fidelity, I did another round of testing and feedback to refine navigation patterns and visual treatment. During this phase, I worked closely with the Roblox design system and other designers to ensure a streamlined and consistent product experience.

impact

(Left) Early design of navigation sheet vs. (Right) Later iteration of same component


Motion & Prototyping

After finalizing static screens, I used motion to bring the design to life. Inserting real life content helped demonstrate the vision for Roblox voice. Lastly, building an interactive prototyping made testing extremely informative and simple.

impact

(Left) Early design of navigation sheet vs. (Right) Later iteration of same component


A living project...

Check back soon to see updates on this work!