Work Beautifully

Design and Conversion Optimization for Dialpad’s Web & Product Growth Teams

 

Visual Design / UX Design / Product Design

Project Summary

Dialpad is a unified communications platform that includes calling, meetings and support. I created 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

Reviews Page

Unified App Login Page

New Landing Pages

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.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google