Switch
Time: February 2014 - October 2014
Scope: UX, Design System, Visual Identity
Role: Visual Design Lead
Switch is an enterprise cloud phone system from the makers of UberConference. Instead of investing in costly dedicated phone hardware, companies can assign a single number that works across an employee’s existing devices – mobile, desktop, and even traditional phone lines.
Getting a business off the ground is costly. There are big startup costs involved from office space, IT, etc. Setting up a company phone system is another. Many employees have their own mobile devices and in some cases prefer using them, why not leverage existing hardware to reduce startup costs?
I was responsible for the creative direction of the UI and brand from concept to launch. I managed the execution of the visual style across mobile, desktop, and web.
Mobile Wireframes
adfad
Research
Cloud communications was already a crowded space before we entered it. But looking at some of the biggest players in the industry, we saw an opportunity to streamline the experience like we had with UberConference. The idea was to have limited functionality, but do it well.
Working on UberConference brought to light many issues of corporate phone systems. We performed an audit of existing cloud services like Ringcentral, Microsoft Lync/Skype, and Google Voice/Hangouts to identify opportunities for improvement.
We targeted small businesses with less than 50 people. These were the companies that we hypothesized would not want to invest in costly dedicated hardware and would benefit from leveraging existing mobile and desktop devices.
We chose not to target large companies that would already have phone systems since we reasoned that they already invested in the hardware infrastructure and would not want to get rid of it or risk trying a new system.
Mobile Wireframes
Switch is a unified communications system that unites phone, instant messaging, and SMS. It’s important to highlight missed calls and messages, so early mobile concepts centered around an inbox to make it easy for users to follow-up on new events.
Desktop Wireframes
adsfasd
Desktop Wireframes
Switch also unifies a person’s existing mobile and desktop hardware so calls and messages are accessible across all their devices.
Wireframes for the desktop app explored full screen and candy bar style designs before the team settled on a contact list launcher. The benefit of the contact list’s minimal footprint would allow it to stay at the forefront of a user’s desktop. Making a call or interacting with a contact opens a new window.
We merged the “Inbox” and “Recent Contacts” views to streamline the flow of interacting with new events. Folding new events into contacts also refocuses the app on people and creating conversations.
Goals
Like UberConference, Switch had less features than competitors. Instead of focusing on features we focused on streamlining the experience of using a cloud phone system.
Design a unified communications tool that streamlines the experience of using multiple devices (desktop, mobile, landline) and communication methods (call, text)
Leverage existing devices - don’t require costly servers or desktop equipment. Take advantage of a cloud-based service to offer seamless transfer between devices.
Easy to set up - In the past, setting up a business phone system took as long as several weeks and required an expert to walk you through the process. Signing your team up for Switch can be completed in less than a minute. By integrating with Google Apps domains we can even pull your company directory to make deployment painless.
Easy admin controls - Allow customization through robust, but clear settings
UI Explorations
asdfasd
Working from the UX team’s wireframes, I explored different layouts for navigation and information hierarchy. From UberConference V2 we learned the importance of showing the right information at the right time to guide users to the most important actions.
I explored a Notification Center at the top of the app to call attention to new calls and messages. I also experimented with using the Notification Center’s empty state to display information like time, date, weather, and usage stats. These additional states were removed to focus on the most important vital user information, new events.
We took a similar approach as the UberConference redesign with the two UX designers, Jerome and Jason, working on the wireframes. They experimented with full screen and candy bar style designs, but settled on a contact list launcher. The idea was that the app would stay open on a user’s desktop, similar to a chat program. Making a call would open a separate window. While they worked on the flows, I explored visuals and interactions for the desktop app. I also focused on information hierarchy - what is the most important information to show the user at at any given time.
Mixing Calls and Messages - iOS Splits
One of the problems we were solving was mixing different event types. When we developed Switch in 2014, it was still a relatively new idea to mix text and messaging functions into one service. Apps like Facebook Messenger & WhatsApp were still primarily messaging focused apps. Voice calling features wouldn’t be added until a year later in 2015, after Switch launched. Slack launched in August 2013 but didn’t add voice features until 2016. iOS still has separate apps for calling and messaging. Their wireframes focused on event types to bridge the gap between these two mental models and they included icons for incoming/outgoing messages and calls. Early mocks even included a separate inbox that you can filter to focus on only calls, messages, or voicemails.
Google voice screenshot or WhatsApp or _____
Prioritize Time Sensitive Information
From UberConference V2 we learned the importance of showing the right information at the right time to guide user’s to the most important actions. Taking a step back, what’s more important to the user, the communication type or the person you’re communicating with? I explored designs that focused on people and replaced the event icons with user avatars. I still kept the event type, but it became secondary information, displayed through supporting text that tells you if the communication was a call, voicemail, or a text message with the a preview of the message.
The shift to people changed the inbox model to a recent contacts list. Using the dropdown menu you could filter the list to view the company directory or specific departments. The inbox was changed to a “History” tab to differentiate it from “Recents.” Events in “History” could be sorted by “All” “Missed” or specific event type like voicemails or calls.
Notifications - Priority to New Events
With so many different events coming it’s important to have clear user notifications. I explored a Notification Center at the top to highlight events you missed. Since the recent list below shows who’s communicating with you, the notification brings back the event icons to show you at a glance what type of message you missed - whether it’s a text, call, etc.
Since the app would remain open on your desktop, I thought the notification center would be a good opportunity to show other relevant information - time/date, weather, usage stats. This last mock was me playing with the idea of having a screen type interface at the top of the list that displayed different information depending on the action you were taking. I was inspired by consumer products like the Teenage Engineering OP 1 synthesizer and Nest thermostat. What really impressed me about nest was how they designed something that made you want to interact with it - through transitions and animations. And so I landed at this mock, which is pretty plain in comparison, but relied on animations so that it felt alive.
UI Explorations
I developed a clickable prototype so the team could test key user interactions.
Think Clear vs Task management (GTD) apps. How do we make a contact list stand out? Focus on making experience delightful. Animations, feedback, make users want to complete actions based on feedback.
This is a recording of a clickable demo I created in Adobe Edge. Since so much of the design relied on interaction it was important that we could play around with the interface. A context sensitive info pane at the top of the contact list displayed notifications for new events and reinforced the area as the focus of the user’s interactions.
Tapping a contact opens up a message thread. Earlier wireframes had it defaulting to a profile view, but again I wanted to focus on the communication so I defaulted to the message thread since that is the most time sensitive information. Event icons come back into play in the thread history where you can see voicemails, missed calls, etc.
Like UberConference, we were in the position of launching with less features than our competitors, so the goal was to streamline the experience of using a traditional phone system. One of the benefits of Switch is that it uses employees existing devices. So Switch has standard call controls like hold, mute, and speakerphone, and using these functions are similar to the experience on a user’s smartphone. Switch goes a step further to make it easy to do complicated phone actions - like transfer a call. Instead of having to press a series of arbitrary numbers on a desktop phone, you can search for the person you want to transfer to. If you answer a call on your desktop but need to head out, you can seamlessly “switch" (hence the name, also switchboards) the call to another device.
Desktop

