At Squarespace I designed layout systems that gave people new ways to express themselves online.

20190395.png
20.png
22.png
27.png
34.png
74.png
8.png
21.png
20190349.png
11.png
29.png
20190370.png
20190372.png
20190393.png
20190406.png
20190428.png
20190454.png
20190456.png
20190351.png
20190394.png

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ JAN ‘18—SEPT ‘22. Over my years at Squarespace, across many roles, I grew into a design leader and eventually created the Character Team — a small, design-led group focused on elevating Squarespace’s reputation as the most design-forward website builder through features that enabled self-expression. Much of our work centered on defining layout types around user needs and designing UI that made it simple for anyone to fine-tune how elements fit together.

layout-story.gif

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ At the heart of Character was the idea of expressibility. Expressibility can be defined as the richness of our layout system, which involved creating a foundation that could scale into multitudes of different options, enabling our users to express themselves beyond simple intentions.

[E.G. A SIMPLE LIST]

list-simple.png

[ITS VARIANTS]

list-1png
list-2.png
list-3.png
list-more.gif

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ The goal of these layout systems was to accurately represent the breadth of each layout type. It was an exercise of putting together all aspects of a layout in a cohesive way where elements could be combined and rearranged to create different ready-to-use layout configurations for template starting points.

[E.G. LAYOUT SWITCHER]

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ All these styling options that allowed these layouts to come to life (font pairings, color palettes, etc.) were then tested and packaged to live inside the product as design features. My job in particular was to curate these offerings and later to identify the right controls to surface in the editor.

font-pairings.png
color-roles.gif
styling-options.png

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ By nature, these initial starting points covered common use cases, but by focusing on what types of information different user groups needed, we came up with a wide range of expressibility features that allowed for even more creative expression in the way they went around to display information.

[E.G. EXPRESSIBILITY IN TEXT-DRIVEN LAYOUTS]

text-1.png
text-2.gif
text-3.png

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ These expressibility features came from actively researching the web and investigating new technologies. Once the features were applied to specific layout types, they were explored further to address additional user needs and aesthetic or interaction driven user desires.

[E.G. TEXT-DRIVEN LAYOUTS + MEDIA]

text&img-1.gif
text&img-2gif
text&img-3

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ These explorations helped steer the product in two ways. ONE they informed which existing layout structures or style options to improve, which provided insights into what to solve for from a design point of view.

[SUCH AS ANIMATIONS]

animation.gif

[OR SITE LEVEL IMPROVEMENTS LIKE HEADER STYLES]

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ TWO they led to new fun and interesting product initiatives for our team to explore. Many of these evolved into features that offered users interactive layout and styling options, giving users dynamic ways to communicate information (like marketing initiatives, promotions, or hero banners) on their sites.

[SUCH AS BACKGROUND ART]

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ I used the Background Art feature in this section to show the kinds of expressive tools I helped bring to life at Squarespace. It’s all native to the platform (no custom code). Just a playful, powerful system powered by a simple UI. With just a few clicks, anyone can layer shapes, patterns, and colors to create rich, dynamic backgrounds right inside the section editor.

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ All this work came down to accounting for the many ways a user might want to display or organize their content, and it was much more than being a good web designer. It involved setting clear rules and legislating millions of edge cases — all while making sure the underlying system continued to work with the variations that were added or removed.

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ Years later, the Character team is still going strong at Squarespace, and I’m proud to have started something that still carries forward the principles we set in motion, and keeps pushing on how every element on a page can work together to create something unique.