It’s a year or so after launch of Monocle and things are going very well, both in print and online, so it’s time for me to move on. Having worked with Tyler Brûlé and the rest of the Monocle team to breathe life into the project, creating the first volume of the magazine and iterations of the website and steering it through its first successful year of operation, I decided to leave, and departed at the end of March 2008. The project is up and running, with good solid foundations. Thus, others can run the daily business from here on in.

With that, I thought I’d pause to reflect on some of the design and strategy choices I made with Monocle.com and share them here. I’ve often tried to be ‘transparent’ about the work done on projects here, in the hope that it stimulates useful thought or conversation in other projects elsewhere, and partly to facilitate my own reflections on work. None of what follows is rocket science, and it’s not the place to look for thoughts on 2.0/3.0, social software, or urban informatics. That would be in the accounts of different projects. But if you’re interested in the honest craft of website work, almost deliberately old-fashioned ‘classical’ web design – and how to ally this with innovation in magazine publishing – the following should provide a decent account of several of the key decisions in this particular project.

During the course of an insanely busy year there are many other key decisions that just occurred and aren’t noted here – most of them, in fact. And of course some that are confidential. Nor is this particularly structured. Nonetheless, it contains early sketches, outlines of strategic thinking and some insights into decision-making, tool choices and design practice. I hope you find what follows to be useful or interesting.

Context
As someone put it, Monocle was probably the most blogged about magazine last year. It was written about offline a lot too, but I won’t dwell on the magazine specifically here, except where it relates to the design and production of the digital services. (For a bookended account, Monocle’s editor Andrew Tuck wrote about the launch and Tyler and Andrew were both recently interviewed a year on.)

Many were too quick to judge perhaps,  but others were less so and considered responses emerged throughout the year. Reception varied wildly, as one expects, but leaving aside the reception for the magazine and brand overall, the website itself often received much critical acclaim, for which many thanks. The likes of Eye, Print, BusinessWeek, MagCulture and Design Week all suggested we were onto something with our integration of print and web specifically. I’ve mentioned the Eye article before, but the Print piece by Andrew Blum was particularly sharp in identifying the Monocle.com difference. While the new media commentators often mistakenly looked for a 2.0 platform play, Blum noted our attempt to bring quality back to the table, trying to use a new platform to reinvigorate broadcast journalism itself. Similarly BusinessWeek spotted that the “web component (is) more like TV than print”. It actually feels somewhere between the two, but that was the intention.

Perhaps more importantly, the user figures have grown healthily throughout the year. Unique users and time spent on the site are all doing fine, but I knew from the BBC that getting the broadcasts into iTunes would be the thing that really extended the viewership of the programmes, our primary purpose. When we added BBC radio podcasts to iTunes they really thrived, and sure enough, since November 2007, viewing figures have been doubling month on month for Monocle’s movies, driven by iTunes’ ease-of-use. We’re now shifting terabytes of editorial each week. If you have audio or video material, the value of iTunes at this point cannot be stressed enough. It’ll be interesting to see how that platform develops.

Best of all, we hit number 1 in the iTunes News & Politics chart just before Christmas 2007. It’s hardly the most rigorously calculated chart in existence, but still an achievement, I think, to have the likes of the rather more well-funded and well-established Economist, Guardian, BBC, Reuters and Sky trailing in your wake through December, even temporarily (with the first four there having an average age of over 100 years or so, and our brand barely 10 months old at that point.)

So for an entirely new non-mainstream brand, with a no-celebrity policy allied to serious global coverage of subjects that are often little known before we cover them, I’m very happy with the favourable response from readers and viewers. We’ve covered e-Sports in South Korea, the animated title sequences of Kuntzel+Deygas, Narcotecture in Afghanistan, Tezuka architects’ Fuji kindergarten, Lexus’ brand issues, Paula Scher on Brand America, the train from Istanbul to Van, the CEO of Lego, the Tällberg Forum, the 2007 Salone industrial design fair and Frankfurt Motor Show, slow food in Turin, our top urban design solutions, mayoral summits in New York, photojournalism from Murmansk, Tajikistan, Zimbabwe and Abkhazia, and much more besides, Plus, we got name-checked by Lupe Fiasco.

Monocle design notes
Monocle was conceived as a multi-platform brand from the start. Tyler Brûlé’s work since Wallpaper* included a design and branding agency, Winkreative, and editorial production capacity, Winkontent. The latter had produced TV programmes (BBC4’s The Desk and Counter Culture, for instance) and Tyler himself had started as a broadcast journalist (with the BBC and others). So an understanding of what makes good audio-video content was certainly present in the building to begin with, and my experience from the BBC reinforced that. It was definitely part of the plan for Monocle. We wanted to make Monocle a journalism brand that you had a weekly relationship with via the internet, as well as the monthly relationship via the magazine. Ultimately, this should be daily, if aspirations come to fruition. This weekly relationship would be through a form of broadcast media, using the internet’s ability for distributing video – something enabled only in the last couple of years, effectively – and thus conveying the sense of a Monocle broadcast news element, complementing the ‘book’.

The challenge was to create a working environment that would produce it, and then an online environment that could distribute it.

