Historically, the front-end form merchants used to provide data for the underwriting process during onboarding varied slightly country-to-country and was fragmented across multiple rails applications. For enterprise merchants who operate globally, providing data to us was unnecessarily confusing and painful. Additionally, updating the form with new capabilities or global changes was painful, error-prone, and slow. Doing anything required multiple implementations in different code bases — including basic changes, like updating text in emails.
The new application form consolidates all regions (except for a few) into a single React front-end that accepts instructions tailored to each country to tell it what data to collect, how to collect it, and when. The form’s design was given a significant overhaul to improve information architecture, add contextual information to guide merchants through the process, and update the visual design to frame it.
To round everything out, we also updated email notifications sent to customers during this part of onboarding. We gave emails a fresh visual design and consolidated them into SendGrid to be easily managed by designers and product managers, while the apps now only needed to trigger a deployment.
Flexible Form Components
Flexibility was the key to successfully handle the various combinations of capabilities required to support multiple countries and deliver a unified front-end for the application form. To meet this goal, we created a library of small, atomic components that could be mix-n-matched to meet the needs of any possible configuration given to the form.
This library also contributed back to the global design toolkit for Braintree, the preferred payment service for PayPal enterprise merchants.
Email designed for clarity and collaboration.
An updated visual design of the email brought some much-needed hierarchy to the messaging delivered to merchants. However, the most significant impact came from moving all email communication templates to the SendGrid platform.
This change enabled engineers to be solely concerned about core data sent to the template, such as business or customer name. At the same time, non-engineers on the team could now easily update content on their own without requiring a production deploy.