Fee Page with PayPal Integration
My Role: Lead UI Design, Research, Information Architecture
The Product
PrimeLending has a consumer web application that serves as a way of obtaining client information as well as allowing the user to perform certain tasks after submitting their application. Current functionality tasks included checking their loan status, uploading and receiving documents, and writing messages to their loan officer.
App Users: Consumers applying for a mortgage loan residing in the United States
Main User Goal: Start a loan application for a mortgage
Additional User Goals: Track loan status, upload & download documents, and message loan officer
The Business Need
The business needed a feature enhancement for clients to be able to pay their mortgage fees before their loan goes to close. This project included integration with PayPal's API to process the transaction. My job was to create an easy-to-use interface for clients to add the certain fees that they wanted to pay, provide a review cart screen, and show the proper progress after fees were processed.
Main Project Goal: Create an intuitive interface for consumers to pay mortgage fees before their loan closes.
The Research
I first researched industry-wide to see what other successful e-commerce companies use for their interfaces. Secondly, I looked for UX best practices for creating checkout experiences. Once I had a good idea of what conventions would make a successful payment process I began designing the basic wireframes.
The Wireframe User Flow
The basic design started with the main outline of a post-submission page with the title at the top. The individual fees needed to be displayed separately so the user can select whichever one they needed to pay. There was also a select all toggle that would turn on or off all of the fees.
The default state would have all of the fees available to be paid. After the user selects which fees to pay, they would need to be brought to a cart review page before entering the PayPal iFrame page. When the user successfully completes the transaction through PayPal they will be brought back to the default state of the page where unpaid fees will still show, but paid fees will be disabled and grayed out. If no fees are available to be paid, then a message will simply say "No fees are due."
The High-Fidelity Mockup & Presenting the Design
Once I shared the user flow with the team of product analysts, developers, and QA members we brainstormed some must-haves for the design. First, the addition of help text would be essential for clarity on the certain fees that the clients would need to pay. Secondly, we would need to give a visual cue to the user that the connection for payment is safe and secure. This was solved with a lock icon and verbiage assuring the user that this was a safe action for them to take.
Verifying The Design With Prototyping & Usability Tests
After receiving team feedback, I reiterated the design to incorporate the team's ideas. I was then ready to see what the users had to say so I built a prototype with Invision and started planning UX research. I prepared and completed 7 qualitative research tests with UserTesting.com. The tests confirmed that the interface was intuitive and easy to use.
The Design Handoff & Implementation
When it came time for the developers to code this feature, I shared my design documentation for them to reference that had specifics on components, colors, spacing, font sizes, etc. I made sure to be available for any questions that the developers or product analysts had during the coding phase.
There was one scenario that came up that we did not anticipate. We needed a quick fix for the state when a user had successfully completed the PayPal transaction, but the information was not ready to be processed yet on our side when the user came back to the Fees page. I was able to work with the team to create a refresh icon and verbiage letting the user know that our system is still processing the transaction information. This was not a high-use case, but an important piece for the success of the feature enhancement.
What I Learned
From this last-minute fix, I learned to anticipate states when the systems do not have the information needed to properly display the intended data. Situations where the third-party server is down or when the company system is taking longer than expected to process information are states that I have incorporated in my future project designs.
The Result
In the end, the executive leadership team celebrated with our team and the rest of the company because this was a big win for our users. One loan officer commented that one of their users was impressed by being able to pay their mortgage fees ahead of time easily before their loan closed.