Payment Portal

Date

October 2018

Client

Gather

Skills

Gather's Event Portal was a widely used B2B2C feature for venues and their guests to handle proposals and payments. The event venue would work up a proposal with menus, food & beverage minimums and rental charges within Gather's product and share those with the guest on the Event Portal. Once all parties were in agreement on the specifics, it was also where the guest signed their proposal and paid their deposit.

This page was a well known source of support calls from clients whose customers were stuck not knowing what they were supposed to do once the Portal link had been shared with them. It was a confusing page of numbers, links and industry terms that a user just wanting to throw their parents an anniversary party may not be familiar with.

PERSONA: a non-technical user planning an event through a restaurant or venue

Project Details

Goal To improve the guest experience, alleviate client frustration and reduce calls to the support team

Through a series of user sessions with existing Gather clients familiar with the portal, it was determined that the single biggest stumbling block using the existing design was that their guests were unsure what was required of them. What action did they need to take and how did they go about doing it?

‍

The process

Here is more detail in each of the improvements we made to the Portal seen in the image above:

By this point in the process, the user has already selected the venue, there's no need to sway them with a splashy marketing photo. I chose to bring more of the event summary and financial info higher on the page.
This user also had no interaction with Gather as a company, this is white-labeled SaSS so making Gather's logo so prominent on the page only caused confusion to the end user. "I'm being asked to pay some company I've never heard of thousands of dollars? Is this spam?"
The foremost issue that came up in our research time and time again was that the end user never saw the call to action. With the combined issues of a pale blue color that didn’t draw the user’s attention, visually looking like a dismissible toast notification and the placement above a hero image had the effect of the user simply not seeing the banner at all. Every time we presented this layout to a user, they would immediately scroll past the message and be stuck.
My solution was to make the CTA much more prominent and pulled out from the rest of the info on the screen.
The Event Summary was vitally crucial information to get correct. If a user glossed over the small summary and confirmed their event for the wrong date, no party involved will be happy with the outcome. I chose to put it directly at the top of the content and display it in an almost sentence structure that would be easily understood by novice users.
The primary CTA color could be configured with the white-label settings, which could make for a confusing mix of colors on the page. I chose to not only reduce the color palette, but restrict the link color to dark blue, which was more familiar to the majority of users.
For people looking for a more detailed breakdown of the event, not one of the users thought to click on the link labeled "View Print Summary". A simple change was just changing the label to read "View detailed summary", which showed catering package options, associated pricing and a complete listing of charges.
I did some research to see how financial charges were typically presented. Some simple indenting and bolding help give the financials much needed hierarchy.
At this point in the workflow, the customer is required to make a payment to the venue. I highlighted the outstanding balance and gave the user the option of paying one or both installments.
As a standard practice of designing, I try to make certain that color combinations meet WCAG AA contrast standards.

‍

Takeaways

The existing design utilized a banner message for the guest's call-to-action with a narrow row at the top of the page. While items at the very top of the page should logically fall into the F-pattern of a user’s scan of the page, this row seemed to be invisible to many users. We observed a number of users interact with the page and saw most gloss over the CTA like it wasn't there. When asked, they simply didn't see it and assumed the hero image was the beginning of the content.I determined that the pale blue background color of the row visually blurred into the chrome of the web browser. In addition, the blue used for the text link did not meet AA contrast standards. Therefore, my first goal was to make the primary call-to-action much more obvious to the user.By this stage of the event booking process, the user has already selected the location for their event, so a large hero image only served to push useful information further down the page. There were numerous line items in the charges section with no visual hierarchy to group them. This led to confusion from some users as to what they were being asked to pay for. An ambiguously labeled link hid a useful detailed financial walk-down of the event.‍

‍