Back
Message Reaction
An 0 to 1 project enhancing user expression through the creation of a Roblox reaction ecosystem, worked across five teams including PMs, and successfully delivered to engineers.
My Role:
Product Design Intern @Social Team
Skills:
Project Development
Visual Design
UI/ UX Design
Business Roadmap
Pitch Presentation
User Research
Timeline:
May 2023 - Aug 2023
Stakeholders:
PM: Sophie Finck
Design Manager: Dino Ignacio
Mentor: Liz Gatapia
Engineers: Abhishek Prabhudesai, Jatong Su
Project Overview

Project Goal

The Roblox Messaging platform allows users to communicate with friends and coordinate co-playing events. However, the platform has not been updated in years, making it increasingly inadequate for supporting users' growing needs for self-expression and failing to reflect the latest Roblox Avatar features.

The goal of this project was to design an MVP messaging reaction feature that enhances user self-expression and creates a more enjoyable chatting experience, while also establishing a north star vision for Avatar-driven communication on Roblox.

My Contributions

  • Shipped the end-to-end 'Message Reaction' feature to 215 million monthly active users, enhancing self-expression and chat engagement
  • Designed 16 Roblox emojis to establish an emoji library in collaboration with the Design System team and a UXR
  • Partnered with engineers and PMs to establish a roadmap for revamping legacy messaging features, presenting the project to and receiving approval from the VP of Design, Product, and Engineering.
Problem

User Problem: “The lack of self-expression on the messaging platform”

Avatars on Roblox provide users with full self-expression; however, this rich experience is not reflected in the messaging platform, which currently only supports plain text without options even for photos or stickers.

Business Problem: “A 12-week sprint from Design to Release”

Since the messaging platform team hasn’t made updates in a long time, the project manager aimed to deliver a feature that could be quickly developed and released to gather user data.

After discussing with the Product Manager and the Engineering Manager, we agreed that building a reaction feature for the MVP would be the best approach to enhance self-expression. And with the remaining time, I can then focus on developing more visionary features to further enrich user expression.

Process

Competitor Audit

To gain a deeper understanding of the reaction feature specifications, I first examined existing reaction features on the market. In this audit, I specifically focused on the different features and user scenarios these reaction features are designed for. Besides, I also evaluated how a Roblox reaction feature would fit within this scale.

Defining the scope

Based on the competitor audit, I categorized the existing reaction features into two groups: “Light-weight” and “Robust-system.” After presenting my research findings to the product team, the product manager and I decided to design the Roblox reaction feature as a light-weight option, given the time constraints and the scope of the messaging feature.

Feature Spec Table (Content blurred due to NDA)

Constriants

To validate the feasibility of the idea, I spoke with various designers, PMs, and researchers within the company. Through these conversations, I identified the two biggest constraints I was facing.

Safety Concern
Considering that many Roblox users are minors, some system emojis, such as 🍑 and 🍆, may carry sexual or contextual connotations that are unsuitable for them.
Front-end constraints
From discussions with engineers, I learned that the current front-end system has a minimal emoji library. As a result, if users send emojis from their keyboards that aren’t supported, they will display an error message.
Iterations

Roblox Emojis

While speaking with designers from various teams, I learned that the Design System team at Roblox has long wanted to create a set of custom emojis. However, they've lacked both a compelling reason and the resources to pursue it. Inspired by this idea, I thought Roblox emojis might help address two key constraints in my project, so I set out to design the following emoji concepts.

Design Explorations

Apart from the emojis, I also went through numerous iterations for displaying reaction pills and content selection. Throughout the process, I regularly shared my designs with the product manager and engineers, leading to the following iterations.

Design Explorations Overview (Content blurred due to NDA)

Final Design

By balancing feedback from the product team, I finalized the design with a focus on the positioning of the reaction pill and content display.

Adding Reactions Interactions

Reaction Details Page Interaction

Design Spec

Since the project’s goal was to hand it off to engineers, I created a comprehensive set of design specifications, focusing on interaction flow, animations, edge cases, and cross-platform consistency.

Beyond MVP

Reaction System Vision

With the remaining time in my internship, I expanded the scope of the reaction feature and collaborated with designers from five teams to develop and prototype the use of Roblox emojis and reaction features across other project pages

Video Sharing
Marketplace Showcase
Friends Postings
Sticker Marketplace
Reaction System Prototypes (Content blurred due to NDA)

RDC 24 Release

The Emojis I designed were featured at Roblox Developer Conference 2024.

Impacts
01
Delivered a complete end-to-end product to improve user expression, involving drafting design spec and collaborating with product partners, including PMs, engineers, user researchers, and data scientists."
02
Formulated a long-term vision and projected business growth for the product by creating interactive prototypes with cross-functional teams, then presented them to VPs.
03
Defined a long-term project roadmap with the PM by conducting workshops, designing future UIs and analyzing quantitative user data to refine the plan for future features.
Reflections
Project Principles

Establishing clear project principles is the foundation for project development. It's a great alignment tool for roadmap consistency.

Vision Matters

Possessing a long-term vision is just as crucial as delivering an MVP, as it ensures that every step serves as a stepping stone toward the ultimate goal.

The Power of Community

"Two Heads are Better than One. Bringing people together for a workshop generates more comprehensive ideas and perspectives for the project.

Asking "Why"

"Asking 'why' enables you to gain a deeper understanding of projects and offers the opportunity to advocate for yourself

Next:
Zoom Window Redesign
Copyright © 2024 Peiyi Sun