User-centered design: Simple Navigation, fewer errors

 

Project Brief

MaestroConference brings online conferences to a new level through Social Webinar, an application that capitalizes on their patented breakout group technology to create an interactive space for richer conversations at scale. 

 

Challenge

While the current presenter controls (which are used to change what is presented to the audience) are robust, they are "difficult to use" and "clunky." Over the course of 2.5 weeks, our UX Team (myself, Ariana Lum, and Ajay Soin) was tasked to design a better solution.

 

Solution

The presenter's controls are at the forefront for quicker and easier preparation with fewer errors.

 

MaestroConference Social Webinar screen for presenters.

My role

My role largely focused on user research.  I lead many of the interviews with customers and staff and I conducted usability tests of the current application with two volunteers.  After receiving feedback and further iterating on the design, I conducted usability tests with a paper prototype with six new volunteers.  This user focus laid the groundwork for our design insights.  Throughout the process, I continued to ask “why” to drill down to the rationale behind the designs. 

 

Digging into the current application

As a team, we conducted a heuristic evaluation of the current application, breaking down the areas we found didn't meet the 10 heuristics for user interface design by Jakob Nielsen.  Being the visual thinkings that we are, we soon found ourselves clarifying our thinking collaboratively.

While brainstorming and clarifying our thoughts on the problem at this stage was useful (and fun!), we hadn't yet spoken to users.  I reminded myself that while I might have good ideas, I am not designing for myself.  I don't claim to be a genius designer, so it was time to talk to some users. 

 

We are not the users, so let's talk

I had the opportunity to sit down with two volunteers to examine the current application.  Neither of the volunteers had used MaestroConference before, but they were both familiar with other webinar / video conferencing tools and used them in their current line of work.  We also conducted phone interviews with 4 customers, 1 past participant, and 7 members of the MaestroConference team to better understand how people are using the system and where they experienced issues. 

 

The current Social Webinar control panel, used by presenters to manage what is visually shared with the audience.

PROBLEM: The presenters had to navigate unclear steps to activate various screens for the audience.  

Example: While trying to activate the screen share function, it was not clear to the user what is expected of them to properly complete the task. 

"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." -C  

"I don't know how I'm supposed to use this URL to start a [screen share] session." -M

SOLUTION: The process for activating each view should have a consistency that allows the user to easily learn and understand the process.

 

 
 

Wait, I'm sharing my screen and I haven't started the meeting yet?  I feel like an idiot. -C

 
 

The message displayed to the audience and presenter if screen share is not properly activated in the current application.

PROBLEM: Upon making a mistake, the presenters were not given clear direction on what error occurred or how to address it.

Example: When screen share is activated, but not accurately set-up, the message that appears is confusing to users and does not clarify the problem or provide guidance to a possible solution.

"Wait, I'm sharing my screen and I haven't started the meeting yet? I feel like an idiot." -C

"The meetings has not yet started? Maybe I need to restart the meeting somehow?" -M

SOLUTION: The steps to activate a view are clear and the fields will be validated before the user can continue. In the event of an error, the messaging provides clear information about what occurred and the steps to remedy it.

 
 

It's confusing having multiple hands available. I thought I could select more than one... -M

 
 

The options for raising a hand 1-5 in the current application.

PROBLEM: The hand-raising function was confusing, since it allowed a 1-5 voting option in addition to the more familiar raising of a hand to ask a question.

Example: In the current system, the presenter has to announce to the audience what number to use for different tasks, and at times participants are confused about what to do.

"It's confusing having multiple hands available. I thought I could select more than one. If they are primarily for voting, then they should only be visible when voting is available." -M

"Sometimes during a call, a participant will clear their hand selection, and a poll won't calculate correctly." -B

 

SOLUTION: Separate the functions of asking a questions with voting by providing participants the opportunity to vote directly in the poll window.

 

Sketch.  Test.  Iterate.

Three heads are better than one.  As a UX Team, we conducted a design studio to get ideas down on paper.  What started out as a list of tools available accordion-style on the left section of the presenter's screen soon evolved into a toolbar across the top.  Through this design session, we were able to get a lot of ideas on the table and share our thinking behind them, ultimately leading to a better initial design.

 

Design decisions

Sketch of presenter's screen.

  1. The toolbar provides quicker access to the presenter's tools, grouped together by type.
  2. When a tool is selected, the left section provides activation steps for that tool.
  3. With feedback received from first-time users (who felt in the dark about who else had joined the webinar), we dedicated the right section of both the presenter and participant screens with a list of people in the webinar. The profile and chat functions are more visible (previously hidden unless hovered over) and the presenter has controls for mic/un-mic.
  4. In addition to the participant list, we utilized the lower right section for presenters to conduct participant engagement actions (e.g., a poll) alongside other webinar activities, instead of solely in fullscreen.
  5. The center is reserved for what is displayed live to the audience, providing the presenter with constant feedback about what the audience is seeing.

 

 

 

Two sets of sketches - one for the presenter's screen, one for the participant

Usability of the New Design

While asking for feedback on the initial sketches, it quickly became clear that people were confused about what the presenter and participant saw. So to better tell the story for testing, we created a corresponding set of presenter and participant screens.  

With these in hand, I conducted usability test with six new volunteers. Insights included:

  • Use layman's terms for the directions in the right section, as some verbiage was still too technical and confusing to users.
  • Provide visual cues or other confirmation to presenter that they are correctly setting up the views for the audience, such as messaging when a field is not filled in or a preview of a web address.
  • Provide easy to understand settings and customization options to meet different presenter needs. 
  • Reduce participant confusion about hand raising function to vote or ask a question.

 

 

Better designs based on user feedback

Presenter's screen while Play a YouTube Video tool is active.

Presenter has control 

  1. Help text located right where it is needed (instead of a list at the bottom).
  2. Preview windows to provide presenter with a visual confirmation that they have included the correct web address.
  3. Technical language replaced with easier to understand language to avoid confusion and errors. 
 

Presenter's screen while Create a Poll tool is active.

More customization

  1. Allow presenter to utilize the visual nature of the application by including written questions and answers for participants to vote on.  
  2. For select engagement activities, presenter can control location of content.
 

Participant's screen while a Poll is active in the lower right section.

Clarified Participant tasks

  1. Participants can read along with the question, instead of relying solely on hearing the question and possible answers.
  2. Answering questions occur right in the polling space (rather than using the raise hand 1-5 options). This reduces errors during polling and distinguishes the two functions (voting and asking a question).

Before and after comparison of MaestroConference's Social Webinar presenter screen.

Before

A hidden set of tools, several clicks away.

 

After

A simple, straightforward way for a presenter to find, prepare for, and share each view with their audience. 

 

Next Steps

Had the project continued past 2.5 weeks, I would build a more complete set of wireframes and create an interactive prototype for further usability testing. 


Reflection

Looking back, I would have involved the primary decision-maker more in the design process.  While we did interview several members of the staff, involving him in the design process at the start would have alleviated some of the confusion we experienced towards the end of our project about the problem we were addressing.  Where verbal communication was not sufficient, I think working together on visuals would have provided better clarity for both parties.