Square

Responsive frontend development + animations for product marketing pages

As a design technologist at Square, I was a frontend developer who sat among designers, responsible for writing custom styles on squareup.com that deviate from Market, Square’s design system for public webpages. These custom styles included responsive flex/grid layouts, animations, and interactive Svelte components.


Virtual Terminal

Usually custom styles were limited to 1-2 sections per page, but Virtual Terminal had custom styles in almost every section—the most out of any Square webpage I worked on.

Several of the sections mainly relied on CSS grid layouts:

  1. side-scrolling modals

    In the section showcasing how to use Virtual Terminal on different platforms, I laid out both the tiles that open the modals, and the columns of images/copy inside each modal, with CSS grids.

    For these particular modals, I extended Market’s modal component to redirect vertical scrolling into horizontal scrolling, with a progress indicator.

  2. feature modals

  3. pricing section

comparison table with highlighted column

The design of this table called for highlighting the Virtual Terminal column in blue and giving it rounded corners. While CSS grid provides simple methods for that, the fact the table was rendered from Markdown meant that this was a case best suited for a plain old HTML table. I wrote a reusable SCSS mixin to highlight a table column, that takes a column number as a parameter. A fun little challenge in writing the mixin was that our default table styles included borders.

Table showing Square Virtual Terminal's offerings highlighted, compared to other payment processors and banks. $0 monthly fee, no monthly contracts, free sales reports and insights, and free customer engagement tools.

To keep the translation/localization process simple, we generally wanted to author webpages’ copy in Markdown as much as possible. I came up with a way to structure the CMS content so that we could maintain that authoring experience for the table shown on mobile devices, by nesting separate Markdown tables in a Market tabbed content section. At the same time, we could also continue to leverage Market’s existing components instead of creating a custom component.

fading in content

I set up an IntersectionObserver to fade in pieces of copy as the user scrolls down the page.


Seller stories

I wrote reusable CSS utilities for testimonials / case studies from Square sellers, and applied them to pages in multiple locales:

I implemented responsive styles for just about every section on these pages as well, although it wasn’t as heavy a lift as Virtual Terminal. The new reusable CSS I wrote includes:

My favorite piece was the component below, which places quoted text with a solid white background in the corner of an image. I used CSS trickery including radial gradients, clipping masks, and custom properties to create a silhouette with smooth rounded corners that change size with the user’s viewport.

Displaying the quote text as HTML elements (instead of embedding it in each image) kept the text accessible and responsive, and saved production designers from having to do extra work.

Quote component from Artybaker seller story page (tablet screen size), with text in the upper right corner and a large border radius Quote component from Mito seller story page (small desktop screen size), with text in the lower right corner and a small border radius

Marketing

I created a custom Svelte component to animate in the presence of example UI elements on top of this page’s hero image.

The original animations both fade in and slide upward, which might cause discomfort for people with vestibular disorders. To help make the animation more accessible, its behavior changes to a simple fade-in if the user’s settings prefer reduced motion.


These are just a few examples of frontend development I did at Square.

In addition, some work outside of my job description that I led:

I enjoy making improvements to developer experience just as much as building frontends. If you have a need for any of the above on your engineering team, let’s chat!

More projects