Vonage Business Essentials

Maintain a single business identity in the office and on the road

Vonage Business Essentials is a cross-platform B2B VoIP app that allows users to have all their business communication available to them whether they are at the office or away. The app includes the option to connect several extensions, make audio and video calls and send messages, including attachments.

The overhaul of the Android and iOS apps included large and small scale UI and UX changes. Together with the design manager and the product owner of the mobile app we’ve decided on key changes that would bring most benefits for the user, as we were operating within time and dev power limitations.

The StyleGuide

We started by creating a styleguide with the fonts, colour palette and iconography which we were going to use, in order to keep our designs unified and to work efficiently, dividing our tasks while ensuring the design would be unified across the app, both on Android and iOS.

The Process

We started by rethinking the main navigation. Using Appsee and Localytics we looked at the usage levels of each of the main navigation items and decided to remove the Recents tab and unite between the voicemails and messages tabs, as they were directly connected.

On several main screens the filtering was hidden and only available through two taps. We opened the filters at the top, removing one tap and making the content more accessible.

Before

After

Before

After

Calls

For the Calls screen the UI was cleaned up in order to make it easily distinguishable from the other tabs, the filter at the top opened to All calls and Missed calls, and the New Call feature was added.

Before the overhaul if a user wanted to return a call, they had to tap on the call entry, go to the call details screen and only then press on the call button. By adding the info icon on every entry and turning the main click on the entry into an outgoing call, the user could now preform the primary action with one tap.

Settings

Before the overhaul there were two buttons on the top navigation bar – Settings and Quick Settings. Using the quick settings the user could set his availability to online, offline or busy. By uniting the two in the newly added sidebar, the user could now see all the settings in one place, as well as the list of all their extensions and which extension had unread messages.

Before

After

Before

After

Contacts

Other than making the UI cleaner and the favorites section more distinguished, we also changed the look of the presence indication across the app. The presence indication is meant to show when your contacts are online, offline, or during a call, so the user would know when it’s best to contact their customer. We wanted to make the presence part of the contact’s avatar to make place for other badges that might be added in the future and to introduce a more updated UI element.

Document Attachment

As part of the process to make messaging the app’s main focus, it was decided to add the feature of sending documents between users, in addition to sending images. The prototype illustrates the process of adding and sending a document attachment.

Because a user might mistakingly choose the wrong attachment from the list, and their information may be sensitive, we’ve added both the option to preview the selected item before sending, and the option to stop the sending process once the send button was tapped.

In the gallery view we created a unified grid that could support presentation of images, documents and video files, including file type and file size for documents.

Statistics of Increase after 3 weeks in Production

+8
+ Outgoing Messages
31
+ Total # On-Net Messages
+7
+ Daily Active Users
13
+ Avg. Conversation per User