Switch
The Notification Center’s final design uses color to provide a glanceable indicator for missed events. I used contrasting light and dark themes to differentiate between the active conversations and the contact list.
Tapping a contact from the contact list opens the message thread. Earlier wireframes adopted a phone centric model of opening the person’s profile, but internal testing revealed Switch’s principal use as a messaging app, so the final design defaults to the conversation view. Color coded events for voicemails, missed calls, and completed calls appear within the context of the conversation.
Switch Desktop
Users can view a contact’s profile via the tabbed navigation at the top. The profile shows recent interactions and shared documents. Switch can even integrate with your Google and LinkedIn directories to automatically fill information for your contacts.
A desktop notification appears to display incoming calls and messages.
Switch Mobile
asdf
One of Switch’s benefits is that it leverages employees’ existing devices, so the contact list, conversation view, active call, and profile view function similarly to consumer phone and messaging apps, with additions that take advantage of Switch’s strengths as a unified communications service.
Instead of distinguishing between different communication methods (calls vs. messages), we focus on conversations. The main “Recent Contacts” view mixes phone calls and messages and sorts all interactions based on recency. Likewise, the conversation view displays calls and voicemails inline with messages and SMS. Users can filter by event types in the “History” tab.
Key Features
asdf
Switch to Device
Start a call at your desk but need to head out? Switch lets you seamlessly transfer your call to your mobile device.
Visual Voicemail Works like your smartphone
Easily browse and follow-up on missed events. Visual voicemails work the same as they do on your personal smartphone.
Unified Communications
Our unified communications service lets you search through contacts, messages, and even voicemail transcriptions.
Departments
Switch supports department lines, and when you’re done for the day you can switch your status to “Do Not Disturb.”
Transfer Call Flow
Switch’s visual interface makes it easy to perform complicated phone actions like transferring a call. Instead of dialing a series of arbitrary numbers on a desktop phone, you can search directly from your company directory. A confirmation screen completes the user feedback loop and lets you know when the call has been transferred.
Animation
I created an animation to highlight Switch’s key features.
Onboarding Illustrations