Broadcast aspirations
We’d seen many other broadcast news outlets appear to be getting ever more parochial, and produce editorial with lower quality (closing bureaux, only covering stories directly relevant to their region, cost cutting generally in production values – the apparent step forward of journalists filing video reports via their mobile phone is often merely a cost-cutting exercise, and a step backwards in reporting quality). Equally, the rise of the internet as a medium for video is characterised by YouTube, which although a brilliant platform play in many ways, doesn’t do the kind of journalism we were interested in, or offer original high quality programme making.

So we wanted to raise the bar in online video: to shoot things in high quality – we have our own Panasonic AG-HVX200 HD cameras and Mac Pro-based Final Cut Pro editing stations – and edit and encode professionally, embedding on the page in 16:9 ratio, to subtly give a sense of high quality broadcast.

Critically, we wanted to ensure that the sound is recorded correctly, so we used broadcast facilities in central London (CBC’s studios for instance) before converting a space in the Marylebone Monocle HQ into a voiceover booth. A bit DIY but it worked, and it’s lent our voice tracks just the right levels of warmth, resonance and crisp authority. Many other players have clearly not thought enough about sound, even when they’re working from well-established brands with a deserved reputation for quality (the early podcasts of The Economist, for instance, often sounded pretty ropey, though they’ve since got a lot better. Many well-respected titles still appear to record their voiceovers and interviews in a bathroom.)

(Sidenote: Creating the right office/studio environment was also key, in terms of careful functional layout, furniture and equipment, but also unwritten rules – no eating at desk, coats in the cloakroom not on the back of chair, finding frequent excuses for a glass of wine at the end of the day etc. – but that’s another story and one best told by Tyler.) The centre-piece of the office is a large wall on which the issue emerges bit by bit, as useful for us commissioning video content alongside as for talking people through the brand.)

We quickly decided we were going to use professional camera crews and director/producers. This ensures that programmes are well-shot to our house-style, feeling part of an overall Monocle aesthetic, translating the rigour from the magazine’s emerging layout into its filmic equivalent: no jerky camera movement, careful graphic framing of scenes, two camera shoots and additional sound crew if it’s a big interview, careful and stylish use of graphic elements and so on. Such that every part of the Monocle.com experience is additive, reinforcing and complementing each other. We have in-house capacity for this, directed by experienced broadcast producer Gillian Dobias (ex-CBC, BBC etc.) and an in-house production assistant, Aleksander Solum, with experience of editing, encoding and much besides. We’ve also slowly built up a global network of trusted shooters, directors etc. over the year. I used 37 Signals’ Highrise and Basecamp to organise all these projects, contacts and workflow, incidentally.

We wanted to really give a sense that the website would have the same quality threshold as the print magazine in terms of production. Building a 2.0-style service, or a ‘platform for journalism’, was not at all relevant at this point. As interesting as those things are – or could one day be, at least – it wasn’t part of what Monocle could bring to the table to begin with. Instead, the focus was on reinforcing the idea of high-quality journalistic content through its operation, and distributing that smartly.

Editorial direction and structure
We decided early on that the site should do its own thing, have a life of its own outside the magazine whilst relating to the same subjects. We’ve done a lot of thinking about how broadcast elements can spin out of print stories at new tangents, either picking up an element of the story that wasn’t covered in the print piece (the Narcotecture in Herat piece) or telling the story of the story (the JMSDF piece) or complementing the same subject matter with an entirely different story (the report on the C40 Mayoral Summit on climate change in NYC ran alongside the urban quality of life stories in issue 05). Increasingly, the site has covered items that were barely in the magazine at all: Yubari; Tokyo Designer’s Week; Baselworld watch fair.

Further, that the website, while containing virtually every word from the magazines in a rich archive for subscribers, would actually discreetly conceal that material in the background, pushing the original broadcast-style programming to the foreground. So Monocle.com would very clearly showcase the programmes, using the magazine editorial as a supportive structure which provides further context, further reading. The programmes are out front, the magazine content towards the back.

Hence the homepage is dominated by a widescreen element showcasing the latest programming; the menus and aggregation pages accentuate the broadcast elements, placing them top and left and adorning with thumbnail images, with the translated print pieces as a kind of richly-decorated supporting cast to the right. (Other magazine sites have begun to pick up on this tactic; others still simply copy and paste content out of Quark, or simply haven’t used the medium at all.)

Thus we were doing the opposite of what most magazine-driven brands when they turn to the internet (often as an afterthought). The obvious choice is to plonk all the magazine editorial online, and augment with a few editors’ blogs and such-like. At first glance, we were effectively letting the print material reside where it is best experienced – in the tactile format of the magazine – and instead exploring new facets of the brand with a broadcast-led website. But wanting to have our cake and eat it, the magazine material is there too, just reformatted for the web and immersed in a new navigational framework, appropriate to its new context.

Now there is a volume’s worth of material – 12 issues – online, the new navigational routes cross-cutting content are quite rich. Decent aggregations exist for architecture or geopolitics, say, or unique subjects like family-owned businesses have their own aggregation pages. As do locations, at both city and country level. Many of these aggregations have RSS feeds, and many more will follow, as should coherent navigation points for all these aggregations. So this adds value to placing the magazine material online. As you might expect, these keywords are not user-generated, but carefully chosen, curated and maintained. This retains a high quality threshold to the navigation, as a controlled vocabulary of keywords can be maintained by Monocle, and also reinforces the idea that Monocle is a bespoke, hand-finished production.

