Company
Square
Year
2018
Type
Design System
UX
Square Content Modules
In 2018, Square used its migration onto new content management system, Contentful, as an opportunity to redesign its public web pages. I joined the ranks of the talented team of designers, engineers, and product managers who would ensure a seamless transition for this massive effort.
Role
Engineers and interaction/product designers are often on opposite sides of the line when deciding how to structure web and mobile experiences. In this project, I led product and interaction designers in developing viable designs for public web and mobile that would be delivered to engineers in a code-compatible way. I partnered with Production Designer, Claudia Ng, to, in essence, create a better user experience for the user experience designers, streamlining web components and devising a grab-and-go system in which designers can simply fill placeholders with unique content (e.g. text, photos, and Square’s icons) within a layout-constrained page. By discreetly composing a framework for designers that mimics the syntax and structure of a set of code, I was able to ensure feasibility and design consistency for the new Square environment.
The Challenge
Square’s original web pages matched the needs of the small and scrappy, plug-and-go, card swipe start-up that the company started its journey as. However, as Square began to flex its wings as the capital-lending, food courier-integrated, culture-shifting fin-tech institution that had become, it’s customer-facing elements needed to reflect that maturity in tandem. While interface designers worked to create the actual feel of the new virtual space, I was faced with how to systematize their aesthetic so that other designers could reproduce similar work in highly varying contexts.
Defining Goals
In creating a system that would methodize the large-scale project for designers and engineers, I had to be very aware of its obligations. The system had to be:
dextrous - as to account for as much design variation as possible
astute - in order to assess not only how designers needed the tool to function in current circumstances, but also predict future needs
precise - so that engineers could digest and churn out organized web pages without making costly, publicly disruptive interpretation mistakes
The Approach
I based the foundation for my work on Invision’s auto-layout feature. With this, I was able to first implement a standard for margins and padding for multiple breakpoints based our engineers’ standards. These standards would be then pre-applied throughout the project.
A set width and variable height for 2-column vs. 3-column layouts were employed, as well as a set ratio for icons. Designers can move around individual items that are “stacked”, and they instantaneously reposition themselves based on my predetermined guidelines.
Another important step was specifying a standard for treatment of content-width vs. full-width images.
With all of these circumscriptions in place, I could then create a library of content blocks that were ready to use in any page layout. Designers were now able to simply take a prefabricated section and place it into their “working page”. When adding a section, the feature automatically shifts all other segments of the layout down and pads the block appropriately. The result would be an entire webpage rendering that was defined by the conventions of a programming language (HTML, CSS, JavaScript), easily exportable and ready to make live.
Component Library: Breakpoints
When viewing the website on different screen sizes (mobile vs. tablet vs. laptop, etc.), it’s nearly impossible to make provisions for every available device size out there. So, following mastermind Jenny Michelfelder’s grid, we broke up the sizing into 6 “breakpoints”, or sizes at which the content layout changes dramatically to fit a particular screen width. In the images below, the pink rectangles represent the area that is required for full bleed images, but could be cropped off within each breakpoint. The white area represents the horizontal dimension at which the site jumps to the next breakpoint. The grey areas represent the content columns; content does not ever exceed the total of this width. The first 3 break points use our Extra-Large set of typefaces, while the last three use our Small set.
Component Library: Type, Color, and Icons
Typography
Again, the type scales accordingly to our breakpoints. We use two sizes, Base-Small and Medium-Extra Large. We distinguish between Hero and H1 sizes, with Hero being just 6 pts bigger. In the first photo below, text size and line height are denoted on the left side in grey. Text size is the first number and line height is the second. The photo shows the basic instances (left, black) for each text style. The following photo lays out all use cases.
Type Exemplified
Type Options Full Range
Colors
In the Square ecosystem, we use 9 core color families and 8 distinct greys. Each color family is assigned to a product so that each product feels like a unique sub-brand, i.e. green for Capital and Payroll. Buttons were chosen as a sample element in the guides below to give designers a nuanced snapshot of what their designs will look like in states like hover vs. static, and on monochromatic vs. grey backgrounds. Meanwhile, for the sake of congruence, the guide provides important details about which color family each Square product belongs to, as well as individual hex codes.
Greys were transformed from arbitrary yellow and cyan tinged neutrals to a congruent set of slightly blue hued greys.
We’ve provided designers with examples on how colors will interact in different color contexts using different elements. This serves as a reference for how a new product page might be laid out.
Icons
In true “Square” fashion, all of the icons are based on square dimensions. All icon dimensions - however awkward must fit inside an equal ratio-ed frame. New icons are actually created for every other breakpoint, in order to comply with strict brand guidelines concerning line width and shape fill. I didn’t include icons in the components section, as they are constantly being updated by our team illustrators. Instead, I directed all designers to our internal wiki which holds the most up-to-date icon versions. They download the most compressed version possible and are instructed to scale - rather than resize - the icons up until a certain point. Here are just a few examples of the collection of 200+ icons in stock.
Component Library: Photo
The photo section is the start of the grabbable elements with set widths that designers can place into their working layouts. In Square’s previous interface system, a photo would simply crop horizontally for desktop, laptop, and mobile sizes (breakpoints 1680px - 1023px). It was at the 717px breakpoint, that the photo would finally reset itself, beginning the inward crop process again for small tablets and mobile screens (breakpoints 717px - 374px). This made photos with an uncentered focal point difficult to design with, and so team members would often have to create time consuming custom-centered photos for each photo within each layout within each breakpoint. To eliminate that costly process, we created a new system in which each entire photo naturally downsizes with the diminishing breakpoints. At 717px, the photo gets a boost in height to keep the same full screen impression that wider dimensions give. This works for both page-width and content-width photos.
Old Photo Sizing
New Photo Sizing
Heroes
We delineated specific treatment of hero images, because as the customer’s first introduction to a Square product, they are important to get right. The menu bar, headline, and CTA button are preset so that the designer is able to swiftly swap out the hero image and place the collection onto their page. No more worrying about finding the right sized logo, or having an inconsistent menu bar height on landing pages.
Component Library: Text Sectionals
There are many variations of text, image, color blocks, and icons that Square’s website uses. Taking into account as many variations as I could, I indexed the main layouts, leaving it to the designers to play around with details such as which column the image actually goes in, or left vs. center text alignment. Here, designs show the essence of how text reacts to margin changes, so only major breakpoints are included.
Headlines
Headlines are multi-faceted; they can be paired with paragraph text, links, and buttons to call attention to a notable feature. At 1680px and 1023px, only the margins change. However, at 479px, all text downsizes. Buttons stay consistent throughout. When designers grab these components, they simply resize the artboard. Content automatically stays centered and with a steady line height.
Lateral Image-Paragraph Pairing
Though these image + photo combinations always stay left-aligned, designers can choose whether to have their images on the right side, on the left side, or switch off. At the 479px breakpoint, combinations transform into a 1-column module.
Checklists
Checklists have special spacing, as well as alignment for the checkmarks. They are often accompanied by a descriptive paragraph. Similar to above, the checklist comes together in one column for mobile devices at 479px and smaller.
Icon Paragraphs
Often, a combination of an icon and a text body will be used to lay out a value proposition in an eyecatching and easy to understand way. Spacing between each paragraph is constant in 2-, 3-, and 4- column paragraphs, but paragraph behaviors are modified so that the icons never have to resize.
Two-Columns
Three-Columns
Four-Columns
Component Library: Special Features
Every webpage needs a standout element, and that’s where special components come in. Sometimes Square will compare products via interactive means, where customers can actually personalize options and see what’s best for their business. In these cases, elements typically act differently every other breakpoint.
Toggle
With this feature, visitors can compare two distinct products that are often used with that particular merchant category. 2 colors associated with each product are used to highlight one product at a time. The color of the content block below switches with the product as well. Designers are able to include this element in their layouts with just the first toggle in “active” mode, but they must note the color of the second block before handing off the design.
Pricing
With the different font sizes, thicknesses, and kearning, pricing blocks were a must-have in the component library. The notable layout shift comes at 1023px in this feature, where pricing blocks become a singular column and remain that way throughout the smaller screen sizes.
Feature Comparison Table
An amalgamation of the previous two components, the feature comparison table shows customers exactly what they’re getting with each product option they’re considering, along with the price tag. As complex as the table is to build, this prestructured chart fits seamlessly into any page scheme. Editing for other breakpoints is as simple as resizing the margins.
The System at Work
Conclusion
Upon viewing the scope of the project, I was able to identify a place of discontinuity in our team’s workflow, and thus create a collective system that would methodize key components of the design process. In a prolific and efficient way, we are bringing Square’s mobile and web identity to life.