UberConference
Time: February 2013 - December 2013
Scope: UI, Visual Identity
Role: Visual Designer
UberConference is a visual interface for traditional audio conference calls.
Seeing who's on a call cuts down on lengthy introductions, eliminates the problem of not knowing who said what, and can help troubleshoot technical issues by identifying the source of static or other background noise. Convenient scheduling features mean that UberConference can even call attendees for you, eliminating the need for PINs.
I worked with the UX team to redesign and rebrand the UberConference experience for web and mobile.
UberConference 1.0
The UberConference dashboard was cluttered with information like a lengthy list of your past conferences and upcoming conferences that could be months in advance.
Meanwhile, high-priority actions like the button to start a “New Conference” are lost in the header. One of the features we advertised was that you didn’t need a PIN, but on the home screen we give you two pins.
Information density was compounded by a heavy-handed skeuomorphic design featuring a wood grain conference table.
Wireframes
For UberConference 2.0 we set out to streamline the user interface with clear user actions. We accomplish this by limiting the choices we present at each step.
The new dashboard moves past and upcoming conference information to a separate page. This frees the dashboard to focus on the actions of starting a new conference or scheduling one for the future. A notification banner alerts you of your next conference.
Our data showed that most conferences were made up of 5 or fewer people, so we optimized the conference view with larger participant avatars. The switch from a circle to rectangular format opened up the platform for video conferencing features to be added later.
UI Toolkits
I designed component libraries that could be applied to the wireframes for testing. I liked the idea of keeping UberConference’s blue and green color scheme for consistency. I tweaked the colors to a more vibrant palette to make the icons and illustrations pop.
Illustrations
I used illustrations, animations, and interactions to make the experience more pleasant.
UberConference 2.0
The UberConference 2.0 dashboard and conference view with the component libraries applied to web and mobile.
UberConference 1.0 Mobile
The dashboard, conference, and history views from the UberConference 1.0 mobile app for comparison.
Start Conference
The start conference flow from the UberConference 2.0 mobile app.
Homepage Before & After
At every step we focused on making the service friendly and approachable through language, improved legibility, and ample use of white space. The UI and branding have to work together on all points to deliver the same message. We can’t say our service is easy to use and have our interface be cluttered with unnecessary features.
The homepage had a lot of text saying that UberConference is “simple,” but our audience had trouble understanding the benefits of our service. I thought it would be better to show rather than tell, so I made animations to demonstrate our key features to new users. It engages people without resorting to a bulleted list.
Homepage Animations
I made animations to show off the experience of using UberConference to start a new conference, schedule a conference for later, and interact with conference attendees.
Purchase Flow Before & After
We apply these principles to all aspects of the service.
Welcome Email Before & After
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.
Posters
I illustrated a series of posters to celebrate the launch of UberConference 2.0.