With over 100 core product offerings and solution capabilities, PayPal has no dearth of products for small and medium businesses (SMB). We have such a diverse portfolio that a merchant can run their business with PayPal; from setting up the checkout button on their website, to generating invoices, to receiving payouts completely online.

On average, an SMB merchant uses several PayPal products on a daily basis after they successfully onboard with us and start using the merchant platform. But for many merchants, the post-onboarding experience wasn’t as seamless as it could have been.

We improved our post-onboarding experience. We made some changes to make it clearer to the customer which PayPal products or offerings are right for their business, and streamlined our documentation. We aim to make it as easy as possible for customers to get up and running with PayPal.

In Commerce Services, we undertook the task to make the merchant experience simple, easy to start, frictionless, seamlessly integrated and personalized.

Our team of awesome engineers and product managers, guided by our engineering leadership, have come up with a simplified and personalized home page experience, revised navigation and a brand new App Center experience with a few curated products to start with under the umbrella of the PayPal Commerce Platform.

How did we make the merchant experience more seamless?

If I backtrack and talk about our legacy dashboard experience, we had a monolith app where any change would take a lot of effort to release because of the complexity involved with tightly coupled UI components and services.

To solve this, we adopted a fragments-based approach popularly known as Micro Frontend Architecture in the Frontend world, in which the UI components on a page/route are independent of each other in terms of team ownership, development and deployment. These components, or fragments,packaged in a node module,are independently published and come with the same base look and feel to keep the overall look and feel of the page consistent. These fragments are stitched together and served through an orchestration service.

Here’s a glimpse of the new homepage where each section or tile is a fragment, namely- Quick Links, Quick Actions, Balance tile, Money In, Money Out, and Setup cards.

These fragments are predominantly React components packaged in a node module but can be built by using any other JS lib (Angular, Vue, etc.) or just vanilla JS, HTML and CSS.

Each of these fragments is owned, developed and maintained by separate teams. If you want to learn more about Micro Frontend at PayPal, here’s a link to our previous post.

From the merchant’s perspective, they see a snappier, personalized, and simplified experience with faster load time and fewer errors as these HTTP requests are parallel and load these chunks independently.

The high-level flow diagram represents the tiers of web communication we have with frontend service being the web UI.

Let’s move on to the App Center and talk about it briefly.

The App Center is a redefined version of the previous “Tools Page” with a new, clean, and modern look and feel. This page constitutes vertically stacked sections that include personalized product recommendations and product grouping by capability, partners, and marketplaces. It has a front-end search feature to help merchants find the right product with a quick text search.

The experience is powered by an internal content management service to serve localized content and images based on the user’s geolocation and is available to both authenticated and anonymous users. Let’s call this service Service B for reference.

With the help of Service B, the app center team was able to replace about 147 old marketing pages with 37 more relevant product detail pages, which resulted in enhanced product discoverability and SEO ranking.

Also, this enabled the team to push the changes live without any code deployment, just by updating certain fields in the Service B UI interface. Now, it takes less than 15 minutes to push these changes live!

Personalized product recommendation is powered by another node service which talks to a recommendation model and qualified business rules to recommend products/apps based on merchant profile, browsing history, and app usage.

In the top navigation panel, we categorized the links and logically placed them under the corresponding parent link where they fit best. We’ve also created some new parent links based on the grouping we needed. For example, “Pay & Get Paid” is a new parent with all the payment-related links under it. This makes it easier for the merchants to see all the links in one place and navigate accordingly. Similarly, we added other new groups:
* Marketing For Growth
* Financing
* App Center

To conclude

This is a broad overview of how we transformed the SMB merchant experience in a matter of few months considering the complexity involved in coordinating across various different engineering teams and their release cycles. The journey started in October 2019 with a small brainstorming session about how to make the merchant experience better, and here we are with 100% ramp with our SMB merchant accounts in the US, UK, France, Italy, Spain and Israel!

A big shout-out to the entire PayPal Commerce Platform engineering team for making this happen! 🙌

Don’t forget to give a 👏 if you like the post and follow me on twitter!