Whitepages Pro
This was Whitepages Inc’s B2B product, providing identity verification and fraud prevention for business. It’s since been rebranded as Ekata and then purchased by Mastercard for $800mm.
Problem
The Pro marketing site and related materials were in dire need of an overhaul. It was packed with generic clip art and overstuffed navigation options made the different products difficult to discover and discern.
Outcome
I conducted an overhaul of the Pro marketing sites and branding materials, including the blog, trade booth and other physcial media, and video advertising.
Product offerings became more clear.
Coherent branding improved customer trust.
Trade show presence was more polished and modern.
My Role
Interaction Designer, responsible for UX, UI, branding, and illustration. Also collaborated with:
2 Engineers
Head of Marketing
Problem
A marketing site experiencing design rot
The Pro marketing team hadn’t had a dedicated designer in a while, so the marketing site had fallen into a state of design neglect.
Formal user testing had never been conducted on the site. I started conducting direct interviews with the target audience, as well as quantitative analysis of usage data.
Navigation had slowly been stuffed with more and more options, overloading the menus with information. I worked with stakeholders to massively simplify the way the product was presented.
The team had been using a variety of clip art for decorating the site, leading to a generic and sloppy appearance. I worked to create a new illustration and icon language fitting the serious nature of the product.
Assets like the trade booth, whitepapers, and other physical media were visually out of date from the rest of the brand. I ultimately redesigned all of these assets from the ground up.
This was a single dropdown menu in the top bar. You can probably see how this was causing overload:
An example of the kinds of inconsistent clipart being used for illustrations.
The overall state of the home page when I was assigned to the team. Exact functionality isn’t exactly clear.
Research
I conducted a variety of research efforts to hone in on the greatest opportunities for impact:
Interviews with team members in sales and marketing to identify current confusions being introduced to the conversion funnel via our marketing site.
Analysis of site data to identify drop off points, desired usage vs actual usage, etc.
Direct interviews and user testing with the target audience, including conducting in-person interviews at trade shows (in exchange for Starbucks gift cards).
Broad survey of current business goals to identify mismatches with the state of the site.
The findings weren’t surprising:
First impressions of our product offering as presented were muddled, we needed to simplify our navigation.
Important content like pricing information was buried in remote places.
Product pages weren’t making it clear what the product actually did. Even the name of the product itself was buried down the page.
Business needs weren’t being met; priorities had shifted towards richer developer information, greater emphasis on international data, and new calls to action.
Solutions
Simplifying bloated navigation
This was an acute pain point for new leads arriving on our site. I worked closely with leaders at Pro to dramatically rework the information architecture of the site and its navigation:
Products were now cleanly presented in their own dropdown at the head of the line, with clear value propositions. This menu was reduced from 17 options to 6.
Removed redundant options that were re-explanations or bundlings of products. We found that Industry sections were more effective homes for this kind of information.
Resource and Developer sections reworked to provide a logical home for much of the content that had been jammed into the ‘solutions’ menu over time.
6 options is a lot fewer than 17!
Improving illustrations and icons
As mentioned, the visual language had been chronically under-resourced:
A messy collection of clipart was being used, resulting in an dated and untrustworthy look. I created a cohesive new illustration language based on a collection of reusable components.
Less than ideal generic icons were being used to communicate ideas they didn’t always properly match. I extended the illustration design language to these icons, making branded versions of common icons and crafting custom icons for concepts specific to our product.
The team was very happy with the results:
The icons communicated our product information much more effectively than the old clip art.
The site looked much more professional without a random mixture of art styles and photography.
The mix-and-match capability of the new system meant that new art was quick to create, often faster than tracking down just the right stock image.
Updated illustration and icon language.
Animated product videos
The team wanted something they could use to explain and market our products in a variety of settings:
Share via our social media presence.
Run on screens at our trade booth.
Place on our marketing sites.
We decided on short animated explainers to explain the function and value of our core products.
I wrote scripts in collaboration with sales, marketing, and engineering to make sure I was explaining the products accurately and efficiently. We wanted to keep these videos under a minute each.
I created storyboards to plan animation and gut check the overall video with stakeholders before moving on to animation.
We did test readings ourselves to tune the script for length, then contracted professional voice talent for the final product.
Final animations were produced using After Effects and Premiere.
These videos were successful, with positive feedback to their effect on leads from sales and marketing. I’ve included a couple examples below.
Caller ID product.
Phone Intelligence product.
Marketing page redesigns
Along with the aforementioned upgrades to navigation and imagery, we set out to overhaul every page in the site for consistency, readability, and engagement.
Users were confused about product functionality. I worked with team members to craft new, succinct value propositions and deeper explanations for each product.
To better ease the user into each page, I reworked the information hierarchy to move from broad strokes to finer details as the user moved down each page.
Infographics and illustrations were redesigned to take advantage of our new visual language, and were simplified and clarified where possible.
Explainer videos were implemented on product pages.
Our blog and resource pages were redesigned for ease of use, making our new illustration components available for blog imagery and event promotion.
The refreshed site was successful in achieving its goals:
Incoming leads had an easier time navigating the site and understanding our offerings.
Existing customers had an easier time finding developer documentation, product resources, etc.
The site overall felt more professional and cohesive, improving trust.
Some example screens below:
Updated home view.
Updated product view.
Other design updates
I don’t have images of them here, but I also redesigned a number of other marketing assets to align with the new look and feel.
Trade booth was redesigned.
Physical materials like business cards, whitepapers, etc.
Email templates were redesigned to match the new blog and resource pages they linked to.
Results and learnings
The refresh of Pro’s marketing materials and my ongoing support helped usher Pro into an era of healthier and more productive design overall.
Product offerings became more clear.
Coherent branding improved customer trust.
Trade show presence was more polished and modern.
A few years after I left the company for a new role it was acquired by Mastercard for $840 million. Obviously I can’t take credit for this, but I like to think the improvements I introduced made a difference.
More projects
Whitepages
Likewise