Making Vancouver Design Week’s web presence

by Tylor

VDW website slideshow header

If you haven’t heard us talk about it by now, you should know that we’re pretty excited about Vancouver Design Week. The week, currently underway with over 80 events, brings together Vancouver designers of all stripes to collectively put the spotlight on our community. Vancouver’s design scene is vibrant but often missed, so we’re definitely overdue for this kind of event. When chief instigator Jennifer Cutbill got in touch mid-summer, we jumped at the chance to represent the digital aspects of the project.

Designing and building the first year digital presence of an event this size was a challenge – many things are defined only later in the process, and changes happen quickly. But to get people to buy into something so new and big, any presence needs to feel polished, accessible, and welcoming.

Version One

Our first step out was simple, with the intention of showing signs of life and setting up a home base. Our single desirable outcome was getting people to sign up for the newsletter. We created a one-pager with a short description of the event, backed by and a nice, gently fading colour background sparking curiosity and warmth.

VDW version 1 website

Version Two

The page was very successful at establishing presence and driving newsletter signups, our primary way of getting in touch with anyone interested.

Soon after, Cause+Affect created a strong and dynamic brand that we couldn’t wait to apply online. With the overall shape of the event still uncertain, we went with a modular single page that we could re-arrange and add to as needed.

We added content to highlight the people involved, and explain exactly what this event was going to be. Changes were fast and furious, so instead of applying a full content management system, we coded everything by hand as a static website that we could mould as we needed. This let us be flexible with information and easily mock up and prototype new sections as they came up with their own needs.

As patterns emerged, we simplified and built on the visual style and site structure. We give huge credit to Cause+Affect’s Carling Borne for creating a visual language with very focused typographic, colour, and design touches. The design’s adaptability made it straightforward to create new sections in a modular and consistent way – holding strong while growing quickly.

The little feature box that could

The little feature box that could

Version Three

The most complex task was to create an easy way to update events calendar with times, places, and descriptions. We knew that events would be coming in right up to the date, so it also had to be editable by anyone on the team. Using a trick we developed when creating the Megaphone Vendor Finder, We used a Google Docs spreadsheet to track events and then scripted its output to the website. The script geocodes addresses to latitude and longitude for the maps, creates posts for our static site generator, and then publishes the changes. This is run anytime it’s needed and let’s us track exactly what changes so that nothing bad goes out. The site itself is hosted on Github Pages, so we know it will scale when the site gets hit a burst of traffic.

The events spreadsheet

Our favourite lo-fi content management system

We also knew that a lot of our visitors would be on the go, so we put a strong emphasis on mobile from the start. The site is responsive and we made sure that anything designed could serve both mobile and desktop equally. For the events calendar in particular, we went with collapsible sections for each date rather than a calendar or vertical week view. We also put a map with each date rather than for the entire event to keep them close to the list and not get dense with location markers. So far, 25% of our visitors have been on mobile, making this constraint very worthwhile.

Events calendar

We left a lot of ideas on the studio floor, cutting them mostly on the basis of time available. Working across apps and web is where we want to take things when Vancouver Design Week 2015 rolls around, and with so much learning under our belts this year we think we can make our work a true platform for showcasing Vancouver’s design community.

The event is off to a huge start, and if you’re reading this before September 28, 2014, and you’re in Vancouver, you owe it to yourself to check out the great work and people in your city. The place to look, of course, is vancouverdesignwk.com.