Coming soon…

UberConference

The conference view had usability issues as well.

• Key features lacked discoverability - UberConference’s visual interface gave organizer’s the ability to mute or kick conference attendees, but many users weren’t aware of these features because they were hidden. To reveal them the organizer had to click the UberConference logo on a participant.

We’ve all experienced painful conference calls. UberConference’s mission is to make conference calls easy, but certain features had the opposite effect:

• Too much user control led to a negative conference experience - the “earmuff” feature enabled the organizer to mute the audio for an individual at any time so they couldn’t hear parts of the conference - effectively isolating them from the conversation. This feature was intended to provide more control, but people thought it was “disturbing.” Seeing who’s talking is one of UberConference’s core features, but its implementation also included a list of past speakers. This caused anxiety for people who worried they were speaking too little or too much.

Finally, UberConference’s messaging was missing the mark with our target audience. Users didn’t understand the value prop, “See who’s on the call.” Most thought it was a reference to videoconferencing. In fact, videoconferencing, screen sharing, and document sharing were features that users expected and that competing services offered, but UberConference didn’t. Meanwhile features that UberConference promoted, like not needing a PIN, were contradicted by the two PIN numbers displayed to users throughout the app.

Instead of offering the most features, we decided to focus on providing the best conference experience, so we crafted a new mission statement to guide the redesign.

Exploration

We began by exploring improvements to the dashboard and conference screens because they are the main screens users will interact with. The improvements we made informed the designs for all subsequent screens.

Dashboard

The dashboard lacked clear hierarchy, so we ranked its features to determine the elements to prioritize.

1. Start now

2. Schedule conference

3. Next conference details

4. Your info (#, PIN, URL)

5. Upcoming conferences list

6. Past conferences list

The redesign places emphasis on starting a new conference or scheduling a conference for later. To focus the user’s attention, these features are in the center of the page and surrounded by white space . Starting a conference now has a higher priority than scheduling a conference later based on urgency.

Details for your next conference are clustered near the start now and schedule later buttons. Your contact information (phone number, PIN, URL) is always available at the top of the page. We added a button to copy your UberConference info for easy sharing. Finally, we removed the lowest priority features - your upcoming conferences and past conferences lists - to simplify the page. They’re available on a separate “History” page.

Conference

To improve feature discoverability, we removed the button to access participant controls and automatically surface them when a user rolls over an attendee’s avatar. Our data showed that most conferences are made up of 5 or fewer people, so we optimized with larger avatars. We also switched from a circlular to a rectangular shape to open up the platform for videoconferencing features to be added later.

Based on user feedback, we cut “earmuffs” and the list of past speakers. UberConference’s visual interface means you can see everyone on the call, making it easy to identify and remove anyone who shouldn’t be there. For V2 we remove PINs by default, but if a user wants more security they can re-enable PINs through a new “Lock” feature. Finally, we added our two most requested features, screen sharing and document sharing. After the conference ends, a summary is automatically emailed to everyone with a list of attendees, conference notes, and links to shared documents.

After we established the wireframes for the dashboard and conference screens, the UX team build out the subsequent flows and interactions, and I focused on improvements to the design language.

I performed a UI audit of the current design to identify the components we would need. Using these elements I explored different combinations of color, type, iconography, and animations. I created component libraries to quickly apply these styles to the wireframes for testing. I liked the idea of keeping UberConference’s blue for consistency, but I adjusted the hue for stronger contrast and added green, dark grey, and orange for visual impact.

The previous design relied on skeumorphic elements to establish the visual identity. These elements created confusion and made the brand feel stuffy and outdated, so I replaced them with a flat style for simplicity. I incorporated spot illustrations for personality and was careful not to show retro technology that would our service feel old.

UberConference 2.0

The UberConference V2 dashboard and conference screens with the new design language applied. The dashboard welcomes users to their conference room and provides instructions to guide their first interaction with the product. There are now clearly labeled buttons for “Start Now” and “Schedule” with descriptive text for each, and a working clock and calendar add visual interest to these interactions.

For UberConference 2.0 we set out to streamline the user interface with clear user actions. We accomplish this by breaking up tasks and limiting the choices we present at each step.

I created animations to show off the flows of starting a conference, scheduling a conference for later, and interacting with conference controls.

The mobile app’s smaller screen size did not accommodate the desktop’s skeumorphic design. This led to an inconsistent experience between the two apps. Woodgrain background of the dashboard is replaced by an animated gif of an empty workstation.

Avatars are in squares

Past speaker list gone.

Buttons weren’t styled like desktop buttons, but like the non-clickable elements from the dashboard.

The new visual language maintains consistency between the

Branding

We want UberConference to be the “stress-free conference call,” so we updated the brand with friendly language, ample white space, and clean illustrations to make our service approachable. We can’t say we are the stress free solution and have a complicated UI. Likewise, our messaging couldn’t be uptight.

Drop the umlaut. Previous logo emphasized Uber, new logo brings parity /makes them the same hierarchy. Cleaner visual execution.

Friendly language - show don’t tell - To get rid of wordy feature lists on the homepage I created looping animations that highlight the benefits of UberConference to new users.

Upgrade Flow

At every step we focused on making the service friendly and approachable through language, improved legibility, and ample use of white space. Again, the UI and branding have to work together at all points to deliver the same message. We can’t say we're simple and easy to use and have the interface be heavy and bloated with unnecessary features. We service can’t be streamlined and yet we use wordy, feature check list language.

Welcome Email

The previous “Welcome” email intimidated users with information overload. The new email encourages people to explore the service by starting their first conference. It’s signed by members of our support team to humanize our service.

Impact

Following the redesign, UberConference won the bronze prize for “Best Everyday Utility” at the 2014 UX Awards. The improvements led to a 3.6x growth in users within a year and over a quarter billion minutes of conferences every month.