Loading ...
Katie Knecht, writer
Andrew Kim/Chris Ramirez, designers
Andre Ribeiro, associate creative director
Ness Higson, creative director
David Lee, chief creative officer
Anthony Casalena, principal
Christine Cha/Charlton Roberts/Timothée Roussilhe/Nick Sahler, developers
Ayla Richards, content coordinator
John Yates, project manager
Squarespace, project design and development/client

Launch Site

“Squarespace’s dedication to creative and advertising is truly impressive.” —juror Michael Kern

“Squarespace created a website that promotes storytelling by actually removing the need to scroll.” —juror Megan Meeker

Overview: To celebrate its fifteen-year anniversary, Squarespace wanted to create a timeline showcasing its major milestones, from platform and feature updates to marketing campaigns and key partnerships. Starting with a simple list of company events, an in-house team created an immersive experience that takes viewers on a journey through Squarespace’s history.

  • • The back end was built using the Squarespace Developer Platform.
    • Thirteen people were involved in the project, including two designers and four developers.
    • The project took six months to complete.

Comments by Andrew Kim, Katie Knecht, Andre Ribeiro and Timothée Roussilhe:
Describe the purpose of the project and its target audience. “Originally, the communications team submitted a creative brief for a company history timeline module to be added to Squarespace’s About page. The goal was to tell Squarespace’s story through a visual timeline, giving site visitors—customers, potential customers, recruits and press—an understanding of where the company has been. Our immersive creation quickly outgrew the About page, and it now lives as a microsite that we link to, giving viewers an understanding of our brand identity while sharing major milestones. As an added bonus, employees were able to enjoy the timeline on the big screen during our in-office anniversary celebrations.”

What was the thinking behind the navigation structure? “To use as many natural behaviors as we could. We used the scroll behavior of the browser as a way of triggering different years, and by using the left and right arrows, visitors can easily go through the events. We also created a progress bar indicator with dots to indicate each event. By hovering over those dots, visitors get a preview of each milestone. For those who just want to quickly go through all the milestones, there is a ‘View All Events’ link in the top right corner. When clicked, this link triggers a simplified version of the timeline using mostly text, revealing photos on link hover.”

Are there any other technical features you’d like to call attention to? “It was fun to build the looping loader, which ticks through random numbers and letters but also manages to stop and showcase the dates of the timeline. Another important piece was building our own state manager—something similar to Redux—to be able to manage the data and different states, as well as manage different animations between these. We also spent a good amount of time focusing on different animations to guide the user, and the details on the user interface.”

X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In