NeighborlyPay

Overview: The NeighborlyPay is an online payment transaction tool for customers. They can review their current and past invoices and make a payment.

My Role: I was responsible for designing the end-to-end experience of a universal payment portal for Neighborly’s core brands, enabling customers to sign in, manage invoices, and make payments.

Goals: The business goal was to boost revenue for Neighborly franchise owners by redesigning the payment portal to streamline payment collection. The customer goal was to offer a seamless platform for timely payments and easy access to past invoices.

We started the project by interviewing customers and franchise owners to understand their experiences with payment processes and online tools. This helped identify their goals, motivations, and pain points with Neighborly and competitor payment systems. I used these insights to create personas that highlighted user types, financial literacy, confidence levels, challenges, and expectations.

After talking to potential users, I developed a journey map to visualize friction points and customer sentiments, providing a clearer picture of their past experiences with our payment processes.

Insights

The interviews and usability studies gave us insights on the following pain-points customers experienced the most:

• Remembering when invoices are due and how much they owe.
• Remembering past statements and services.
• Having to manage a lot of bills and signing into multiple payment portals is annoying and time-consuming.
• Managing multiple properties and the need to review and pay for all invoices on the same platform seamlessly.
• Financial restrictions limits users to pay large amounts all at once.

To redesign and replace the old payment portal with the new NeighborlyPay platform that could significantly improve the home service payment experience.

• Boost User Confidence & Trust:

  By providing users transparent and detailed invoice statements, NeighborlyPay can instill confidence in buyers, resulting in higher conversion rates. Buyers feel more comfortable making a purchase, knowing they had access to comprehensive home services.

• Flexible Payment Plans:

  The platform allows user to pay in portions or for the total price of their home service. This gives them the financial flexibility to pay for what they can afford without feeling stressed about their bills.

• Pay For Multiple Invoices All at Once:
  NeighborlyPay can provide users the ability to pay for multiple bills within the same account and avoid having to sign into other payment sites. This could help customers save time and effort.

Once we had enough data, I created low-fidelity wireframes to test our hypothesis. I experimented with different design variations to determine the most efficient way for users to input their personal information such as their payment information.

Feedback

After I presented these wireframes to my stakeholders I learned we could lower the amount of user clicks by combining the current and past invoices onto a single page instead of separating them into multiple pages. Also, we eliminated the amount of columns within the tables and prioritized the content that was most important to cut down the amount of horizontal scrolling to streamline the experience.

We conducted two unmoderated tests with over 20 participants on userlytics.com to gather feedback. Our goal was to iterate the design until at least 80% of testers successfully completed their tasks. This process led to a restructuring of the information architecture and user flow, improving navigation. For instance, we reduced the number of clicks to make a payment from eight to four by eliminating unnecessary steps and consolidating two invoice pages into one.

"The payment page layout is straightforward and easy to understand, with clear options for paying invoices and viewing payment history."

Synthesis

After we gathered user feedback we sat as a team and synthesized our findings and concluded the following:

• It wasn't clear to some users what the property drop down menu is used for.
• Several users overlooked the service property selector because it was out of their main focal point.
• Providing more detailed information about the services in the invoices could enhance user understanding and confidence.
• The left nav. panel seems unnecessary takes up space.
• Some users found the UI straightforward but dull and visually boring.

In five days we conducted a 15 minute unmoderated A/B test on 30 participants on Userlytics.com to compare two different variations of the Payment Portal. The purpose of this test was to help us determine the most effective and user-friendly homepage.

Users accessed a Figma prototype through an unmoderated session and then answered a series of qualitative questions related to the functionality and usability between the two variations.

Variant A

Insights & Feedback

• Several users mentioned that homepage A felt too cluttered.
• One user said that the white space within the table was too tight, therefore; information could get lost when viewing it quickly.
• Some users were confused about the property selector and suggested it might be easier if the content were laid out as chips as opposed to a dropdown.
• Several users said they liked the pagination displaying the total invoices available.

Variant B

Insights & Feedback

• The majority of users preferred the look of variation B over A because of it's more modern, cleaner, and attractive UI.
• Users stated that it appears more organized which makes it easier to find information and complete tasks.
• Several users preferred the property buttons laid out (chips) than the dropdown because they found  it easier to find on the page.
• Users also felt more confident using variation B when making a transaction because they felt it appeared safer and secured than variation A.
• However, some users felt the extra colors were distracting and found it slightly more difficult to locate the pay now CTA.

Recommendations & Next Steps

• Proceed with adopting Variant B as the main design for the NeighborlyPay homepage leveraging its clear organizational structure and modern aesthetics.
• Consider refining specific elements of the updated UI to retain some of the simplicity users appreciated in Variant A, ensuring an enhanced user experience.
• Conduct additional usability tests to further validate these findings.

After extensive testing and monitoring user behavior, the updated NeighborlyPay website now offers a more user-friendly experience for viewing past invoices and making payments. Data revealed that over 90% of first-time users found NeighborlyPay easy to use and felt confident making payments online.

The project was well-received by the Product and Senior Leadership teams, who approved it for production. It is currently being developed by our Dev team and is scheduled to launch in 2025.