Coming soon…
Dialpad
Dialpad is the evolution of Switch to a full featured enterprise phone system.
Case Study
Time: 4 Months
Team: App Integrations
Role: Visual Design Lead
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 were unsure if IT departments would be interested in testing a new product if they had existing hardware and infrastructure. We did not anticipate large, thousand people companies would be willing to rip out their existing PBX systems, but the cost savings were a big draw. As the sales team built on the success of the Motorola partnership, we attracted more and more enterprise companies with complex needs: separate department lines, support queues, faxes, and many other features that were not included when we chose to target small businesses. Feature creep made the app bloated and difficult to use.
Now Playing
A screenshot of Spotify’s “Now Playing” view shared on Instagram Stories.
Research
Switch V1 was a bit of a misstep. We were entering a crowded space - RingCentral, Skype, Google Voice/Hangouts. Like UberConference, the idea was to have limited functionality, but do it well. But problems arose:
The current UI was not designed to incorporate many of the features that were added later. Too many functions were being added to a small footprint.
The multiple window approach was confusing and difficult to use. Users wanted a single window to move around.
The app felt sluggish and unresponsive. Launching a new product is a lot of work. Engineers were more focused on the back end and making sure everything was working properly. As we got closer to launch we had to cut back on the animations, and as a result, the interactions lacked finesse, leading to an uncanny valley effect where the animations made the app feel slow- better not to have than be slightly off.
The design needed room to breathe, and as we continued to pursue larger customers we had to work fast. As part of the contract for deployment, we promised Motorola an interface update in X months. Given the tight timeline, the initial scope for the redesign was to stick the two windows together and increase the widths. That was not ideal, so I pushed for a more comprehensive redesign.
so I explored expanding to a full screen UI.
Mission Statement
With a better idea of the final features in place we can rethink the UI.
Goals
Increase Shares
Ditch the multiple windows
Add enterprise features like departments, support queues, etc. Redesign the Switch interface to allow for customization and an expanding feature set
Quick implementation with little engineering work
Music Identity
Sketches from the team’s brainstorming session explored ways for users to express their “Music Identity” through Stories.
Exploration
I worked with the engineering team on small style changes that could be implemented quickly. We were mostly limited to colors and type style changes. With only slight modifications we were able to make significant visual changes. These are some of the initial mocks. The bottom image is from an exploration that was scrapped because it would have required too much engineering time.
Animated Prototypes
I created prototypes to show how users could share their music habits with compelling Stories.
We initially used the dark app theme to set us apart. For the move to the full screen app I switched it to a lighter theme so it didn’t feel so heavy. The small footprint of the previous design was cramped. Now a single, large window contains the UI. New features that allow for company departments, locations, call centers, and sales and support teams. Use cases where the app is the main focus - always up, and can benefit from more real estate to display info. We also got rid of a lot of the animation work to create a more mature, enterprise product.
Now Playing Explorations
I explored different executions to visualize a listener’s “Now Playing” status. AR lenses made a return in the form of headphones with music notes and song info animating above the user’s head. Other filters featured Spotify playlist branding, with song info replacing playlist titles.
Compare specific screens and detail changes
Active call
Actions are arranged at top.
Conversation view
Utilize established visual cues to decrease mental load of using app - conversation - blue/grey text, indents - with so many event types, staggering the information helped with readability finding important content faster
Contact list & Dialer
Mobile
Even on mobile, I use additional whitespace to free up all the information.
Pare down colors /distractions - multiple meanings, streamline to missed calls, blue and grey only. Green to pick up
Share to Instagram Stories
The Share to Instagram Stories user flow.
Marketing
The shift to enterprise also meant changing our messaging. Our service connects people, so we wanted to incorporate a human element through photography. Feedback from the marketing team was that they needed more graphics to use in their marketing materials. They like the illustrations, but they needed more flexibility/options. We wanted to build a library of images for them. We didn’t have a budget for a professional photographer, so I art directed photo shoots based off stock photography examples from the marketing team. They wanted shots to represent the office environment. The themes were: collaboration, connection, mobility, and the interaction between people and devices. These shots represent the mobile office, and highlight that Dialpad is a seamless tool to enable you to work on the go. The last set of shots are examples for other verticals like education.
There was an issue with the Switch copyright, so we
Also in the corner you see the name Dialpad. It was with all these changes going on that we were involved in a naming lawsuit. Combined with the shift in our target audience and the changes to the UI and branding it made sense to do a rebranding. The only problem was we were on a very tight deadline, 2 weeks. Since we didn’t have much time to do explorations, Whitney and Astra focused on logo explorations while I focused on the word mark itself. One of my regrets from designing the Switch logo was not spending enough time on the word mark, so this time I wanted to make sure it was bold enough to stand alone. These are some of the concepts. And type. The final word mark is a modified version of Einstellung. The rounded letterforms drew inspiration from old rotary phones. I also made a few alphabet logos just in case. The short time frame meant that there wasn’t much opportunity for back and forth, so it was easier to push our recommendation through. We finally moved away from the alphabet logo. You can see the final mark in action in this video I illustrated and animated for the homepage.
Story View
Viewers can tap the link at the top of the Story to listen to the song on Spotify.
Feature Launch
The feature was announced on stage at F8 in May 2018.
Impact
Following the redesign, Dialpad grew 10X and was averaging 25 million call minutes per month.
Launched end of 2014
2014 1.4k users
2015 22k users (10x growth)
03/16 25 million call minutes a month
Over 300 million call minutes a month w/ Omniad
Artist Tools
Artists like Selena Gomez and Charlie Puth are using the feature to engage with their followers.
Improvements
User testing revealed the Spotify attribution was too small. Users also expected their Stories to include audio clips of the shared song.
We were not able to address these items before launch, but we addressed them when we partnered with the Facebook Stories team to build the feature for their platform. The success of the Share to Instagram Stories feature allowed the team to negotiate with music labels for the use of audio clips in Facebook Stories. The integration with Facebook Stories also includes animations and a larger CTA to play the song on Spotify.
New Spotify features open up additional opportunities for sharing. Spotify Canvas is a creative tool that gives artists the ability to upload their own visual loops to accompany their songs. Future iterations of this feature could leverage these animations to create even more visually compelling artist Stories.
Next Steps
The integration with Facebook Stories features improvements like audio clips and a more noticeable Spotify playback link. Future iterations of the feature could leverage Canvas to create stronger visual Stories that utilize the strengths of the platform.
