Behind the Scenes: Fluid Engine Launch
Attention Squarespace customers! You can now build your website any way you want with Fluid Engine, our newest drag-and-drop website editor available on Squarespace 7.1. Fluid Engine is our next generation website design system and is described as “the simplest way to express creativity online.” We sat down with three key drivers of this monumental end product, Guillermo Suárez Ara , Senior Product Manager; Bettina Chou , Product Designer; and Jonathan Kaufman , Staff Software Engineer to give you a peek into how they worked together to bring the vision to life.
Here’s a behind the scenes look at Fluid Engine.
What inspired you to start working toward what we now know as “Fluid Engine”?
JK: I’ve always been inspired by improving our design system and editing system. What led to this project was we had just come out of months of research around opportunities to improve our platform’s usability. There was an “aha moment” meeting where we looked at a ton of similar feedback - about aligning, moving, resizing, etc - that spurred the question: Do we address these items one by one, or do we make a big bet? After months of prototyping and iterating, we landed on Fluid Engine being our bet, and the rest is history.
GA: I joined the team in September, when Fluid Engine was still a prototype. I was really drawn to working on something so foundational and complex, but that would have such clear and immediate value for all of our users.
BC: I joined the Fluid Engine team a few quarters after the current concept was in motion, but I was drawn to this work because to me, it represents what the Web should be. No longer are we bound to strict horizontal and vertical stacking, without any possibility of overlaps. Instead, we have the freedom to order and group in a way that makes sense to the individual.
How did Product and Engineering collaborate to build Fluid Engine?
GA: Fluid Engine is the result of so many different disciplines collaborating. I can’t think of a single day on this project where Design, Engineering, Product and Insights weren’t working together. We prototyped, we brainstormed, we debated, we celebrated. It was non-stop!
JK: Like Guillermo mentioned, Product, Engineering, and Design were meeting nearly daily to brainstorm, ideate, iterate, plan, raise concerns, and strategize regardless of our individual locations. While on paper Fluid Engine is one feature, it really encompasses 30+ things that on their own would’ve had a dedicated workstream and kept teams busy. There was a lot to coordinate, user tests, designs, and a lot to build! Without the daily syncs across teams, it would not have been possible or effective!
Recommended by LinkedIn
What was the highlight of this project for you?
JK: The highlight for me was seeing how we could address many existing usability opportunities while unlocking new web design that was not previously possible on the platform. While working on products it’s rare to have one simple solution so elegantly address so many things. Specifically, the seemingly small decision to make block positioning and sizing independent from one another unlocked great possibilities like overlapping, layering, making blocks full bleed, and allowing for an independent mobile grid. This union of simplicity, ease of use, and expressivity has been incredible to witness and watch evolve.
BC: Overall the process of bringing this project to life was enjoyable because of the tight-knit design prototyping loop with engineers. Instead of a single hand-off point and needing to provide specific specs for motion and interactions, we found various ways to capture ideas (whiteboarding, words, simple Figma prototypes) and use engineering prototypes as part of the decision making process.
GA: The cast of brilliant and fun people that worked on it. With a good group, you can never go wrong!
One of Squarespace’s core values is that the creative process is critical to our success. How did Squarespace enable you to bring your creative ideas to life?
JK: Squarespace enabled me to bring my creative ideas to life by giving me the time, space, trust and a group of great people. If not for the freedom to prototype, brainstorm, and be around creative people, while given the trust to use our time to do the initial exploration, we would not have come up with this solution. I’m grateful for that.
GA: We had a lot of UX research support on this project. We were able to put prototypes and concepts in front of users on a weekly basis to make sure we were always building in the right direction.
What’s next for the customer experience now that Fluid Engine is live?
JK: Up next we’ll be focusing on ways to help guide our users on how to place things on the grid and re-use existing layouts as well as general improvements to the responsive nature of sites built with Fluid Engine.
BC: We’ve received a lot of positive feedback on the usability and expressibility improvements of Fluid Engine however autolayout sections and Collection pages (Blogs, Shop, etc) still use more templatized paradigms. We’ll be evaluating the tradeoffs of those older paradigms to further improve the ease of use of our system.
GA: We want to keep making it easier for anyone, regardless of their design experience, to make a really expressive and effective site that captures their identity. We’ve got some exciting prototypes in the works already. Stay tuned!