2020
Interactive Live-Virtual Event Platform
Web Application
In a Nutshell
When the world went into lockdown in late 2019, something unexpected happened. The demand for meaningful virtual connection exploded. Our client needed platforms where thousands of people could genuinely interact, collaborate, and feel present together, even when physically apart.
That’s when I stepped in to design a virtual event platform that would bridge this gap. The vision was ambitious: create a white-label solution where global participants could seamlessly register, attend live sessions, and actively collaborate through interactive workspaces.
Results
Successfully Launched Against All Odds
Delivered a fully functional platform just in time for launch, navigating tight deadlines and evolving requirements while the world was still figuring out virtual events.
Satisfied Over 2,000 Participants Worldwide
Created an intuitive, visually compelling experience that kept thousands engaged throughout a 25-hour marathon event, proving that virtual doesn’t have to mean disconnected.
Designed for Two Distinct User Journeys
Crafted seamless experiences for both global participants seeking connection and moderators managing complex live sessions.
Context
Background
Our client's annual in-person conference wasn't goin to happen in 2020, the one that brought together thousands of passionate participants from around the world. Well, at least not in the traditional way.
They wanted to recreate every meaningful interaction from their physical conference in a digital space. Every networking moment, every collaborative workshop, every spontaneous connection that happens when people gather with shared purpose.
This was 2019-2020, before virtual events were a thing. There was no playbook, no best practices. We were essentially designing for a future that didn’t quite exist yet, for users who had never experienced anything like it.
Fortunately, the team had been exploring interactive 3D concepts. The challenge wasn’t creating cool visuals, it was making them work at scale, under pressure, for people who crave the human connection.
Goals
To create a seamless, intuitive virtual event experience that supports real-time interaction and collaboration, ready to go live within a limited timeframe.
My Role
Handled all UX/UI design solo for the first draft.
Created a user flow map.
Produced an interactive prototype.
Summarized design guidelines to hand off to the engineers.
Constraints
4 Months! 0 Room for Error.
We had less than four months to design, develop, and test an entire virtual event platform from scratch. All before thousands of global participants would depend on it working flawlessly.
Let's focus on Workspace
Workspace is a space where participants are going to collaborate in a team working on a task that they are interested in and pitch it at the end of the session. It is two hours of fun and a chance to shine.
Participant’s journey is simple, linear and straight forward. As we planned, timing and session systems will be running from the backend.
Wireframes
Information of Workspace
An indicator informs users of where they are.
Session Timeline
Laying out the schedule of this workshop in overview, to keep users on track of how much time left in each session, so they can plan out things through the workshop.
Session Title
Laying out the schedule of this to guide users of what they can do in the session. This first session is to get to know people in the table.
“Call Moderator” Button
It was named “Raise Hand” before, changing into “Call Moderator” makes it more clear of what is going to happen when users click on it. We intentionally placed it in the top right of the screen, for discoverability.
Workspace Floor-plan
This imitates when users are in a workshop space in person. They can see other tables and people, giving them a feeling that they are not alone.
Live Video
Dedicates most of the space for moderators live video implementation.
Chat and Q&A tabs
To communicate with moderators during live and other people in the workspace. We offer a tab just for questions solely in another tab so it would not be pushed up with other messages.
Workspace Title
Showing workspace's topic with brief details for participants so users will not lose track.
Emoticons
Showing workspace's topic with brief details for participants so users will not lose track.
Task Objective
People can sometimes forget and lose focus, especially when discussing with many people; placing the objective at this prominent position help users with that issue.
Team Video Chat
When it comes to brainstorming, video chat could make it faster and more convenient. For some people who might not be comfortable with video chat, they can turn off their camera or mute their microphone.
Online Whiteboard
Integration of a virtual whiteboard helps real-time collaboration from everyone anywhere works more efficiently. Moderators can prepare templates on the whiteboard before the workshop begins.
The client said:
"We need a moderator mode"
This came in the middle of our process when we were busy with something else. Moderators play an important role in Workspace since they are the ones who will run and facilitate the workshop simultaneously.
Moderator's Flow
We need to create the moderator’s flow accordingly to the participant’s flow that we have done.
As the first ideation:
It seems to be easy.
In a real-world workshop, you can see the whole space and join a table and initiate a conversation.
It has a preparatory mode.
People tend to check themselves before walking in front of the room to speak, quickly switch to Streaming view gives them a chance to get ready, catch up with questions and chats without affecting others.
Always able to go back.
Moderators can always go back to Floor plan view.
Predicted Outcomes and Required Functions
Moderators are able to:
Open workspace as schedule.
Lead/guide/start/conduct each session.
Join in a table.
See which table is calling.
Inspect participants chat and Q&A
Go live, microphone, camera, and screen sharing.
What Actually Happened in User Testing
Switching between views was confusing.
The Start session button is hidden in Streaming View. Lacking navigations of conducting sessions.
The Start and Stop session buttons can be impulsively hit, which could lead them to an undesirable results.
Flow Iteration
Linear flow, Why?
Faster and Simpler
The linear timeline seems to be the best solution according to the time we had left. It is easier to grasp and straight forward in terms of flow.
We added a confirmation modal after they click on the Stop/Start button to create friction, preventing unintentional discharge.
The interface changes according to the session users are going to next, however, by doing so it creates a brief gap between sessions in participant’s flow.
Final Visual Design
Moderator's waiting room. They can see other moderators and participants who have joined in the workspace and decide if they are ready to start.
Participants' waiting room.
Once the moderator closes waiting room, it brings them directly to the floor plan view for them to easily jump around from table to table facilitating participants.
While participants are assigned randomly to the table, and they will on a video chat and start to get to know other participants on their table.
Live video in moderator's view, they get to see themselves, a real-time chat and emo-measure from participants.
While in participant's view have a simple live video view with chat and Q&A panel to interact with the moderator.
Learnings
Never ignore a small issue
A tight timeframe should not be an excuse to overlook problems found along the way. It's better to address newly found problems as they arise before they grow into larger issues.
Test it!
Testing is a must even if we don't have much time! Test with the real users as early as possible in order to allow for ample time to make necessary corrections.
Usability is crucial
It is crucial to take time to carefully define and simplify the overall process.
Business' goal matter too
It is our job, as a designer, as well to assist and navigate the client to their goal.