Mel Choyce

  • Splash Pages for Campaigns on Squarespace

    You might have noticed in my recent post on election design that I made a bunch of splash pages for Alessandra Biaggi’s campaign.

    Website landing page that prominently features the text "ELECT MORE WOMEN / BIAGGI 2018." The headline on the page reads "elect more women," and the content describes why you should elect Alessandra Biaggi. There is a button to donate $25, and a link to continue to the website.

    Splash pages are common tactics for any site trying to raise money or spur action, like political campaigns and non-profits. They’re usually minimal, focused, and create a gate before you can reach the regular site.

    Biaggi’s site was built on Squarespace, so my first instinct (“download a WordPress plugin!”) was out. The idea of using a regular page and overwriting a bunch of CSS was… daunting, to say the least. That’s when I discovered the utility of Cover Pages. I’d seen them announced before and thought they were nifty, though at the time, I had no use for them. This changed when I started playing around with them as an option for splash pages.

    Cover Pages are great because they load a separate template into the page. You can control whether to show branding and navigation, or just go simple with a header, body text, and some action links. You have a similar style editor as the rest of the site, but it’s per-page, so you can tweak styles between different cover pages.

    • Squarespace's "Branding and Text" panel, featuring a logo option, headline, and body text field.
      Branding & Text
    • Squarespace's "Style" panel, which displays options for customizing your site styles.
      Styles
    • Squarespace's "Action" panel, which lets you choose between buttons/navigation, and a general form or newsletter signup.
      Actions
    • Squarespace's "Media" panel, which lets you add a background image or video.
      Media
    • Squarespace's "Social Icons" panel, which features a toggle to turn on/off social icons.
      Social Icons

    There’s a number of available layouts, geared towards different use-cases. I found “landing,” “profile,” and “video” to be the most useful categories for my particular needs.

    Squarespace's "Change Layout" panel. The layout dropdown is open, showing the available layout categories. Behind the dropdown are preview thumbnails for a few layouts.

    In particular, I used VANGUARD, MISSION, and PROJECTOR the most often. I also found FLASH a good option for making policy-specific splash pages, which we used on social media.

    One gripe ā€” there’s no way to set per-page marketing settings, like social share images. This would have been immensely helpful for making our policy splash pages, so each had a unique social share image, instead of using the general site image.

    I had to write very little CSS to get these pages looking the way I wanted. I customized non-primary buttons so they appeared as links instead, and adjusted some background positioning on different screen sizes. That may have been the extent of it?

    Each splash page had its own corresponding ActBlue link, so we could track how each page performed. I wish we’d dived deeper into this ā€” I think if I work on another campaign where we use these tools, I’d try more variations to see which pages perform better.

    We primarily used Cover Pages for donations and GOTV (“get out the vote”), but I could also see early-stage campaigns using them for email gathering or “stay tuned!” landing pages. I think there’s a lot of opportunities for campaigns using Squarespace to leverage this feature!

    mel

    , ,

  • Design for Elections

    If you’ve chatted with me any time this year, you’ve probably heard that I’ve been spending a lot of my spare time volunteering for various campaigns across the US. I’ve been involved with Get Her Elected, Ragtag, and Tech for Campaigns, civic tech orgs focused on helping progressive candidates. I’m also the Website Director for Alessandra Biaggi’s campaign for New York State Senate.

    Civic tech kept me going this year. I spent much of last year in a useless haze. I felt powerless. This year, I was determined to take back my agency. Volunteering on campaigns allowed me to use my skills to make a difference. Whenever I felt despair sinking in, I’d work harder, or volunteer for another project. I had networks of other civic techies who kept me buoyed and provided support and encouragement.

    Now that the Midterms are (mostly) over, I wanted to share some of the work I’ve done. Pretty much all of these were collaborative efforts with other civic tech volunteers across different organizations.

    Site Design

    Site design is my specialty. I’m great at taking minimal amounts of content and stretching it into decent “brochure” style site.

    Most of the campaign sites I worked on this year were built on Squarespace or WordPress. WordPress is, obviously, my specialty, but I had a lot of fun learning the ins-and-outs of Squarespace, which is a pretty amazing platform for getting an attractive site up ASAP. 

    Here are some of the sites I worked on:

    And some landing pages I did for Alessandra Biaggi’s campaign:

    Ad Design

    This was my first foray into ad design, and I learned a lot in a short amount of time ā€” best practices, sizing and formats, Facebook’s 20% text rule, etc. Here’s some of my favorite ads:

    With the Midterms wrapping up, I find myself wondering what’s next. Voter suppression and disenfranchisement, and Gerrymandering, continue to play a destructive role in our elections. I’d love to find a way to help fight both with my design skills. I want to work on tools to make campaigning easier, especially for candidates without a ton of resources. If you come across any orgs looking for design volunteers to tackle these issues, send them my way!

    mel

    ,