Profile manager for small businesses
Platform: Cross-Platform | Team size: 3 PMs, 2 designers, 5 engineers
Background
Small businesses turn to YellowPages every day to create a new business profile and are listed on YellowPages.com. ypPresence (one of YellowPages most popular products) offered the ability to distribute the information in the yp.com business profile to 65 publishers such as Facebook, Twitter, Google my Business, etc.
The problem
ypPresence was a very popular product amongst new customers. However, we noticed a huge drop in user engagement related to the profile manager (which was part of the ypPresent offering). With the team, we were able to connect that lack of engagement to account cancellations.
I conducted a heuristic analysis of the UI in conjunction with the lead developer and we identify several sources of data that the profile editor was collecting from different legacy systems. This was creating inconsistency of data across profiles. The data structure inconsistency included issues such as phone number structure, address mismatch, hours of operations, etc – In some cases, there were conflicting rules for the same data element, i.e. the text field named "Business History" had a maximum character count of 250 in one section of the profile, and 4,000 in another section.
There were also inconsistent labels to identify the same data point across the profile. The navigation was unclear and at times confusing. Also, the profile manager had unnecessary (or unused) data points that was introducing a form-fatigue effect.
Goals of the project
The goal of the project was to increase the discovery of the profile editor and increase user engagement. The new design was planned for multiple devices (desktop web, mobile web, and native apps).
Research
I worked closely with the lead product manager and back-end lead to identify and define every element. We combed through 200+ fields and normalized the data structure to create a consistent data set and therefore, interface.
Market Research
Many sites offer a profile for small businesses. YP has 35+M profiles in the system, and we were also distributing the same data to 65 different publishers. Our market research focused on publishers that we partnered with to provide similar concepts to our users.
Facebook business profile
Google Maps business profile
Trip Advisor business profile
Yelp business profile
Industry terminology
The market research suggested that many of the terms used in business profiles were resonating more with our customers. This led me to create a glossary of new terms for labels and actions.
Personas
YP hired an external agency to conduct user research holistically to define personas. I used these artifacts as the base for our project to promote empathy within our team.
Interface definitions
As the team lead, I started by defining the presentation layer and the organization of 200+ data points. First was the definition of cards and how the card could and should behave.
The definitions I created included maximum characters per line, number of checkboxes per row in a card, etc. With these UI guidelines, my team and I started building the basic cards that constitute a business profile. All cards and their states had to be responsive.
Testing the card structure
The next step in our process was to test the proposed card structure and verify that cards can support complex forms. We started with a card focused on Hours of Operation. As we were designing the card, we printed the designs and taped them to the wall. We then went through a design analysis to review and add to the basic architecture, i.e. exposing only the most popular fields in empty state and revealing more options as the user is engaging with the UI (progressive disclosure).
Testing the cards on the page
Testing each card helped us understand how cards were responding to the different form types. My team and I started working on page layouts and sequence of cards that conformed a full profile. I worked in parallel with the lead PM to define key business goals around data collection and compared them to previous metrics from existing profiles.
User Testing
User testing was essential throughout the project. The team and I split the test into multiple sessions with internal and external users. I created HTML prototypes to present a more realistic user interface, to measure time to task completion, scalability, and readability of elements on the page.
We tested the same basic principles on iOS and modified the interaction of the card behavior to follow the native mobile idioms.
Results
We monitored our KPIs for the first 4 months very closely to see the level of engagement that the new profile manager was generating. The ROI of the project was extremely high. Here's an example of the engagement results for the photo section of the profile manager: