2020
Web Application
Live Event Platform
Overview
In the end of 2019, the worldwide pandemic occurred and everybody was in lockdown. An increased demand for a platform where people could join an event and virtually interact with other people was formed.
My Responsibilities
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.
Challenges and Constraints
Brief Timeframe
With short notice to produce this tool before the event began, we provided many features and venues where participants can interact and share their ideas.
Two User Flows
In this case will be focusing on the workshop tool, where we are bringing both moderators and participants together to work on something simultaneously. Two different flows need to be created to run all sessions smoothly for both end-users.
We had to do the design thinking process fast; to come up with key features first so that the development team can work parallel to launch the product on time!
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 views for moderators"
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
Usability is crucial.
It is crucial to take time to carefully define and simplify the overall process.The business' goals matter too.
It is our job as well to assist and navigate the client to their key goal.Never ignore even 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.