Deconstruct Collective Website Redesign

In 2020, I overhauled the design and content of the website for Deconstruct, a collective focused on intersectional and thoughtful critique of Seattle theatre. As a website aimed at reviewing work intentionally (even sometimes publishing after a show had ended), when it was first published, it made an impact. It was essential that its mission be front and center. As the critiques accumulated, the collective desire from the group was to be able to immediately access the critiques. My goal was to make the website readable and to put as much information up front as possible. The result is an elegant layout that uses Squarespace 7.1. Although Deconstruct Collective is temporarily on hiatus, the site remains an archive of theatre criticism from 2016 – 2021.

• Project Role: Editor, Web Designer
• What I Learned: Proofreading, Copyediting, Squarespace CMS
• Tools Used: Squarespace, Notion

Using Squarespace CMS

Squarespace has polished and sparse layouts that showcase your imagery, but it isn’t the best CMS for trying out new template designs. When version 7.1 was launched, the developers created entirely new layouts, most of which couldn’t be implemented in version 7.0. I knew that I wanted to change the template design to one that used a white background and shorter line length, but when I found one that I liked, I learned that I would have to manually recreate every previous critique published as a page as a blog post in the new template, and that there was no going back.

Copyediting versus Proofreading

In order to meet the new template’s framework, I created summaries for every post, which required reading every post to learn its content. Inevitably, this led to correcting any small typos I encountered while developing accurate summaries. I also created a layout for highlighting the metadata associated with each post, which used to sit at the end of the critique. Now there is a consistent template in the sidebar that fits the various formats of productions and writers. I included links to information about each person and organization mentioned, including the authors, who have individual bio pages.

At the end of every post, there are related critiques based on the assigned categories. These are automatically selected and give the audience elsewhere to go as they navigate.

Keeping It Organized

In order to maintain some sense of order, I turned to Notion. I used an entire project dashboard to organize the writers’ bios and site text that I merged from the “Who We Are” and “Our Approach” pages, as well as the Critiques. In the database, I created properties that highlighted all of the features for the new site:

• Tags: These became categories, but I wasn’t sure what to title them until I started building the new site. The categories give the reader a preview of the type of show being covered while also creating a network of related posts.
• Dates: Instead of relying on the date a page had been previously published (especially because the critiques could be published at any time), I used the performance dates in the metadata. In order to match the publishing order on the previous site, I adjusted the publish date in the backend.
• Excerpt and Character Count: In order to maintain consistency on the front page, I wanted to keep the post summaries within a certain parameter. The formula helped me keep an eye on it as I wrote.
• Slug: Another downside of transitioning templates in Squarespace meant that I had to redirect every page. I also wanted the URL to be clear for every page, so I use this property to make sure it was correct. This information was input to the backend settings with the categories.
• Play Title, Playwright, Director, Produced by, Lead, Team: All of this metadata lives in the sidebar. I used “Play Title” and “Playwright” as headings on the properties, but removed “Play” and replaced “Playwright” with “Written by” on the site. I used “Produced by” since some productions were independently produced. The “Lead” and “Team” properties helped me organize who wrote what.
• Notes, Thumbnail, –>, 301, Note Complete: Notes were used to leave any notes to myself. Thumbnails were the featured images, which sometimes differed from the first images used in the posts. The “–>” and “301” properties (along with “Slug”) helped me easily create the 301 redirects. And “Note Complete” meant that I was done!

Archives for the Future

At the moment, the Deconstruct site is dormant. Many of the people involved have moved onto other things as we all fell out of practice attending and commenting on productions. I look forward to trying out the template for new reviews with other contributors if we continue to publish. For now, it will stay as an archive of previous reviews of a certain time in Seattle Theatre.

Categorized in: Performance Reviews, Project, Web Design