Dialpad
Time: January 2015 - March 2016
Scope: UX, Design System, Visual Identity
Role: Visual Design Lead
Dialpad is the evolution of Switch to a full-featured enterprise phone system.
Switch was originally developed for small to mid-sized businesses who could benefit the most from the cost-savings of a cloud phone system. We did not anticipate that large companies would be eager to replace their existing hardware and infrastructure. The Motorola partnership attracted other enterprise companies with complex needs: department lines, call centers, support queues, faxes, and many other features that were not included in the original scope. As new features were added, the app became bloated and difficult to use.
I led the visual design team through the redesign and rebranding of Dialpad across desktop, mobile, and web.
Growing Complexity
The Switch UI was not designed to incorporate many of the features that were added later. Too many functions were being added to a small footprint.
Multiple windows were confusing. They got lost on users’ desktops and made it difficult to find active calls and conversations.
Color was used to represent different meanings depending on the context. A green button was used to answer an incoming call, but a blue phone icon was used to start a new call. A green dot represented an active user but a green badge could mean a department notification. Your own active status was colored blue. The use of color was confusing.
Single Window Explorations
I explored single window designs to unify the Switch experience and contain user interactions.
I worked with engineers to limit the changes to type, color, and scale updates that could be implemented quickly.
Light Theme
I restrained the use of color to highlight important information and interactive elements. The switch from a dark to light theme reduces the app’s visual weight.
Additional Screens
I applied the updates to key screens like “Search,” “Missed Calls,” and “Contacts” to evaluate its impact on primary user interactions.
The bottom-right image swapped the layout of conversation and profile information. It was scrapped because it required too much engineering time.
Switch Redesign
The single window UI frees the design to use scale and white space to more effectively establish visual hierarchy.
Active calls and conversations are given focus, and the additional space allows for new features like video calls and document sharing.
Switch Mobile App Before
The “Recent,” “Conversation,” “Active Call,” and “Profile” screens before the redesign.
Switch Mobile App After
The “Recent,” “Conversation,” “Active Call,” and “Profile” screens after the redesign.
Recent View Improvements
It’s important for users to be able to change their active status when using their personal devices for work.
The previous design required users to tap on their profile to view or change their status. Users often forgot to switch their status back the following day.
The redesigned Recent view displays the user’s status prominently at the top. If the user enables “Do not disturb” mode, a banner appears as a reminder and allows the user to quickly change their status.
Active Call Improvements
The previous Active Call screen had two rows of buttons. The top row was a mix of common actions (mute, hold) and lesser-used features that benefitted from text descriptors (transfer, record).
The redesign puts emphasis on the most frequently used in-call features: mute, hold, dialpad, and speakerphone. They are given a more tappable button shape and are positioned away from the bottom to prevent accidentally pressing “Hang Up.” More complex features are available through an action sheet.
VoIP/carrier status and switching are merged. Most users will only want to interact with this feature if something is wrong, i.e. their connection is weak. The new design warns users of poor connectivity and prompts them to change their connection with a tap.
Conversation Improvements
Switch was designed first and foremost as a voice communication service. The conversation view emphasized call activity with color-coded call events, but this meant messages receded in visibility.
The new conversation view builds upon the visual patterns of speech bubbles to improve conversation readability. Messages use indents and spacing to clump distinct message threads together.
The redesign also adds new features like video calls, transcripts, document sharing, and more to the conversation view. These events are styled with more noticeable icons so they are easy to find and follow up with.
Photography
The shift to enterprise also meant changing our messaging. Our service connects people, so we wanted to incorporate a human element through photography. We didn’t have a budget for a professional photographer, so I art directed and shot photos to build a stock library for the marketing team.
Dialpad Rebranding
Trademark concerns, combined with the shift in our target audience and the changes to the UI, created an opportunity for rebranding. I produced an animation to celebrate Dialpad’s launch.