FreshVoice iPhone

FreshVoice is a enterprise video conferencing solution developed by Anet. I was tasked to redesign the iPhone application using existing functionality from their desktop product. The challenge here was designing a enitrely new user interface that followed recommended iOS guidelines, while still providing a consistent user experience in both English & Japanese.

Understanding The Problem

FreshVoice for iPhone was developed out of necessity and was quickly developed by a programmer. No thought had actually gone into the actual branding of the application or the overall UX/UI design. Hence, I was tasked to redesign the iPhone application from scratch.

Design Process

All of the functionality had been decided, so it was a case of designing a user experience that was intuitive, quick and simple to use both in portrait and landscape views.

New Brand Identity

I was tasked by creating a new brand identity from the CEO. He wanted to expand to international markets and have a logo and color scheme that resonated with Western style software companies.

Login & Authentication

FreshVoice users are setup with a secure connection and require two stage authentication to reach the application.

Server Authentication

User Authentication

List & Branch View

FreshVoice enterprise users have preloaded directories of contacts to their company. From these contacts they are further segmented into individual and branch users.

Individual Contacts

Branch Contacts

Creating Multi-Partipant Calls & Groups

Group and multi-participant calls is the most widely used feature for FreshVoice. They are able to facilitate calls with up to 16 guests with minimal latency and video quality. It was imperative to enable iPhone users a simple way to highlight contacts in both the individual and branch views. I did this using touch and swipe gestures.

Invision Prototype ~ Individual Calls

Invision Prototype ~ Group Calls

Calling States

There are multiple calling states for both individual and group calls, each had to be designed independently. I used gradient colors to highlight individual (green) and group (blue) calls.

Calling multiple people

Incoming individual call

Incoming two-way call

Incoming multiple call (swipe gesture)

Outgoing Group call to multiple people

Incoming Group call with multiple people

Incoming Group call with multiple people (swipe gesture)

In Call Video Grid & Paging

Once in a call, there is advanced functionality to order how the video grid is displayed depending on how many participants are present.

One-to-one call

3-way call

9-way call

16-way call

Video Grid Settings

In call navigation differed once the user turned their screen horizontally. To preserve space and focus attention on video call itself I moved menu items into two buttons in each corner. Once opened the users could navigate to similar screens.

Horizontal 4-way call ~ cornerd navigation

16 participant call with page navigation

Primary menu navigation opened

Call details menu open

Call details more options open

Interaction Design & Animation

Animating the corner navigation menus with Principle for Mac allowed me to finely tune timings and easing curves.

In Call ~ Advanced Functionality

While in a call, users have options for various interactions including: text chat, document sharing, in-call settings and connection status. The document sharing is compatible with all known file formats so special attention had to be taken into account when designing for images, presentations and video. There is also an advanced feature for call “chairmans” to synchronize documents to same pages, video cuepoints and image zooms.

Text chat

PDF Document

Synchronize document feature

Powerpoint Document


UI Comparisons ~ Old vs. New

Comparisons between old and new design

Login Screen ~ Comparison

Contacts List ~ Comparison

In Call ~ Comparison

Results ~ Beta Testing

The redesign of the application is currently in Beta testing with internal team members. However, recent results show that users spend 40% longer in the app.