A marketing video I created for the launch of Squarespace 7. Created with Screenflow and After Effects.


 

A New Squarespace

I'm so proud to get to share with you a project that took collectively thousands of hours and an entire company worth of people. Squarespace 7 is a ground-up re-imagning of the Squarespace user experience designed to make the power of creating your own space on the web simple and intuitive through the use of context, clarity, and a new visual language. The result was called a "UX Dream" by Wired and ended up on their most inspiring designs of 2014. Adweek called the new interface "Redical... a revalation", and we were awarded a 2015 Webby for best Aesthetic. My role helping concieve and shape the new visual language in our interface, orgnizing the user experience, and assisting with the marketing of it to the public.

 
 
 
 

Visual Language

Our team took the learnings from mobile and brought them back to our web interface. Creating new rules and constraints for ourselves to help define a new visual language that was silent. An interface that appears when you need it, and lets your content shine above all else. After a long audit of our existing systems, we paired down dozens of headline, body, button and layout styles, into a clear, concise and consistent interface that feels more obvious than superfluous.

 
 
 
 

Seeking Clarity

In addition to a whole new visual language, and a fresh editing paradigm, we re-structured the foundations of the system with a new informations architecture that made it easier to find the things people care about throughout the system, as well as a new library of iconography to draw from with icons that could have not only a modern feel that matched what we were going for on mobile, but have distinct meaning and not share definitions with other functions in the system.

 
 
 
 

A Helping Hand

Since we launched Squarespace, we've been improving the system iteratively. Take the onboarding process for example, I got to enjoy working on a more intuitive process for users building website. With small prompts at key moments, like the one below. It's nice to see what seizing small, but impactful moments can do to affect user behavior.

 
  This gif arrives the first time someone goes to add content to a page on their website.

 

This gif arrives the first time someone goes to add content to a page on their website.

 
 

Iteration and Refinement

Here's a look at a never before seen set of screens I made to pitch ideas on how to refine existing blocks within the Squarespace editor. some of these contain new functionality, while others were a cleaning and reorganization of existing information in the editor.

 
 
 

A more Secure Web

While I have mixed thoughts and feelings about the complexity introduced by things like two-factor authentication, it's one of the more secure ways to protect your personal information. When Squarespace tapped me to work on a two factor authentication experience, I tried things like separating the digits into individual boxes and showing things large  What you're looking at here is some iterations on the general wizard layouts, the sliced devices for production, and the approved layout with the rest of the flow built to match it's style.

 

 
 
 

Getty'up

Squarespace features an integration with Getty Images, one of the worlds largest stock photo websites. Below are some experiments of updating what was the existing design to both come closer in line to the template language that was developed before this project began, and to do things like group images together in order to suggest and surface examples someone may not have thought to search for.

 
 
 

The Ten Foot Experience

Inspired by television user experiences, the Squarespace checkout flows were referred to as a ten-foot experience by myself and others on the design team. It aimed to eliminate the multi box and window cuff that can sometimes distract with modals or side panels, in favor of a strong carry through a process to fill out a form, make basic buying decisions, and convert. Below is a Google Apps integration checkout designed in the ten-foot experience, as well as a Squarespace checkout screen where we had to adapt what we had for i18n (internationalization).

 

 
 
 

Read my lips, no new taxes.

Below is a look at a flow for creating taxes for Squarespace Commerce customers. This project was an interesting delve into the tax codes of the US and beyond, where I learned about the different rates that could apply to different goods and services, and the concept of a tax "nexus". But that's enough dry accounting for anyone to swallow, so I tried to make a flow that used more human terms like location, and goods. That thanks to a modern integration would let taxes be set up automatically for any small business owner who wanted to charge tax online. What you may notice here, is that the Squarespace style was so versatile and simple, that often going straight to a mockup was as time consuming as a quick wireframe. That, to me was a singular accomplishment of 7's visual language.

 
 
 

Following my passions

I'm a huge podcast fan, I even host one myself. Which is why at places like Squarespace and Apple, I've done work to attempt to advance the medium and make the experience of podcasters and listeners better. At Squarespace, that meant a new type of collection called a—you guessed it—Podcast! It was a play to make Squarespace competitive against the fractured and mostly poor ecosystem of podcast hosting, and to be able to use Squarespace's unique taste and ascetic to reduce double entry, and present podcasts in style as a native part of a website. It also included a new media player that could include artwork, and be embeddable for a more shareable audio ecosystem.