OVERVIEW
Client
MaestroConference brings online conferences to a new level with Social Webinar, an application that capitalizes on their patented breakout group technology to create an interactive space for richer conversations at scale.
Objective
While the original presenter controls (to change what the audience see) are robust, they are "difficult to use" and "clunky". Our team was tasked to design a better solution. For our solution we redesigned the presenter's controls, bringing them to the forefront for quick and easy presentation preparation with fewer errors.
Role
Researcher, UX designer, UI designer
Duration
2.5 weeks
About Maestroconference
They are a web conferencing platform that allow users to hold engaging, meaningful, connections with people. Here are the 8 current options for Maestroconterence in the control panel.
This is the most popular option which allows the presenter to create breakout groups.
This allows participants to create ideas and have people vote on them.
This allows the presenter to share their browser and look around but stay on the site.
Text Editor in the Main Room.
Text Editor in a Breakout Group.
Share Youtube video with participants.
Let's participants vote on which breakout group to go to.
Let's the presenter share their screen.
Current screens from the presenters view
The Social Webinar control panel where the presenter will to go to "Settings" and
click on "Control Panel" and they are able to change views for participants.
User feedback
"I assume that when I click [copy url to clipboard], it should just open. I have used GoToMeeting and WebEx and it's one click. It's a very low barrier to entry."
– Cathy, usability tester
"I don't know how I'm supposed to use this URL to start a [screen share] session."
– Matthew, usability tester
– Mark, usability tester
Current screens from the participants view
Current screens in a breakout group
Our first week consisted of our own analysis of the application, conducting usability testing with new users, interviews with 5 employees, and 7 existing customers of MaestroConference
Empathy mapping
Once we found some of the key insights from our interviews we began creating an empathy map to find the pain points of the users. The results highlighted the need for us to simplify the tasks for the presenter and make it more comprehensible what is happening throughout the conference. This really helped us figure out what to focus on and keep in mind as we move into the ideation phase of our design.
Feature prioritization
Not knowing exactly where to start we used a technique called Feature Prioritzation where we created an x and y axis of things that were easy to implement and difficult to implement. On the other end we looked at the cost from the lowest to most expensive. This really helped us grasp what we should start focusing on over what wasn't as important. We focused mainly on the easy to implement and low cost side of the axis as a starting point.
Design studio
It was time to begin pushing out ideas so we began rapidly sketching out different ideas to test them with multiple users. After discussing it with everyone we came up with this as our initial design of the presenter screen.
​The idea behind it was we would take everything out of the control panel and have it accessible and at a glance for the host. We organized the navbar by "Main Room Activities" and "Engage Users" so the host understands a little more what about they are doing. On the left hand side the host can prepare for the presentation before pushing it out to users. On the right hand side we added an area for the host and participants to be able to see who else is in the room and allowing them to "view profile" and "chat" with them. We also added the poll or idea board as a pop up on the right hand side to benefit the confusion of the hand options going from 1-5 and just have it as options to click on once viewed.
User feedback
After doing a few rounds of usability tests we found many errors that we hadn't had even noticed in our design some of the main points revealed to us.
​
​• Users were puzzled by the categorization of the navbar and thought certain ones didn't belong in that particular section
• They didn't fully understand the instructions on the left hand side
• Were confused why certain options were still in the settings and not in the navbar
I was surprised by the confusion but could understand how the navbar could be organized and improved in a better way for users to understand how to user it. So we continued to reiterate and sketch until we came up with some finalized wireframes for the presenter and participant.
Finalized designs
​We came up with design decision to show more information and functionality for the user. Here are some of the design desicions we came up with.
​
-
Quick access toolbar to the presenter's tools, grouped by type.
-
Clear and consistent activation steps when a tool is selected.
-
Attendee functions are more visible, previously hidden and unintuitive to find and presenter has more controls for mic/un-mic, previously on another screen.
-
Secondary participant activities area to increase engagement.
-
Primary content displayed prominently and provides the presenter with feedback on what audience is seeing.
Presenter view
Participant view
User flow
Side by side user flows
Old user flow
New user flow
Style guide
We also created a style guide to add a consistency around the brand guidelines since the current design wasn't contrained to any specific guidelines which was a problem for a lot of our users. We tried to stay consistent by choosing the current color of the logo then adding some of the present colors of Maestroconference and combining them into 4 single colors.
Problems our designs solve
• The Presenter can now prepare for their presentation on the left hand panel before pushing it out to participants
• The Presenter can now preview the interactive browser and youtube video before shoing it to participants
• We simplified the instructions and added question mark options when people need extra help
• We used less technical verbage and made it easier to understand
• The Participants are able to see who else is in the room including the host, presenter, and participants with mics
• We fixed the hand raising confusion by getting rid of the hand going from one through 5 and had the options on the right hand side when the presenter pushes out a poll or idea board
Next steps
• More usability testing
• Look into split-screen options or multitasking for participants
• Consider how to integrate the Conductor Interface into the Social Webinar Presenter Screen
• Allow saving or even prepping presentation before the conference