After designing the main elements of Switch’s UI, I worked with the marketing team on its branding. Like UberConference, we try to be playful with our language and imagery to differentiate ourselves from other phone services. The visual system utilizes ample white space for clarity. I use strong contrast and bold graphics for visual energy.
Once we passed off all the assets to engineering, we focused on the brand. As we continued to build out the messaging the idea that Switch was “The phone that works the way you work" spoke to our ability to work on whatever device the user chose. Our low cost meant that we could scale to meet the needs of most businesses. These are some illustrations I created to represent that idea. We liked the idea that we were the phone for workers of the future, so we created some messaging around that. These are some more illustrations we used in the app, and on boarding on the desktop and mobile. Again we try to be playful with our language and imagery to differentiate ourselves from other phone services. The style also incorporates visual elements from our sister product, UberConference. Ample white space, use of blue, a logo featuring a letter, illustration style and tone. Strong contrast and bold graphics are used to create visual energy.
Illustrations
sad
Switch works on any device, and its low cost means it can scale to meet the needs of small and large businesses. I created illustrations to communicate the message that “Switch works the way you work.”
I designed an astronaut mascot to highlight the growth of the remote workforce and how Switch enables workers to stay connected wherever they go.
Emails and Sign Up
sad
Our clear and friendly tone extends to all aspects of the app including our emails and sign up flow.
In the past, setting up a business phone system required an expert to walk you through the process. Signing your team up for Switch can be completed in less than a minute.
Sign Up Flow Continued
Like UberConference, we limit the choices we present to the user to focus on clear user actions. In doing so, we break down a complicated process to manageable steps.
For UberConference 2.0 we set out to streamline the user interface with clear user actions. We accomplish this by breaking up tasks and limiting the choices we present at each step.
We automate user tasks to streamline further. By integrating with Google Apps domains we can pull your company directory and make setting up your team easy.
Sign Up Flow in Action
asdf
I used illustrations and animations to make the sign up process engaging and delightful. I recorded the actual process to demonstrate how a new user can sign their team up for Switch in less than a minute.
Another area we focused on streamlining was during sign up - Phone systems are notoriously complicated to set up. Signing up for some of our competitors can mean calling a sales person and setting up an appointment for them to walk you through the process. By contrast, signing your team up for Switch can be completed in less than a minute, and typically takes new customers less than 10.
Inspired by Virgin airlines process of purchasing a flight. It makes the dry process of selecting a flight snappy and easy to understand. Again we followed the principles set by UberConference to limit the actions being presented to the user. Adding animations makes it feel snappy. We used illustrations, animation and interactions to make the process engaging and delightful. By integrating with Google Apps domains we can even pull your company directory and make deploying your team easy.
Motorola
asdf
Impact
Switch and Motorola made history when they signed the largest single contract for a cloud phone service. Motorola chose Switch over established competitors like Microsoft and RingCentral for its low cost and ease of use.