Visual layer
I inherited a fairly full worked through corporate identity, with typeface choice (generally, Plantin, Helvetica Neue, and Hoefler + Frere-Jones’s Strasse from Numbers; all quite beautiful), a 4-way colour-scheme, a strong grid-based structure, and all the small detail elements – end marks, pull quote styles, maps, oldstyle numerals, a Monocle mark as well as typographic treatment of the logo, and so on – that the architecture of a magazine supplies. Further, the identity extended into paper bookmarks, envelopes, letterheads, and the nicest cardboard DVD wallets I’ve ever seen.

The challenge was to translate all that for the internet – something I’ve done many times before, working with the music or broadcast industries, but I’d never done with a monthly magazine.

I was aware that the rhythm of publication could help make something which has the bespoke feel of the print companion. At the BBC, you’d try to build real time data-driven websites, with radio stations pumping records out every few seconds and receiving SMS by the bucketload in return. The challenge there was to build a system which could be updated every few seconds, so one relied on templates, stock photography or generic images, and used HTML text in Verdana etc. With Monocle, I knew one part of the site would have the luxury of the 10 day period in-between the magazine going to the press and it hitting the newsstands, during which time we could carefully translate the print pieces online. This means we can set titles in Plantin or Helvetica Neue, ensuring a real family resemblance to the magazine, carefully select and crop images, find external links for further reading, find related stories across all the issues and programmes thus far, cross-cut the magazine with keywords and location-based browsing and so on. As a result, that section of the site retains the feeling of bespoke production, richness of reference and finish, and distinction that the magazine has.  As with most aspects of Monocle, this is deliberately swimming against the tide.

Here’s a segment of a diagram I drew up for the team at one point, to indicate the interplay between these two rhythms – how the monthly upload [W] fits into the gap after the finish of one issue and the start of the next, and how broadcasts [B] are on a weekly rhythm which intensify slightly at publication date:

In terms of rhythm of updates, we deliberately decided less is more, and flying in the face of conventional wisdom (if you can have wisdom in a medium only a decade old) we produced editorial at a steady rate – essentially a well-made film or two per week – rather than bombarding the user with content. Deciding to filter, reflect and craft rather than immerse the user in a constant flow of data in lieu of information. Again, this was difficult for some to get their heads around, and we certainly have aspirations to increase the frequency to include a snappy daily bulletin, but this sense of quiet calm exuding from Monocle was another important statement: that you don’t have to clutter websites with every possible bit of information you can. And that – particularly for the busy people that enjoy Monocle – information overload is not something we wished to contribute to.

I made quick straightforward decisions around findability – breaking a page of 4 or 5 briefing items into those 4 or 5 small individual stories, rather than combining them all onto one webpage, preferring instead these basic atoms.  This ensures every page (even subscriber-only content) could be linked to externally, and would contain enough HTML text to be indexed by search engines whilst hinting at the strong graphical element of the brand. In conversion of these very small briefing items, some photographs work better at the larger size the webpage affords; others, however, don’t translate as well, as some items don’t have images at all, and until we populate those pages with a generic graphic indicating each section, this handful of pages looks a little unbalanced. In this sense, the website has far less variation than the more flexible magazine format.

(Sidenote: It’s ironic to consider that a well-oiled magazine production team has considerable fluidity over layout – as they’re remaking each issue, each month, with tools honed over decades for that workflow – whereas redesigning the webpage templates each month would be an extremely onerous task. So magazines have more flexibility, at first glance. The webpage template, in a CMS-driven environment, has to take a one-size-fits-all to content. And no matter how cleverly designed, it won’t always suit it. Obviously, though, we’re not comparing like-with-like, and ultimately the fluidity of separating content from presentation that a CMS-driven, template-laden site affords enables a whole other level of malleability and global distribution.)

Before I go much further, I should note a debt of gratitude to Richard Spencer Powell and Ken Leung, Monocle’s creative director and art director respectively, who delivered that richly detailed identity in the first place, and Winkreative’s Maurus Fraser and freelance designer Paul Finn, who worked with me on the translation, the latter in particular. Many thanks are due to all of them for their hard work, skill and dedication.

Visually, we wanted to make something that didn’t ape current design tropes – the boring, over-used and essentially art-less ‘web 2.0 look’ of bright palletes, gradient fills and rounded corners – but had a more classical view, as befitting something a little more grown up. Richard Spencer Powell said the magazine design draws from modernism, of course (especially North and Mittel European heritage) but also looks further back into the early 20thC, and beyond the simple serifs and vogue for ornamentation, but look at the engravings, section headers, cartographic styles etc.

So the last thing we needed was a bevelled/shaded button style in yellow or fuscia.

Instead, something intuitive, with the right affordances, and explicable to a smart, web-savvy punter, but with the feel of print and a sense of mature, timeless, distinctive quality of a European newspaper (the print brand is quite informed by the likes of Neue Zürcher Zeitung, Frankfurter Allgemeinezeitung and other European papers, synthesised with the controlled explosions of subject matter found in Japanese magazines like Casa Brutus. Just as the web and broadcast identity is informed by CBS in the ’60s, that sense of broadcast journalism glimpsed in Good night and Good Luck and the best of the BBC World Service, and so on.)

