Commerce Healthcare Site Redesign

‍

Role:
Lead UX Designer

‍

Overview:
I redesigned the landing page for Commerce Bank’s Healthcare Financing Services, and made it easier for new and existing customers to find exactly what they need.

‍

The Challenge

Commerce Bank’s Healthcare Services Financing offers financing plans to manage expensive hospital bills. However, their main site was confusing for new customers trying to enroll in the financing plans and existing customers attempting to pay bills. The goal was to redesign the website to effortlessly guide both new and existing customers to exactly where they needed to be.

‍

Key Objectives

1. Help new users interested in the bank’s financing programs learn and understand which one was right for them quickly and easily.  

2. Streamline the page layout for existing users to pay their bills promptly.

Discovery

Why was a redesign needed?

• Cluttered Layout
  ‍‍All the features were crammed onto a single page, causing confusion for all users to find what they needed.
• ‍Call to Action Overload
  In particular, two primary actions - ”Make a Payment” and “Manage Your Account” - were equally emphasized. However, user research indicated that nearly all existing users just wanted to make a payment. ‍
• Long and Unhelpful Copy
• Confusing Financing Options
  ‍New users struggled to distinguish which financing option was the correct choice for them. The redundant “Read More” sections for both financing plans only added confusion instead of clarity as the text for both was nearly identical.

Wireframes

The initial wireframes centered around separating the two user types into distinct tabs. These early designs effectively addressed several issues:

• Streamlined content and calls to action
  Users would only see content tailored to their needs in their respective tabs.
• Emphasized the “Make a Payment” button
  Because the significant majority of site visitors were existing customers seeking to make payments, their tab became the default tab and the "Make a Payment" button was heavily emphasized.‍
• Simplified text
  In particular, I condensed the explanation text for the two financing services, and highlighted their differences in a bulleted list.
• Focused on friendly verbiage
  Recognizing that users might be stressed due to managing costly hospital bills, I prioritized a welcoming site atmosphere. This is evident in the text at the top of the page, featuring phrases like "Welcome Back" and "Need to enroll?".

High Fidelity Designs

After meeting essential business requirements, the high-fidelity designs prioritized strict adherence to brand guidelines and transforming the interface into a much more inviting experience.

• Enhanced Tab Separation
  I used bright contrasting colors and a distinctive triangle indicator on the active tab.

• Emphasized white space 

  This helped foster a welcoming atmosphere, while also helping make individual elements stand out.
• Copy became friendlier but still streamlined
• For existing customers:

  The page more prominently highlighted their primary call to action.
• For new users:

  We streamlined the shared explanation text, incorporating illustrative icons. This allowed us to emphasize unique features through a bulleted list, with key differences boldly highlighted.

User Testing

Collaborating with the User Research team, we conducted tests involving 16 individuals, evenly split between returning and prospective customers. The objective was to assess how effectively users could navigate the page for their specific tasks. Both customer types successfully and easily completed their respective tasks, showcasing the strong usability of the designed interface.

Only two tasks fell below an 80% success rate, attributed to content confusion rather than design issues. The design only needed minor text edits before being handed off to the developers.

‍

Conclusion

I was delighted with the design and the positive outcomes from user testing. The redesigned version is now live, and you can experience it firsthand here. You can also compare the before-and-after versions below.