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.
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
Image
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.
