Categories
Work

Mezzanine

A next-generation conference room system that enables multiple participants to share content at once on a large, flexible workspace.

UI/UX DIRECTION, UX RESEARCH

Mezzanine is a first embodiment of Oblong’s vision for a new, deeply human, multi-user approach to the way we interact with computers. It began life with the goal of offering a cohesive product that distills those ideas into a form that could make a direct impact on the way the world collaborates, today. These ambitions led to a product that was wholly unique, immensely capable, and yet — at least at first — fundamentally unfit for use by the average person who sat down in a Mezzanine conference room.

Mezzanine is a story about seeking product market fit, and repeatedly learning to step back, listen to real users, and emphasize simplicity over capability when appropriate. I began this journey with the team, and then I led product design for its second half decade as a product, during which time I instituted a regular user research program, and we made great strides at providing a streamlined experience that meets users where they are without sacrificing the system’s powerful capabilities.

Mezzanine is an immensely capable visual collaboration tool that enables distributed teams to share, arrange, and discuss lots of content as if they were sitting together in the same room.


Defining the Problem

Mezzanine is a highly capable system designed to give a high level of control to its users. With that capability comes a fair amount of complexity, as well as the responsibility to manage that complexity to avoid overwhelming people. Unfortunately, early iterations failed to do so, and we identified several key challenges for new users.

Too Many ENTRY POINTS

While information on the screens did welcome new users, it gave them a lot of choices for how to get started. They could plug in an HDMI cable, download an app to share wirelessly, pick up a wand, or navigate to a web app. With so many choices and no clear direction as to which path to take, the paradox of choice often led users to remain disengaged entirely, or find another room.

DISJOINTED APP ECOSYSTEM

The system supported multiple apps for different functions, and a lack of consistent naming added confusion. A “Mezzanine web app” enabled uploading content and interacting with content on screens, while a dedicated desktop app called “Screencast” could be used to share a screen wirelessly. There were also iOS and Android apps. Knowing what to use and when was a challenge.

Lack of Guidance

Apart from the basic information on the welcome screens, Mezzanine offered almost no guidance to help users accomplish their desired tasks. It was a little bit like putting a new driver in a Ferrari and expecting them to control it on the track. Too much power without adequate guidance led many to give up without ever learning how Mezzanine could empower them.

Mezzanine was a powerful collaboration tool with a high ceiling; unfortunately, the floor wasn’t nearly low enough for new users, robbing them of its benefits entirely.

As a result, engagement in Mezzanine rooms remained low. Not only did this prevent users from getting the most of the system, it also exacerbated the challenge of finding real users to talk to and learn from. We realized we’d need to approach the problem holistically.

An early iteration of the welcome screen provided several paths to get started and performed poorly in usability studies.

Our Goal

Create a unified app experience and revised welcome flow that enables novice users to start a meeting and share content in less than 5 minutes.

Research, Rinse, Repeat

Clearly our assumptions were wrong. I coordinated with product leadership to create a sprint team dedicated to this effort. We dubbed them the “first five” team, and their reach and responsibility included everything in service of the aforementioned goal.

I instituted a user research program with a regular monthly cadence, and coordinated with product owners and sprint teams to develop testable hypotheses and generate shared interest in study results.

We developed a benchmark study procedure that would allow us to perform repeatable experiments with new sets of users as we iterated on solutions. The goal was simple: bring the task time under the 5m limit. Of course, before we could begin measuring time on task, we had to ensure people could succeed in the first place.

An early click study saw only moderate success.

We also expanded our research efforts into unmoderated click studies to gather statistically meaningful evidence quickly and cheaply. This approach helped us narrow down the options worth testing on site, and highlighted the significant effect that seemingly minor changes in color, layout, and phrasing could have on success rates. Using this approach we quickly improved our success rate, from 55% to 88%.

The research clearly suggested that a more focused approach, with a clear call to action, performed better. Unfortunately, our disjointed apps undermined this. Armed with the results of our research, I successfully pitched a plan to redesign our app, providing a more cohesive design and a single point of entry for new users.

A paper prototype co-design exercise allowed us to gather insights about existing mental models, and what actions were deemed most important.

Don’t underestimate the power of cut paper to quickly evaluate mental models and relative importance of features.

We kickstarted ideation with a paper prototyping co-design exercise. We created an abundant toolbox of cut paper components — icons, buttons, widgets, windows, etc. in various shapes and sizes — and asked people to arrange them into their ideal app. This allowed us to quickly establish common mental models and learn what features they found essential.