The idents on programmes (e.g.) nod to the print foundations of Monocle too. By the excellent film-maker Adam Mufti, it’s film of the first issues of Monocle running through the printers. We looked at a number of possible soundtracks to accompany this footage – and we’re still looking, particularly drawn by the stirring strings and insistent pulse of 60s/70s news themes, which we’ve listened to numerous times – but we also liked the raw, honest sound of the printers themselves.

Legibility was another real watch-word for us, and thus we avoid layering text over images, or breaking our grid structure. Again, print pages are designed to be very readable, and we carefully render all text at a reasonable size for reading, whether the at-a-glance skimming that many web readers to in navigational mode, or the more focused in-depth reading required for articles.

The architecture of the site at page level is within a very rigid and carefully considered grid structure, just as with the magazine, lending a coherent structure across the entire site. We chose a tight grid which arranges the information for reading and browsing, and stretched it horizontally as far as we thought safe given current screen sizes. It comprises a few key sweet-spots for navigation – upwards, sideways, and outwards – that are reinforced throughout the two main workshorse sections of the site (the broadcast elements and the magazine pages). More on this later.

At site level, the architecture is rigid and fluid, at different times. There’s a clear top-down information architecture, with overarching ‘containers’ around editorial sections – Affairs, Business, Culture, Design, Edits – and programme brands (e.g.). Each magazine is organised as per the print piece, such that magazine subscribers – and we’re a subscriber-driven model, so they’re our primary persona – can quickly infer the structure of the site, especially if they’re familiar with the magazine.

But I also wanted to ensure that we could cross-cut this rigid structure in non-linear fashion. So every article is pinned with a location, which then have their own aggregation pages (and will have corresponding RSS feeds), such that you can browse Monocle via location, across broadcasts and magazine articles. Equally, several levels of keyword exist, which also enable everything to navigated.

(Note: Full internationalisation as such was not an issue for Monocle, being all in English, which is somewhat ironic given the global reach but made life for v1 a lot easier for sure.)

User-generated content and garnering attention
In terms of user generated content, or user discussion of Monocle pieces, my view was that we didn’t need comments on the site as people increasingly have their own spaces to talk, discuss, comment – whether that’s blogs and discussion fora, or the social software of Facebook et al. So a more progressive approach would be to ensure that everything is linkable and kept online – with clean, permanent URL structures – thus encouraging people to point to articles from the comfort of their own sites. At some point, we could begin to aggregate responses to Monocle editorial, Technorati-style, perhaps (it’s a development of a strategy I’d outlined at the BBC, which there was also predicated on ‘tear-off strips’ of content as well, enabling people to grab BBC media and build a blog entry around it).

Overall, this seemed a more mature approach to handling this brand, and the increasingly sophisticated environment online. It’s meant we don’t have to carry moderation costs, which I knew could be expensive, yet still trigger conversation. Towards the end of the year, a site described Monocle as "the most blogged about magazine", so part of that strategy would seem to be working (accepting that there are many other reasons why it was blogged about, not reliant on URL structure or archiving strategies, and accepting that not all of those blog entries were complimentary!)

Working with experienced magazine professionals, it was necessary to reiterate the importance of leaving things online once it was published. As with broadcast, the rhythm of this first wave of media is always working right up to deadline, and then swiftly moving on to the next issue or edition. The web is intrinsically designed for linking and archiving, so I ensured that Monocle.com would do that. A simple point, and one the industry discovered long ago – in my case, after much work at the BBC – but fundamental nonetheless. It’s still surprising how often it’s forgotten by new entrants, given this basic premise of pointability has underpinned almost every mature online success, from Amazon to YouTube.

As such, it’s worth pausing to note that the URL structure was considered as part of the design job. See later on multidisciplinary teams, but the architecture of the site, and further, the environment it sits within, are as key to me as the visual layer pinned on top. I always reference the Eliel Saarinen quote: "Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan." The larger context for this site is that portion of the web that cares about Monocle, or the topics covered, and designing for that environment includes making elegant URLs – as the tokens by which Monocle.com is referenced. Thus, the pointablity, linkability, permanance and appearance of those URLs and site structures become fundamentally important.

Thus, the URls might not be as clean as they could be – it took a bit of negotiation to get EPIServer, a .net based CMS, to output them – but they’re fairly understandable e.g.:

http://www.monocle.com/sections/affairs/Web-Articles/Christine-Loh/
http://www.monocle.com/sections/design/Web-Articles/Beijing-Olympic-gold-rush/
http://www.monocle.com/sections/business/Magazine-Articles/Spot-the-shopper—Beijing/

i.e. type of section / type of content / title of content

There’s also lots of room for future expansion, which may not be obvious at first, given how tightly massed most of  the pages feel. But it’s always worth building in space for adaptation, even in a controlled system, and it’s there (mainly through horizontal organisation).

Aesthetics and structure
We also wanted it to have the distinctive look and feel that the magazine achieves – hence the use of serifs, black background, grid structure and so on. Thus, it doesn’t appear to follow the standard news website pattern, yet uses the strong grid, careful layout, coherent grouping of elements, consistent navigational elements of a good journalism site. So we think it stands out in a crowded market, but not at the expense of being quickly parsed visually.

