EMOJI REACTIONS—DROPBOX

Led the designs for emoji reaction integration on the mobile commenting experience.

Introduction

Emoji Reactions for Mobile Previews

As an intern for the Core Mobile Previews Team, I had the opportunity to work on two projects, one of which involved integrating emoji reactions.

I collaborated across product, engineering, brand, and research to ship emoji reaction feature from the web into mobile comments in order to enhance the collaboration experience for paid team users and bring parity across Dropbox platforms.

Shipped new emoji reactions features for mobile comments with 700,000 weekly active users across IOS and Android, collaborated with cross-functional partners, created rapid prototypes, and conducted usability testing with a 100% success rate task.

Overview

What is Mobile Previews?

Mobile Previews owns the experience of viewing files and actioning on those files from the mobile devices across both IOS and Android—this includes commenting on files.

Previewing is the most frequent core action for users with 16.6M weekly active users across all of Dropbox. Mobile is the biggest percentage of where users preview from, followed by desktop then web. Mobile Previews is a huge landscape for impact.

MAIN PROBLEMs

There is limited feedback experience for mobile comments

Providing feedback on mobile is a frustrating experience because users are limited in terms of how they can provide feedback. When responding to comments, users are limited to using just text—there is no granular way to give feedback. This reduces the need for users to collaborate and communicate within Dropbox.

There is a lack of parity between web and mobile comments

Mobile comments currently lack emoji reactions, preventing users on mobile devices from sending emoji reactions.

Crucial business need for maintaining engagement, increasing customer retention, and boosting the number of active weekly paid customers.

The integration of emoji reactions is a small part of a big movement to improve collaboration experience in order to increase engagement across Dropbox.

today’s experience / WEB PREVIEW VS MOBILE PREVIEW

HYPOTHESIS

Crafting a compelling set of hypothesis to help guide my design process and uncover how solving these challenges can benefit both Dropbox and our customers.

process

I rapidly created over 15+ high fidelity prototype screens for my early explorations while working closely with engineers, product, and research to find the best solution. 

I also analyzed over 10 different social media apps with commenting features and I noted 3 qualities that proved to be common patterns and unique interactions to guide my exploration.

The most common pattern seemed to be the use of a full emoji picker where users get the full range of emoji reactions available across IOS or Android.

I discovered that some apps intentionally limit the emoji reactions to choose from on the first entry point to quickly lead to quicker decisions when it comes to reacting to comments.

Gestures for opening the emoji pickers varied from tap-and-hold actions to slides and simple single taps.

Being able to see who reacted to the comment was just as an important of a feature as being able to add the reaction.

Exploring emoji reaction button placements

There are currently 2 different layout states for the comment sheets, such as single comments, and threads. Finding the appropriate placement for the emoji reaction button requires it to fit seamlessly into any scenario.

layout EXPLORATIONS

entry point EXPLORATIONS

entry point EXPLORATIONS

High fidelity rapid prototyping for different emoji picker interactions

I explored 3 different ways of display the emoji picker: a floating pill, a full-sheet, and a half sheet. These variations represent universal patterns that users can quickly understand within a commenting interface.

I also explored gestures from tap & hold, double taps, swipes left and right, and single taps to be able to open the emoji picker.

emoji picker variations

Layout explorations for viewing who reacted to a comment

In addition to allowing reactions, we needed to show who reacted to each comment to complete the feedback loop. This lets collaborators see who has viewed their comments and whether others agree with proposed changes—or simply shared a positive reaction.

CHALLENGE

The perfect solution isn't always the most feasible one, especially when faced with technical constraints and deadlines.

After showcasing my early exploration through collaboration with engineer, product, and research, I learned some new challenges that pushed me to rethink my solutions.

The API used by the web preview team can’t be ported as seamlessly due to code compatibility. The 3rd party API was also only built for web integration, not mobile.

It’s not the best solution for long term management as the 3rd party API isn’t up-to-date with the current IOS emoji’s released today (2024). This means some emojis will be displayed as an error state.

The project was a low-risk project with little budget and timeline, so the option of building our own emoji picker was not possible for the project.

With the new challenges, I crafted a strategic solution that allowed users to send emoji reactions without the full emoji picker sheet, but allow for a full emoji picker implementation later down the future.

I faced challenges in getting the full emoji picker to be a viable solution, so I chose to implement a solution that addresses the immediate user and business issues while also planning strategically for future milestones.

I selected the top most used emojis across Dropbox platforms to fit into our new quick emoji reaction solution.

I gathered research data based on Dropbox’s most logged emoji reactions. However, I found that we didn’t log any of that data, so I relied on common behaviors from qualitative insights to narrow down the best emojis to use. 

Based on adjacent Dropbox platform with emoji reactions, people will simply leave a thumbs up, 100 symbol, or plus sign emojis to convey more positive feedbacks than negative feedbacks.

Final Design

I designed an emoji picker that enables mobile users to select from 5 quick emoji reactions and view reactions from both web and mobile users on comments.

My designs address emoji reactions in two milestones: Milestone 1 enables basic emoji reactions and viewing who reacted within our current constraints, bringing mobile up to speed with web preview. Milestone 2 adds a comprehensive emoji menu sheet that connects through the initial picker, achieving full feature parity between platforms.

I improved the overall visuals of the commenting experience to not only accommodate for the new emoji reactions pills, but to also improve readability of each comment with proper vertical spacing.

The comments were spaced too tightly, making it difficult to navigate through the comment sheets. Adding negative space between comments improved breathing room and readability.

I designed across different platforms such as Android and tablets.

Parity didn’t only mean for IOS web and mobile preview, but for all devices including Android.

At the end of my internship, I shipped two new features inside the commenting experience with a 100% success rate on usability testing.

After quickly pivoting from one project to another, I was able to deliver quick results and make an impact within Dropbox with such a short turnaround time.

I designed not only a solution for today’s problems whilst navigating technical challenges, but I also created a strategic design approach for the future iteration.

Working at Dropbox was a monumental moment in my early career and I couldn’t have been fortunate enough to have worked with talented folks that elevated each other’s crafts, while positively impacting business and customers across Dropbox.

During my internship, project priorities shifted, which required me to reevaluate my approach to new projects based on available time and resources. Learning to strategize both immediate MVP solutions and long-term roadmap planning proved invaluable.

Prototyping has always been a key strength of mine, and collaborating with product and engineering teams has truly highlighted its impact. It helped me identify blind spots and accelerate decision-making within my team.

I have always been a proponent for design craft and impact. But, my experience at Dropbox highlighted the true impact of craft and ownership through the people leading these experiences and their impact across business and customers. It was an inspirational moment to witness in my career.