Project Summary
Dialpad is a unified communications platform that includes calling, meetings and support. I art directed this unified animation of the product interface along with the design agency Definery to help communicate this multi-pronged approach.
My role
During my 15 months at Dialpad, I was chiefly responsible for visual design and layout of our landing pages as the website’s brand was updated to a new design system. I worked closely with our optimization agency to test components and convert our web prospects.
I also worked with the Growth side of product to improve both the signup as well as the login experiences for their Business Phone System.
Our primary layout was based on a 24 column grid, with 30px margin. The type ramp was all based on the ArchivoExpanded variable font family. And lastly, the four main colours were all derivations from the primary Dialpad purple.
Here is a selection of my design work.
Jump ahead to:
Top Level Web Navigation
When Dialpad rebranded, there was some debate about how to include the additional elements such as search and contact information in a separate utility navigation.
My responsibility was to work with the Senior Web Designer on developing the look and navigation structure for this new section, as well as how it would collapse in a responsive design. This design was based on analytical data about how users were interacting with our top navigation, as well as providing extra room for localization support (some menu items are a lot longer when translated into German!).
I prototyped the responsive design in both Anima App as well as the Figma plugin called Breakpoints.
Reviews Page
By default, users would type in a Google search and land on an external reviews website (shown below). This resulted in loss of SEO traffic to the main Dialpad domain. By creating a net new page, I designed a layout that would easily aggregate reviews from various sources and unify search traffic to our main domain, hopefully resulting in a higher opportunity to convert. For this project, I used a combination of existing brand components in Figma as well as custom designed components. The user can toggle between the card view and list view as well as select the review site of their choice from the dropdown. Phase 2 would include an ability to rank reviews by rating.
Unified App Login Page
The goal of this project was to unify two different login screens and help build the unification story between Dialpad’s Talk and Meetings products. Previously, customers would need to log in to two different places, and design components were not shared between the web system and the Dialtone system. My job was to work directly with web engineers to bring our web components into the correct system and ensure brand consistency. I borrowed from similar log in pages with a tabbed interaction in order to show both product log in options on the same page. I also updated the designs to include mobile and tablet views, as those had never been developed.
Updating Landing Pages for Conversion
Our department was mandated to update our landing pages from a third party site to our main domain. We also wanted to unify the brand elements, and optimize for conversions. To the effort, I worked with the conversion team to A/B test different copy variations, update imagery, and embed the signup forms on the hero section to encourage higher conversions to their business phone and contact center products. We did see an increase in conversions across our website once the new pages were implemented.
