Introduction
Whitepages empowers small-medium businesses and individuals with quick and easy access to publicly available data. As Lead Designer, I oversaw all feature design and created Brand Guidelines for Whitepages' customer-facing products. Whitepages, Whitepages Premium, and Whitepages TenantCheck.
Problem Statement
Premium users do not understand what is included within each Person plan and make a purchase that does not include information they need, leading to frustration and canceled transactions.
Hypothesis
After further examination of the structure of our page and watching users' behavior using FullStory, it was clear that the problem with this page is that we are mixing too many elements into one section and users not behaving as we'd like because they don't understand what to do next. In particular, we are showing what information is available for the person, as well as what is included in that plan, in the same UI element. I hypothesized that solving this mixing of elements by giving each of the four functions of this page their own, clearly defined section.
Concepts
For each content section to function on its own, we needed to revisit the plan selection design. To keep only related info on screen, I explored concepts that would allow for the info to either change or hide/reveal based on user selection. This change also reduced the minimum supported screen size to accommodate smaller devices.
Content Segmentation
The primary takeaway from my concept design feedback was that the information on the plan now feels too divorced from the person and we'd like to give more prominence back to them. To address this, I explored a header like "Person card" that would both set context for the page, and show all of the info available for that user (leading to potential upsells). Testing revealed issues with my initial desktop designs and I revised them to have a similar, single-column layout to mobile.
User Selection
Midway through the design process, another test passed that required additional changes to our plan selection UI. There would now be an additional plan that requires a subselection with three options. This added a fourth selection type to the page (button, binary switch, radio button, and segmented control) and highlighted a problem with the design language of our selection elements. To solve this, I explored changes to the visual hierarchy, design, and placement of our selection elements.
Final Designs
After examination of how users navigate our plan selection page, and study of the page's structure, I created designs that successfully communicate what information is included in a purchase and have seen fewer cancelations and more conversions as a result. I accomplished this by greatly reducing the complexity of the page’s design, isolating information into clearly defined sections, and redesigning the selection elements of the page. Elements of this redesign were tested individually and overall has proven successful. Transactional revenue: +8.02% Annualized revenue: +4.30% Conversion rate: +11% (averaged across platforms)
