The Squarespace brand can be seen throughout all touchpoints of the organization; from marketing, advertising and social and also through to the CMS product itself.
As we are predominantly a digital company, our output a brand can have a strong emphasis on motion as the medium we are able to roll out to is able to show moving visuals.
The challenge was to roll out this concept throughout all of our various teams and touchpoints in a cohesive way that worked for all stakeholders while maintaining strong brand recognition and unique design.
Our brand guidelines are at the core of all our teams outputs. We met with every team in the org from product, to social, to campaigns and the dotcom team to figure out how to create guidelines that would take into accound the needs of each team and allow them to stay within the lines of the brand and start to evolve the look and feel themselves
As mentioned previously, a very important part of the brand is motion. We essentially wanted to brand moving elements and the way objects move. The idea was relatively simple in that we take a square, and the space it occupies as it is moved through a 3D axis. This alowed us to end up with four different types of motion that we use through the brand, and that we can play with as components to use as we rebild our brand.
Once we completed our Brand Guidelines, we then decided to create some visual component libraries for a select number of teams within the Figma product. This project essentially took a design systems approach to visual design to allow each team to work more efficiently and also maintain a strong brand aesthetic. The main approach was that if we could allow teams to complete 80% of their work in 20% of the time, then each team would have more time to work on evolving and innovating within their teams. The videos below show real examples of creating breakpoints in Squarespace.com using the 'Frontsite component library' and also a social campaign using our 'Social component library'.