Hundreds of conferences, seminars, exhibitions and gigs take place every year on the sprawling EPFL campus, hosted by students, staff, faculties, start-ups, research partners and so on. Organisers charged with promoting events have, until now, been left to their own devices.

MediaCom, EPFL's marketing department, would like to encourage some change, so they charge Cruncher and :ratio with creating an easy-to-use design tool that will empower promoters to make communications that conform to their brand guidelines.

Sitting down to discuss the UX, it quickly becomes clear that to make a tool that feels familiar (and so easy-to-use), we need an editor environment that behaves somewhat like a desktop application, with objects that can be selected, and then modified via context-aware edit panes. Rather than having moveable objects we opt for a collection of design templates where editable objects have defined positions, a colour scheme selector where colours are drawn from brand colours, and a font selector with a curated list of fonts. This all helps to keep the resulting visuals on-brand.

Technically, we choose SVG as the 'native' format of the editor, where HTML would have caused text rendering discrepancies between browsers and <canvas> would mean resolution dependence and implementing a mouse-pointer-to-object detection layer. This does cause a small problem. Images must be exported to PNG format. While with a <canvas> that could be performed in-browser, with SVG it cannot. So we write a server-side micro-service that takes an SVG and returns a PNG file. Now we must make sure that fonts available in the browser are also available on the server.

To build the interface we used our in-house (and open-source) dynamic templating library Literal.

Version 1 (our 'MVP') exports to 3 formats:

• A4/A3 portrait for posters
• 1024px square for social media
• 1080p for on-campus publicity screens