To help promote CoWorking Night, a weekly community-driven event with ever-rotating workshops, I created a digital flyer – an ultra-responsive web-based marketing tool designed to be viewable on desktops, phones, on-site portrait TV displays, and even as a traditional print-out flyer.
In the early stages of CoWorking Night, the flyer – a vital tool not only for marketing CWN to potential attendees, but also for informing regulars of the schedule throughout the night – required an extreme amount of labor. It was created in Photoshop, edited throughout the week, and printed to hand out to attendees.
I, along with a developer, set out to recreate the flyer in web format.
The goals were:
- drastically reduce the amount of time to create and update the schedule
- allow for multiple editors to reduce the burden on a single person
- make it accessible online so attendees could have a singular place to check the schedule each week and share with friends
- make it mobile friendly, so attendees could easily reference the schedule throughout the evening
- make it display effectively on portrait-oriented digital signage located in the venue, so attendees to keep track of the schedule throughout the night
- allow it to be effectively printed so that a limited number of print-outs could still be handed out to new attendees
I took the original design of the flyer and faithfully recreated it as a responsive web page using HTML and CSS. Possibly the most challenging aspect was the extensive CSS work to make the flyer so beautifully responsive, not just across screen sizes but across mediums, so that the printed version didn't look like someone simply hit Ctrl+P on a webpage.
Once the basic webpage was approved, it was handed off to a developer who used it as a template, with the page content populated by a user-friendly form.
The outcome was a success on every metric. And later development brought additional benefits like allowing workshop hosts to request a place on the schedule by submitting the information for their workshop.
Here is the CodePen template that was handed off to a developer to link up to dynamic data, populated by a user-friendly form.