The black background was selected not because it ‘looks different’ but mainly as it presents video extremely well. This was all part of lending an almost cinematic feel to the site, of ‘dimming the lights’ to watch the broadcast programmes. (Other sites have since moved to black backgrounds since Monocle.com launched, incl. the New York Times, a point Andrew Blum makes in his article on us. Hulu.com refers to their functionality as ‘dimming the lights’, and makes it more of an instrumental feature. We chose to present the content on black, with greyed text, so that it is naturally luminous against black, rather than necessitating an interface control. It’s has the benefit of a simple approach.)

The following sketches indicate how I wanted the user to be able to pull focus on the films. In the first instance, the video is playing, is the centre of attention, and the rest of the page recedes simply through being rendered in muted tones.

The second mode indicates the double-size player – activated by hitting the double-size icon on the video player controls – where the video expands to the edge of the grid, taking most of the browser window space. This is for almost an TV-like viewing experience, leaning back. (Its equivalent is watching one of the higher quality downloadable versions, linked off the page or available in iTunes, which truly can be watched like TV.)

In the third instance, the viewer switches focus away from the playing video (at the end, hopefully) and looks to the navigation above and below for next steps.

A very simple strategy, but it works I think.

The magazine’s heavily text-based print pieces online are served better on a white background, of course, in terms of readability. So the site has these two distinct areas – black for broadcast; white for text – which both tell you clearly where you are, functionally, but also lend an almost harlequin-like character to your journey around the site, switching between black and white pages where appropriate.

Sketches
Below, some early ‘sketches’ in Photoshop and Omnigraffle. The first was by me, set down as a marker indicating the kind of feel I was after, and actually indicates many things that made it through to the final design: a top section with ‘ambient navigation’ ticker, pull-down menus and roundels for sections, a large video player (too large for current bandwidth constraints as it turned out), navigation and context underneath, and a ‘reinforcing’ navigation scheme along the bottom of the page. The red link colour turned out to be both impractical and unappealing – it was an attempt to hold the link colour consistent across these pages and the print pages, which would have a white background. Trying too hard, in this case, so the gold colour came back in, re-introducing one of the key Monocle colours too. You’ll note the Helvetica Neue for pull-downs, which is has better legibility at smaller size than Plantin on-screen, but we decided to increase the size and switch to Plantin, to bring more of Monocle’s essence into the interface. Still, not a bad layout.

Below, an alternative layout with white background, from around the same time. I can’t actually remember if they were by me or my co-designer Paul Finn. Quite beguiling, but the white wasn’t working for video (see above) and didn’t denote a difference with the print pages enough.

The overall page schematic is relatively simple, but runs through much of the site. The identification (Monocle masthead) and key structural navigation discreetly available via pull-downs at the top. The content pulls focus in the a kind of magnetic sense in the middle. Beneath that is a strata of content-related navigation, which goes sideways (to related content on Monocle.com) and outwards (to external sites which are related). And at the bottom, the site structure is exposed in a layer of navigation which breaks out the contents of those pull-down menus. It’s tucked away at the bottom, but useful once you discover it.

That’s how the broadcast pages are organised (e.g.), as well as other content pages like the Quality of Life Index. On a print page, much of this is tucked left, and so a column on the left caries this hierarchical navigation vertically – links going up, links going sideways, links going out.

These were all developed from wireframes I did for the main 30-40 pages and page components across the primary site. I used Omnigraffle for this, and here’s an example, which combines a hint to layout as well as the key components:

When Adrian Shaughnessy said of the site that "using it is a pleasure" in Design Week, it feels like we cracked a simple, logical but useful navigation.

Print pages
Both pages are optimised to present their own material. The white magazine pages lay out the print articles, long or short, with clarity and space to breathe. We were careful to limit the line length, and tweak the leading, just as with a print publication – but it also draws from established web design layout patterns (of a banner space, pull-down menus for primary sections, contextual navigation associated with content blocks, a footer-based navigation, clear delineation of links etc.) The same navigational elements exist across print and broadcast pages – related items, credits, keywords, locations, external links etc – they’re just logically aligned left on the print pages (given the overall ‘shape’ of a print piece.)

Here’s what a long print piece looks like, converted for web. I decided not to paginate, even for an article of this length, as I think serves no value to the user in the end – it makes it that much more difficult to print, and people know how to scroll. I suspect it’s often done to increase page impressions.

Just enough of the print page sneaks out into the open, in front of the ‘paywall’, while the majority of the print content in an article is subscriber-only. This enables pages to be linked to by anyone, and indexed by search engines to some degree, while providing a value-added service for subscribers. So here’s what a page looks like for non-subscribers, with the subscriber message in the main content area.

Setting titles as graphics certainly adds to the in-house workload, and may hamper search engines and malleability to some extent (we’re exploring Sifr as a replacement in the long run), but is compensated for by the coherent and distinctive experience it brings. The pages are Monocle, at-a-glance. (And augmented by alt and title tags on the images, and title tags for the page repeating the titles, search engines are usually OK.) It was important for many of the key people on the project that it retained its Monocle look-and-feel, rather than edging into Georgia and Arial.

