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.

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:

• English (US)
• Spanish (US)
• English (Great Britain)
• English (Ireland)
• Spanish (Spain)
• Catalan

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:

• numerical statistics at the top of Soho Live
• text layout in all 5 seller stories, with body copy on the left accompanied by large quote callouts on the right
• carousel in Artybaker/Mito that shows a landscape image next to a square image

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. It also saved production designers from having to do the extra work of creating duplicate images with rounded corners for every locale and screen breakpoint—not to mention having to recreate said images every time the copy needs updating!

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:

• rewriting an HTML email build system to be 70x faster and more extensible
• automating file uploads to be 60x faster than the manual process that had been in place for years
• documenting a third-party WYSIWYG editor to empower production designers and product marketing managers to build simple HTML pages themselves, offloading that high volume work from engineers

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!