Designing interactive emoji and increase engagement for the virtual event

The demands of the virtual event are fast-growing during the Covid-19. Run The World is a one-stop-shop virtual event platform funded by A16z, Will Smith, and Kevin Hart.

Brief

The overall user journey of the virtual event can break down into three parts:
Part 1 - Before Event
Event creation flow and ticket selling.
Part 2 - During Event
Live experience of the talk-room.
Part 3 - After Event
People connection, event review, and promotion.

This project focuses onΒ "Part 2",Β and the reason I picked it because it's not only a minor feature but makes a huge impact and users really love it.

Role and Collaborations

I was involved in the end-to-end development process, from defining problems to research and prototyping, iteration then following up the data. This is a cross-platform function that I work closely with the frontend and backend team, iOS and Android engineers, and a data scientist.

Company / Product

Run The World

Timelime

2020

Team

Product Designer - ShaoPing Chen
PM - Ming Ma
Data Scientist - Jun Yan
Frontend Engineering Team
Backend Engineering Team
iOS Team
Android Team
QA Team

Platform

Web, iOS, Android

Tools

Figma, ProtoPie, After Effects, Survey Monkey, Webflow

User Problems

Host

People who want to organize an event to earn money, promote and make an impact.
"How to improve user participation, satisfaction to help the event succeed?"

Speaker

People who are invited to give a speech or show to raise their reputation, contributing their expertise.
"How do I know the people's reaction to my presentation immediately?"

Attendee

People who want to join and connect with others, to learn, find collaboration, or networking.
"How do I express myself and interact with people in the virtual event?"

Goals and Metrics

Goals

1. Make the event energetic and fun; let users feel a sense of achievement.
2. Enhance the users' presence, let users have many chances to connect with people.
3. Design a set of emojis that people love to use when watching shows and speeches.

Metrics

1. Increase the user's engagement rate.
2. Enhance the conversion rate of the connection. (Follow people and direct message)
3. Increase the adoption rate of emojis and related features.

Challenges

πŸ’¬ Emoji Semantics

What kind of aesthetic criteria, semantics, and emoji style are suitable for users and our platform?

πŸ‘ Capture Attention

How to draw the user's attention without disturbing the event, camera, and screen-sharing? Also, not make users annoying.

πŸ“ Minimalism

In the limited display size, designing highly interactive components and consider cross the web and mobile device.

Outcome and Impact

Emoji usage significantly enhances two weeks after the feature is launched.

Users are more frequently browsing others' profiles through emoji bubbles.

People were sending emojis almost every second at the famous comedy event hosted by Stephanie Millers.

Research

Emoji Design

I designed 5 sets of emoji and conducted a survey for 20-30 year-olds who live in the US and collected 117 responses; I selected 15 videos that included speeches, shows, interviews, and funny memes to observe how people react with it and how they expression feeling by the emoji.

Purpose

1. How do people describe their feelings in words, and which emoji do they click when watching the video with different emotions.
2. I set a hypothesis about emotion and keywords for each emoji to validate whether it matched with what the user described.
3. How many emojis are enough to represent most of the scenes?
4. Which set of emojis do users most like and why? does it fit Americans' aesthetic and culture?

Analysis Process

Insights

・ Laugh(funny) and thumb(cool) are the most popular emojis.
・ People tend to use emoji in a particular situation, like a bulb(interesting) for knowledgeable content.
・ People prefer to use clapping(inspired) in a motivational speech.
・ Emojis without background color and outline are significantly popular than the others; the reason is more identifiable and stand out.

Feature Ideation

Emoji Bubble

Users can send bubbles by clicking on the emoji button, displaying different sizes of the bubble based on the user's engagement rate, such as long-press, frequency clicks in a short time.
Bubbles will also be sent automatically when users leave comments frequently or grab the mic.

User Profile Card

The bubbles users sent out will be instantly displayed on the screen and show activity levels, type and avatar; users can hover up to see the profile card, which makes people easier to be recognized by others.

Say Hi and Chat!

You can follow people or say hi to them, the others will receive your hand-shake, and now you can start a private chat.
*Messages were designed by Allen Wang (Product Designer)

People You Should Meet

The online user list will suggest people you should follow based on your information and rank by user's activity level; if someone says Hi to you or sends many emojis and comments or grab the mic, they will show up first.

Event Insights

Event insights collect engagement data for each session, such as how many people were inspired, how many people laughed, how popular your talks were, and how many people connect in this event.
I created the Insights page template by using Webflow and co-work with the back-end team to efficiently launch this product without any front-end resources.

Shareable Result

Make your achievements as an interactive web page that can be shared on social media and let more people be interested in your event; it's also a participation certificate.
*This product still in the exploration phase.

Prototyping

I designed a variety of layouts and interactions in the exploration phase. Finally, I used Protopie and After Effects to deliver the visual craft and specs to the front-end engineer and defined the rules of activity and principles with the back-end engineer.

User Onboarding

Takeaway

Impact Driven β€”

I'm honored to join a world-class team; every decision is making rapidly; We make sense of things and finds the value behind them. How much impact has it caused, and how I define success? even it's a minor feature can be measurable and holds water.

In-depth Research β€”

It is challenging to have intensive research on projects in a fast-growing environment; although I have learned how to do research quickly and get feedback, I still lack deep thinking, which I need to strengthen in the future.