I think of this model for handling the ‘paywall’ as showing the tip of the iceberg. The ‘tip’ contains enough information for clear identification, to be searchable, understandable, be worth linking to for reference. Yet hints at a larger body of content ‘beneath the waterline’ for subscribers. A pretty simple approach, but it seems to work. Obviously, presenting all the content outside of a paywall model would work even better from a search engine and linkability point-of-view, but the business model we’re exploring wouldn’t allow that.

A search for "Caillou boats Rhode Island" should return the right article, despite only the tip of the iceberg being visible to the search engine’s robots.

As well as this, subscribers benefit from exclusive access to some programme too, such as our interviews with contributors to theTällberg Forum in Sweden or a report from the Frieze Art Fair in London. (Unusually, subscription to Monocle costs more than buying off the newsstand, but this is on the basis of this additional online editorial and functionality, as well as speedy delivery of the magazine to your door, before it hits newsstands.)

Sidenote: Personally, I think the jury’s still out on business models in this space, despite the direction that much of the market has headed towards (i.e. giving content away for free, instead supported by advertising. It seems intrinsically dangerous to me to disassociate content from value. Just as Monocle has refused freebies and offers to be a freebie, we wanted to preserve the idea of value in content, whether online or on-page.)

Broadcast pages
The broadcast pages are organised to split two functions – viewing and then browsing. The top half of the page – underneath the consistent navigation and identification elements of the masthead – is all about viewing the programme, all about making it the centre of attention, as in the sketch above. So we only use some text alongside for reference, but otherwise keep that space for the video. Even that text is grey on black, in order to accentuate the video to its left. Readable, but recessive.

Further, you can increase the size of that video to double size. We didn’t want to go full-screen as we knew the quality wouldn’t hold. It simply doubles up to the edge of the grid (960px wide). As this happens, the text drops underneath – further into context space – and the video effectively fills a Macbook screen, meaning you can sit back and watch as if TV:

Here’s the double-size video in near isolation, indicating the relationship with the ident (section, content-type, title):

Below the video are a sequence of of rules, indicating a functional split, and then the contextual elements. These provide further information – external links, credits, versions to download etc. – and a range of navigation options – editorially related directly; related by keyword; related by location etc. The overall page grid is reinforced through all elements, mirroring the pull-downs above.

I wanted to keep these two elements clear of each other, albeit connected, so as not to crowd the video player – again, accentuating that Monocle.com is about broadcast first and foremost.

The player itself is as stripped back as we could make it. We though carefully about what buttons we needed – why have a stop button, if you have play and pause? Why have FF or REW if you can drag the play head anyway. We added duration a while later, as it seemed useful, and the double-size icon is discreet, but works. And that’s it.

As with many things Monocle, I inherited this sensibility of stripping back the design from the magazine/brand’s design team of Richard Spencer Powell and Ken Leung, pulling it back to the absolute core of its functional elements and brand identification. That also lends a spare elegance to the aesthetic of course. Maurus Fraser of Winkreative, upstairs from the Monocle HQ, was also key in the design process here, coming up with many of the elements to the player.

Here’s the video component isolated, indicating its controls and the ident/title above. It’s playing the Travel Top 50 slideshow.

These ideas help when approaching something like a video player. There are clearly existing design patterns here – we know what a play button looks like; that’s a no brainer, so you just design an elegant version – but I think we’ve made a player that works, first and foremost. We actually made the play head slightly larger in a second iteration, to make it feel slightly more malleable, more confident as a control (in version 1, it had just been a small vertical line, as stripped back as we could get it. It was perhaps stripped back too far.) When we double the size of the video, the controls stay the same size, which felt right.

There are other things we could do here – adding embed, and so on – and that’s all for future iteration. Equally Flash is still a bit iffy for robustly handling video control, as even the heavy-duty YouTube interface shows. But it works, and feels part of a coherent vision for Monocle.

(Sidenote: these are all the traditional structural elements. There are other navigational components i.e. search, which admittedly needs a little fine-tuning. It’s the out-of-the-box EPIServer search, and not quite what we had in mind. The tagging I’ve mentioned, and produces quite nice aggregation pages.)

Having established this aesthetic, we’re then able to extend the brand across aggregation pages, like this Affairs index below, and the button styles and layout in our subscriber section:

Off-site
Another part of my BBC strategies that carried over here was the notion that you can’t wait for the audience to come to you; you have to in the places they’re gathering too. This was different to the BBC which, belonging to the British public, had the tricky task of being almost everywhere yet never feeling like it was dominating. But it was equally complex, in that the Monocle brand, during its first few months, had to be quite carefully placed, in order to create the right associations.

So we waited until we had a critical mass of content before entering iTunes, with a podcast of all the programmes. This seemed to work, as the response has been phenomenal with viewership rocketing through the roof and Apple impressed with the quality of our programming. (Incidentally, trying to control all the representation in iTunes is tricky, as Apple insist on making promo graphics themselves.)

You can find links to Monocle in iTunes on every broadcast page (e.g.) or click here.

We partnered with the International Herald Tribune – a good fit in terms of brands, at the time – incorporating their newsfeed into our homepage to lend a rudimentary but useful daily rhythm to the site, syndicating our urban quality of life video content to their website too (which brought thousands of new visitors to Monocle.com in return, as well as being the most popular films on the IHT that month.)

