PSP Pay
PSPinc external web app for customers to manage payments for their accounts as well as purchasing new domains.
Project Type
B2C | Enterprise Web Application
Project Dates
January 2017 – June 2017
Goal
To redesign Single Sign On into PSPinc's new payment system for customers and come up with a new platform name and logo. Internal goals were to work with billing, sales, and marketing departments to help alleviate some tasks and improve their workflow.
Problem
- Non-responsive site with difficult readability and flow
- Difficult to use payment system and lack of choices for paying
- Difficult to use domain purchasing system
- Outdated logo
- Missing information for invoices
- Non-responsive and difficult to read email templates
Solution
- Ran user tests by creating low-quality prototypes to test ux practices for the bill pay and domain purchase processes.
- Improved the overall look and feel and made it responsive for better mobile account management
- Lighten the color scheme slightly for a more inviting design and changed fonts to Roboto for better readability
- Incorporated a payment system offering users two choices to pay bills with credit card or PayPal
- Improved the domain purchase and transfer process Redesigned all emails sent to customers
- Improved layout for invoices both on customer side and for PSPinc billing department
- Japanese offered as an additional site language
- User research and interviews
- User interface designer and developer
- Email designer and developer
- Screen flows
- Wireframing
- Design proofs
- Sitemap creation
- Logo design
- Interaction design
- PDF invoice design
Technologies Used
HTML, CSS, JavaScript, jQuery, cakePHP, Adobe Photoshop and Illustrator, PO and MO Language Files, Microsoft Word for content management
Previous Dashboard Design
Previous dashboard design felt claustrophobic and not something that was easy to read or use. There needed to be a quick access page after login that gave PSPinc customers the ability to get where they needed to as efficiently as possible. Consolidating pages was a good next step: domains and services, billing, and contact all could be consolidated better.
Dashboard Wireframe
Working with customer responses from surveys, I made a new layout that gave a quick access dashboard to important areas of the site. Customers previously disliked not having a dashboard they were used to seeing from other PSPinc products, they also wanted notifications for account notifications to be much clearer.
Redesigned Dashboard
Final design gives visual aids with icons to quickly access billing and domain sections. Having buttons instead of text and links in the alerts gave immediate focus after logging in as to what the alert was and made it more clickable. Feedback received after the release was positive with a reduction in missed payments.
Previous Domain Purchase – Step 1
Searching for a new domain to purchase was clunky and not very appealing. Whitespace wasn't utilized well and searching domains took quite a long time with customers calling PSPinc to purchase a domain which isn't the most effective way.
Previous Domain Purchase – Step 2
Each domain allowed for additional add-on's like SSL, email hosting, and Whois ID Protection, as well as choosing/adding plans. This design was more of an anti-pattern with so much information overwhelming users.
Previous Domain Purchase – Step 3
Duplicated content and awkward layout with the third step didn't were the big concerns for this page.
Domain Purchase – Step 1 Wireframe
Meetings with the sales department were held, I would ask them questions about what they like and don't like with the system as well as what they would like to see added with the domain buying process in general.
Domain Purchase – Step 2 Wireframe
Interviews held again with the sales department I was able to create a design that listed all plans in a very readable way while future proofing the design when PSPinc added new plans.
Domain Purchase – Step 3 Wireframe
I moved the user agreement to the bottom and added the SSL add-on form section under the cart. Previous design involved a clunky hide and show form that activated when a checkbox was ticked.
Domain Purchase – Step 1 Mockup
Adding "Your Domain" and "Your Plan" gave users easy access for information related to their purchase. Changing the steps above the search bar from images to markup allowed for a better mobile experience.
Domain Purchase – Step 2 Mockup
Cleaning up the layout and establishing a hierarchy proved well with an increase in new plan domain purchases and with the add-on's.
Domain Purchase – Step 3 Mockup
The final layout worked well with the established flow, allowing users to easily see what their total cart was and a detailed list.
Domain Purchase – Step 4 Mockup
The "Pay Now" button redirected the user to a page to fill out a credit card form or by choosing the PayPal option by clicking their icon. To improve the PayPal experience I worked with a programmer to allow the PayPal payment option to display in a modal window instead of a new tab.
Previous Domain Summary
The page lists all purchased domains and/or add-on's and needed to be consolidated. If a customer had 10 domains they would have to be redirected to another page to view the info.
Domain Summary Wireframe
Consolidating the domains and services into one page helped remove clicks for customers. I ran tests with employees from certain departments not associated with this platform as a means to test the design. A prototype was made in Adobe XD to allow employees to get an idea for the new layout, valuable feedback like a better way to hide the domain details was provided and ultimately implemented.
Previous Billing
The table here was very thorough, but the customer didn't need some information like closed or the ID, that content was moved inside a detailed PDF invoice. Consolidating "My Bills" and "Billing History" into one page, again, was a smart move.
Billing Wireframe
I turned billing history into a table where customers could click to view their PDF in a modal window; this invoice design was also the same one PSP Billing department sees as well as the invoice emails PSP sends to customers, I conducted design pattern tests with billing department employees to nail down an easy to read invoice.
Billing with Current Bills Mockup
The final design allowed for more room and using a card style design approach broke up multiple bills into an easy to glance at section. I suggested the "Download All" button into the design for customers who needed an Excel sheet type of file for their records.
Billing Compete Payment Mockup
Prototypes were made and given to the sales department as a way to test the ux patterns. That department handled all client accounts and knew PSPinc employees well to know downsides they were experiencing with the old system. The final credit card payment allowed PSPinc customers to pay bills on their own without the need of involving PSP employees. This helped the sales department significantly in reducing the amount of time spent handling customer accounts and allowed them to focus on higher priority tasks.