This provided useful validation for our hypothesis that although this new unified app needed to serve more advanced use cases, most users would be served better by a small subset of functionality, which led us to devise an app with two modes: one for starting meetings and sharing one’s screen, and another for layout and advanced presentation.

Bringing it All Together

We devised the app in coordination with the engineering teams to enable not just a new unified layout, but also a new backend meeting infrastructure and a stronger security model, all of which had implications on the design and user experience.

This imposed some challenging constraints, and we spent a great deal of time sketching and iterating on low fidelity wireframes.

The complexity of the changes needed to support these new models while also maintaining backwards compatibility to reduce burden on users required careful planning and a lot of state diagrams to make sure we communicated design requirements adequately.

A state diagram (one of many!) illustrating the flow into the app depending on whether a meeting is scheduled in the room.

User studies continued throughout the development process, allowing us to learn an adapt as we went. Importantly, we could finally test the real app in the room to see how we were progressing toward our goal. This, combined with a necessarily incremental approach to delivering the new design and features, kept us truly agile and allowed for ongoing refinement to the design, including new icons, clearer copy, and a streamlined onboarding flow to help users get started efficiently.

The new app provides a single point of entry, simplifying the message and offering an easy way for new users to get started.

The app provides two distinct modes of operation, which cater to the two distinct patterns of use we learned through ongoing customer feedback. The mini version of the app offers friendly, discoverable buttons for basic meeting and screen sharing tasks — everything most users need — while staying out of the way, keeping the focus on the content in the room.

The layout mode offers additional capability for more advanced users, including the option to upload content, control the layout, and give advanced presentations. The buttons carry over in the toolbar, keeping the most important actions available in any context.

The new welcome screen provides clear direction so new users know exactly how to get started.

While the overall layout didn’t change much, the new welcome screen provides a clear call to action, and performs significantly better.

The revised welcome screen design provides a central call to action, telling new users to download the app to get started. From that point on, the app guides them through the process of connecting to the room. To make this as easy as possible, we built an ultrasonic detection mechanism which allows the app to connect automatically in equipped rooms, saving time and eliminating one of the few potential blockers to success.

A new logo engenders brand recognition and provides a visual connection between the screens in the room and the app.

We launched a new logo identity for Mezzanine in conjunction with the new app. This increased brand awareness, and provided a clear visual connection between the messaging in the room and the app users installed on their own devices.

A system of progressive contextual disclosure helps people discover new capabilities just as they are needed.

Although the welcome experience now drives everyone to the Mezzanine app, the wand is still a highly capable tool for interacting fluidly with the workspace. Moreover, we know from studies that it brings joy and delight to users once they try it (even if they struggled at first).

The problem wasn’t the wand itself, but instead introducing it too soon. The wand excels at moving and resizing items on a flexible canvas, but users have no need to do so until they’ve already got a couple of shared items on screen. Providing contextual hints at just the right moment encourages users to try it when it can be of immediate use, and also affords some animated gesture hints to help them learn how.

Progressive animated hints illustrate how to use the wand once there are several items on screen.

Additionally, we wanted to preserve the existing ability to kick off scheduled meetings with the wand. Although the call to cation was removed from the screen, interaction with the wand itself provides a signal we leverage to expose this information, making it easy for those comfortable with the tool to get going just as quickly as before, even without the app.

Pointing the wand at the screen reveals a big button, letting familiar users quickly start their meeting.

A “First Five” First

Cracking the welcome experience proved a far greater challenge than anyone expected. We learned some stuff that seems obvious in retrospect, along with a bunch of small but important details that can only be uncovered through repeated user testing and careful observation. The sum of those learnings adds up to more than their individual parts.

Our solution combines a new unified application, a new meeting model, new branding, a new welcome screen, and a progressive hint system. The good news is: it was worth it. Once these pieces had finally fallen into place, we’d gone from a system which about only 1 in 2 people could even get started with, to succeeding in seeing a majority of users tested starting a meeting and sharing their screens in under five minutes.

Jump to a Project

  • Rumpus
    A more social video meeting tool for distributed teams with collaborative screen sharing and non-verbal feedback.
  • Mezzanine
    A next-generation conference room system that enables multiple participants to share content at once on a large, flexible workspace.
  • Mezzanine Mobile
    A use-case driven redesign concept for the Mezzanine mobile device experience.
  • Glissando
    An entirely gesture-controlled music and podcast player for iOS.
  • litl OS
    A minimal, cloud-centric interface for a uniquely acrobatic family computing device known as the litl webbook.
  • Sugar
    The collaborative learning platform for kids developed for One Laptop Per Child, now in the permanent collection at MoMA.