In terms of mobile content, there wasn’t the budget or time to make a separate mobile version in the first year, but the site was built with that platform in mind such that it works on a decent phone. Only Flash remains a problem on phones – even for the iPhone, at time of writing – so for the movies users have to hit the download version, available on every broadcast’s page. (The likes of iPhones can of course subscribe to Monocle in iTunes, which is even easier.) But the pages themselves work reasonably well, given that they’re relatively well-coded. The scenario most likely – using 25/25 on a mobile in a city – was something I tested out 2 weeks ago, sheltering from the 39 degree heat by the banks of the Yarra in Melbourne to find a recommendation for a bar in Sydney.

It worked for my Nokia E65 over 3G, in both HTML and PDF formats.

There’s plenty more in this syndication strategy, across all platforms, but that will emerge over time.

Business
A year in, Tyler Brûlé has started revealing aspects of the business model in presentations and the like. Worth checking out if you get the chance.

"His business model is quite unique as he uses Monocle as a platform for other ventures like special limited edition products that are only available to his subscribers, an affiliated food venture in Tokyo, and also as a means to support exquisite craft-based approaches to image creation in his magazine."

There’s loads more to convey there – expanding on this balance between print and web, the expansion into products, and into retail spaces in cities – but Tyler’s best for all that.

Advertising and sponsorship in particular was something we instinctively decided to reinvent. There was no way we were going to submit to the tyranny of the banner ad – it’s not a smart model, and certainly wouldn’t work with a bespoke premium brand. As with the print brand, where advertising is carefully considered and advertorial is often produced in-house by Monocle themselves, advertising online would be something we’d control rather than be subservient to. So all commercial relationships thus far have been brokered and produced by Monocle. The Rolex clocks which adorned the site at launch immediately set a statement about our approach to advertising (and you can now see conceptually similar clocks on A Small World and the Rolex ads on the BBC non-UK sites, incidentally and perhaps not coincidentally).

The commercial work in the magazine attempted to be witty, useful and appealing, as well as lucrative. And we tried to apply the same rules to our tie-in with HSBC on the Quality of Life Index (reviewed here), the business interviews with UKTI, and the 25/25 destination guides produced with American Express, hook-ups with Lexus and International Herald Tribune over the urban quality of life special, and so on.

Shifting ad agencies away from banner ads was a herculean task, but helped by the magazine’s examples of savvy advertorial or the in-issue manga supplement, which was a vehicle for product placement as well as narrative, as well as clever extensions of the character and style for Cartier, Toto, AmEx etc. Again, the value of a bespoke approach pays dividends, even it it’s a lot more work.

The Monocle merchandise has also proved to be incredibly successful, again brokered between us and a few key brands – Porter for bags and luggage; Skeppshült for bicycles; Commes des Garçon for scent; Fritz Hansen for furniture. All products designed exclusively for Monocle, and sold through Monocle.com. (They’re now being sold in London too, at a Monocle store and Dover Street Market in the case of the scent; plus a co-branded store online in Japan.)

Again, this was an attempt to expand the idea of what such a brand could deliver, and to explore how creatively and seductively we could do that. It’s even inspired field reports on the use of the luggage. The online store could use a little more work, but has proved to be very capable of shifting stock. It’s been an unqualified success, and a tidy little earner. Moving that into physical Monocle retail outlets is beginning to happen, slowly but surely.

Multidisciplinary teams; designing for different elements
I’ve long espoused the benefits of multidisciplinary teams of specialists, who respect each others’ distinct skills and practice as well as overlapping where possible. With Monocle, we have incredibly strong print skillsets in-house, and we’ve added specialist web and broadcast expertise to that. For me, as a design director of sorts, it means traversing conversations from print to broadcast to web, but also letting designers do the detailed work on distinct platforms. So I worked with a freelance web designer, Paul Finn, and a multimedia designer from Winkreative, Maurus Fraser, on many of the web elements, with me supplying broad brushstroke sketches and layouts and them doing the careful detail work. I in turn drew from the incredibly rich print work of Richard Spencer Powell and Ken Leung on the magazine side. We all worked together as an informal team on this, sitting a few feet apart to maximise the creative overlap between these elements. We employed film-maker Adam Mufti to create our title sequences, which nod to our monthly companion, albeit in fairly abstract fashion.

These aspects of the experience design – the title sequences, watermarks, title cards and so on – were as carefully considered as the pages they’re embedded in. This is largely as that’s where the focus is when watching, but also as these programmes will end up on iPods and phones, dislocated from its original context. So they have to carry the brand and provenance with them. I’d like to have done more here – we’ve experimented with dropping QR codes at the end of each film, but the compression meant it was unreliable.The Monocle URL should also be there, never mind a carousel-based suggestion of related content (we now have enough material to warrant that). All things to tidy up. (I’m quite impressed with Current TV‘s end title at the moment, as a reference.)

Equally, we’ve explored a few ways of linking to online content from the print pages. Rather than mess up every story with the equivalent permalink as a footnote, we assume readers will be smart enough to visit Monocle.com, and that the site’s job is to enable them to navigate to the material they want. In the case of editorial that isn’t linked directly to articles, issue 11’s call-out box indicates our neatest thinking thus far:

Once the site had developed a critical mass, we added an online contents page at the front of the book, highlighting a new feature each month. This dedicated page in the magazine has had a positive effect too.

These are all subtle and simple ways of tying the brand together. Our more experimental approach includes the use of QR codes in the back-of-issue manga, linking to sponsors’ websites. This nod to a way forward for sinking digital ‘hooks’ into physical product.

Given strategic work I’d led at the BBC, I was used to thinking about editorial programming across the ‘1 foot, 5 foot, 10 foot’ range i.e. from mobile to laptop to PC. And so I’ve conceived the video player like this, in a sense, doubling up from it’s smallest size (470px to 960px) and then capable of going full-screen in the downloaded mp4 mode.

We encode our programmes twice – once in Flash (using Sorensen Squeeze) for inclusion on the website, both in ‘lean-forward’ mode as embedded on the page, and in ‘lean-back’ mode when the user hits the double-size button; and then again in downloadable .mp4 files, which are encoded at the highest possible quality settings for iPod/iPhone. They then work well on that platform – and other mobile devices that play MPEG4 – but also look great full-screen on an Apple TV-based home entertainment system. We have large Panasonic LCDs in the office, with an Apple TV box, and the programmes we’re distributing via Monocle.com are effectively indistinguishable from TV, in terms of quality, when you’re watching from a few metres away. The title cards we’ve designed work well in this environment – the image, including type looks clean and sharp at each of these levels, and affords the viewer with a range of options.

We’re looking to improve on this – say looping programmes together, full-screen, to create channels for a fully-rendered curated Monocle channel – but it’s an interesting start I think, and important to conceive of your programmes in all these environments, and design accordingly. (Further, we’ve generally got our original film at broadcast standard, so can syndicate Monocle programming to broadcasters.)

So in terms of how to move between these disciplines, I think you have to lead it with a holistic, multidisciplinary perspective – being aware of all platforms, environments, business models and context as possible, with as much distinct technical understanding as you can cram in – but then step back and let specialists do their work, working more as a conductor or arranger (I’ve written about this in terms of media work, but I think it applies to contemporary informational product design too.)

I firmly believe there are differences between graphic designers and interaction designers. Having done this for 13 years or so, I’ve seen the argument go back and forth, but technically, someone who understands full bleeds, chromalins and paper stock is rarely going to also know about Fitts’ Law, URL structures and XML. There are fundamental conceptual differences too (Khoi Vinh has written about this, presumably from a similar perspective at the New York Times). So I think the challenge is to respect individual discipline and practice, whilst binding these teams together harmoniously around a product. Just as you have to bind these teams with software developers too – actually, that axis of code is just as important, if not more so, and that’s where the interaction designer, who ought to be closer to product design or service design, will perform a useful conduit role. And yet products, whether print or digital, should still benefit from the skillset of the graphic designer.

The technical back-end of Monocle.com was built by the agency Rufus Leonard, on the EPIServer platform, with Monocle doing the design and overseeing the production and development. Rufus Leonard arrange hosting and serving of the site for us too. So it’s a tiny in-house production and design capacity, with hosting/serving and technical build outsourced. Different to how I had it at the BBC, which was a largely in-house team of technical creatives – 50 or 60 strong, eventually – with Siemens increasingly picking up distribution, but relatively easy to work with nonetheless. Rufus Leonard proved to be able partners, and worked extremely hard to realise the vision for Monocle too. So kudos to Craig Castledine, Alex Zanich, Imogen Heath, Lincoln Lewis, Richard Simpkins, John Trenwith, Rob Lieberman and several others.

Summing up
Monocle was effectively a blank canvas, which was thrilling. We had a small team and there was a hugely proactive start-up atmosphere around the place. I could engage with the content and commercial sides, as well as the technical and strategic sides, around a title that covered several of my passions, not least architecture, urbanism, design and so on. At many mature organisations it’s difficult to do ‘content’ as well as design and technical. They’re often segregated trades and few large companies can really pursue multidisciplinary working as a primary goal (with some honourable exceptions). But if you’re small enough, those boundaries don’t – can’t – exist.

Yet Monocle was also global in aspiration. It is a production that reaches out into the world for stories, a brand investing in global news and creating bureaux. These are important messages to reinforce. It had an immediately discernible, confident voice, as well as covering a unique set of subjects. It stands for quality. It’s shaken up a marketplace that had got a little lazy about many aspects of its operation, and that was the intention. More than that, with thousands of paying subscribers, it’s become a successful business.

From a design, technical and production perspective, we also tried to make a mark, creating a site – in a matter of months – that was attempted to be distinctive in one of the more crowded markets environments there is. Editorially, online, we have become respected for that attempt to ‘raise the bar’ I noted at the beginning of this piece.

So, despite (or perhaps because of?) being a small, focused start-up with a tight budget to match, I think it’s been a decent year’s work, creating a unified multimedia brand across print and broadcast, using the internet as new medium for both. We’ve done two website iterations in that time, which is fairly speedy for bespoke, non-automated content, whilst producing a range of programming that can’t be seen anywhere else. We’ve tried to create the same sense of high quality across both the editorial choices and the design and production of the environment for those programmes. It’s been critically recognised as such, and has garnered a terrific response from users. For me, in a set-up role on this project, it’s now a good time to move on, but I wish the team well in wherever they take it next.