Overview
Square Banking launched in July 2021 to help small businesses manage cash flow alongside the payments they accepted through Square. It brought together checking, automated savings, and business loans. Sellers could immediately access their card-sales proceeds, automatically set aside a percentage of sales, and repay loans through a percentage of daily sales.
The launch built on an established lending business. Through March 31, 2021, Square had facilitated more than $9 billion in small-business and Paycheck Protection Program loans to over 460,000 sellers, according to Square’s launch announcement.
I was a frontend engineer embedded with Square’s Banking and Capital design team. I worked directly with designers to lead the implementation and maintenance of the public websites for Square’s business loan products, and later its banking products.
For the launch, we overhauled those pages with long-form product explanations, scroll-linked animation, and customer stories.
Making the product move
The central interaction was a long-scrolling product demonstration. As visitors moved through the page, the interface animated alongside the story, showing how the banking products worked together.
I used Lottie for the vector animation, ScrollMagic to link animation progress to scrolling, and Anime.js to choreograph elements on the page. The challenge was keeping that choreography responsive and performant across screen sizes.
A carousel with built-in video and podcast players
I built a custom customer-story carousel with integrated video and podcast players. Visitors could browse video testimonials and listen to audio clips within the carousel, with muted video previews playing on hover.
The layout included stacked slides, so the implementation had to account for both media playback and how navigation indicators represented the arrangement of the cards. The carousel brought several different kinds of customer stories into one interactive experience.
Elsewhere on the page, large background video loops transitioned into full-screen playback with audio when clicked.
These interactions lived in custom Svelte components. Contentful gave the team control over page content and component configuration, including entries for scroll-linked animation.