The biggest update to Squarespace web design tools for the first time in 10 years.

Contributions

Lead Product Design, Visual Design

Guided by an advanced smart grid, Fluid Engine provides users with maximum freedom to easily play with, experiment and stretch creative limits through an unrestricted canvas. Regardless of how you experiment with Fluid Engine, our guidelines and design system will ensure that your website looks good no matter what.

Fluid Engine is the most design-forward, yet simple and fast way to build a website, with millions of people creating business and personal brands online, we have created a simplified solution – it's as easy as building a presentation and the output is incredible.

In my role, I oversaw the initial conception and ideation of the product, to the final handoff and market release. As one of two designers on the product, I focused on the visual design, expressibility features, accessibility and onboarding to create the ideal user experience. Touching all aspects of the product, I helped set the roadmap for MVP and future releases to ensure all users, would understand the new system.

The Challenge

How can we provide the expressibility we desire while maintaining a system that is flexible yet simple enough for all of
our users on Squarespace? We wanted to make sure we weren’t just matching systems already out there, but exceeding them.
"An editing system that balances ease of use with expressibility"
- Eric Song

Discovery and Exploration

As one of the team's goals for the product, we wanted to ensure our choices weren't based on intuition but were double and triple-checked against every other option. We conducted extensive market research and competitive analysis to ensure that Fluid Engine exceeded industry standards.

Evolution

Evolving from the previous Squarespace layout engine, which was built on a 12-column grid, we built Fluid Engine to allow users to seamlessly update their website. Leveraging this research, along with our expertise in web trends, we ultimately went with a 24-column grid, as it struck the perfect balance of unlimited freedom and ease of use.

How is the grid interacted wtih?

This was a frequent question that came up to us in exploration and testing. How is the user interacting with the gird? Is it something they push into, or appears ontop of the content? Does it need to have a motion of reveal, or is it something to appear as a tool?

Ensuring Accessibility

In a collaborative effort across divisions, we partnered with Squarespace experts to ensure that Fluid Engine had accessibility baked into the product from its conception. We achieved this by developing all of our UI elements with a double stroke around their border, a visible grid regardless of background colour, and a contextual background. The final of which was key. It ensured that the elements not only felt like part of their section, but also gave elements - particularly text - a background that would always be visible on the grid.

Contextual Content

To make the content feel like it was all from one place, we developed contextual backgounds on text elements. This not only ensured accessbility, but also that when you picked up content, it felt like it was all from the same place. 

Guided By Design

Leveraging our experience with previously added features on Squarespace, we understand that users appreciate one-click, set-and-forget functionality. We aimed to replicate this with a straightforward grid control panel that requires minimal learning.

Holistic Updates

To encourage the user to be more expressive in their layouts, we developed a new presets grid management panel with high-level controls guiding the user into designer-curated layouts. We also updated our editor bar to be more compact and feature-rich, added a new alignment tool, gave users contextual ordering with blocks, and allowed for full-width layouts with contextual alignment. With these new updates, we were able to achieve layouts that weren't possible on the native Squarespace experience, giving a whole new life to templates and empowering our users to achieve new and unique layouts.

Defining rules

By ordering our annotation bar in a way that gives a strong structure we allow our users to quickly edit their content seamlessly.As these blocks were also treated on a case-by-case basis, their needs and edibility are different. Such as set and forget layouts. Giving them this strong ordering allowed for a global system rule to be created and followed.

Updating our system

With a new editing experience, we needed to ensure our existing library was updated and refreshed. This was done by picking our 20 top most used blocks, and adjusting them to meet the expectations of the user.

Onboarding

With this completely new editing experience, how can we ensure that our users not only could understand but grow in this new environment? Partnering with our motion team, we came up with a 5-step onboarding process that highlighted all the new paradigms and interactions our users had to learn. Upon launching this, we had a 43% completion rate for onboarding, which well exceeded our goal metric of 30%.

Roll out

Partnering with other teams, we updated over 100 Squarespace templates with our new engine. This was crucial, as not only did it provide us with a rich testing environment, it also allowed us to catch as many bugs as possible before our launch date. All of this work was done over the course of 9 months, encompassing many teams and cross-functional partners. The launch was met with overwhelmingly positive reviews from both our Squarespace Circle members and the general public. This launch only contained a fraction of the features we wanted to add, with many more slated to come.
Explore more work
↗

Fruitful App

Stop worrying about your finances. That's our job.

↗

Gemini

The most general and capable AI models Google has ever built.

Fluid Engine
Visit Site