Call us on +44 870 947 0297

Chat to us about digital problem solving, a workshop or to get a sense of direction

Book a free slot

Dawson Andrews

an independent digital product firm


Monday 01 January 1900

Print to Pixels

Creating a digital revenue vehicle for print magazine Lagom

Lagom is a lifestyle magazine connecting a global community of like-minded creatives who care about thoughtful design, independent travel, and a balanced approach to life. Read how in three months we brought Lagom online, created new revenue models through interwoven sponsor content, side-stepped Adblocker and maintained the class and finesse of Lagom through to the final aesthetic.

  • Expertise

    Design, Interaction

  • Platform

    Web, Mobile, Craft CMS

  • Deliverables

    Strategy, Concept, UI, UX

Lagom was founded in 2014 by Bristol-based husband-and-wife team Elliot Jay Stocks and Samantha Stocks. The magazine content is created by a team of contributors from around the world.


At its heart, Lagom is a print publication in pursuit of connecting a global community of like-minded creatives who care about thoughtful design, independent travel and a balanced approach to life. The magazine was a regular feature of the Dawson Andrews coffee table for a long time prior to working with Elliot and Samantha.

My relationship with print + web: each is an antidote to the other.

Avatar

Elliott Jay Stocks
Co-editor & Creative Director, Lagom

Come meet us

Book a slot for a scoping workshop.

They typically take 2-4 hours depending on the project complexity.

Or, if you’re a little shy we regularly host meet-ups. Keep an eye on our twitter for updates

Book your session

Designing Lagom for the web

On regular projects, we find ourselves either auditing existing designs to find clusters of patterns to begin to formulate a design system or creating one from scratch with limited brand assets. Lagom already had a design system that worked for print and allowed Elliot to design pages freely without having to worry about lines of code, the stability of certain CSS properties and how high-quality assets may impact page performance. One of our goals was to maintain this freedom for Elliot and Samantha so they can focus on editorial design instead of technical concerns.

The building blocks for this were set in place at the beginning of the project. In the spirit of Photoshop Layer Tennis Elliot and Jordan entered a phase of rapid collaboration where they sent Sketch files back and forth shaping the foundations of a design system for the digital incarnation of Lagom. This process seen the pair deeply exploring the physical edition, extrapolating typography patterns and behaviors in specific contexts, defining high-level grid systems and finding components that are fit for purpose across print and digital mediums.

Unlocking new revenues for an offline publication

Two years into the print publication (October 2016), Elliot started to consider alternative revenue models. As a steadfast publication celebrating lifestyle design the company wanted to remain true to their authentic brand while driving engagement and subscriptions. It was time to move from a landing site to an engagement platform.
Objectives;

  • Increase publication subscriptions
  • Unlock paid sponsorship through tracked sales
  • Grow online engagement


Elliot had to go from ‘buy one printed magazine and read 30% that’s relevant to you’, to selling a digital version of it. We decided to go step further by breaking it into individual articles with interwoven sponsored content with the likes of Bang and Olufsen. Rather than having one product per publication (the current issue) he now had a product per content piece. Elliot's biggest design challenge would be adapting his beautifully designed print publication for the web alongside the changing business model. The goal of the website was to not only bring Lagom online but reach a new digital audience and allow them to purchase the publication.

This is the Lagom website before DA got involved

Turf

Jordan and Andrew (before the birth of Dawson Andrews) were working on a venture called Turf which was a marketplace for handcrafted goods. Elliot got wind of the project and quite liked the aesthetic Jordan had directed for Turf. It was later used as a basis for some of the early aesthetic conversations with Dawson Andrews for Lagom’s website.

The Turf homepage design which inspired Lagoms aesthetic

Migrating Typefaces with Erik Spiekermann

One of the first problems we encountered was that Suitcase Type’s Tabac (the type superfamily used in the print edition) wasn’t available for use on the web… yet. It was due for public release later in the year. After pulling some strings we were granted exclusive access to Tabac from its designer Tomáš Brousil and started typesetting Lagom’s digital typographic hierarchy.

Maintaining optimal legibility and reading comfort was a key element of this process as the typographic decisions in the print edition of Lagom were guided and reviewed by the experienced, critical eye of Erik Spiekermann. We also found ourselves experimenting with adventurous new CSS layout techniques in ways that challenged the block layout nature of the web. Our process for such experiments was “concept now, worry about implementation later” - which we sometimes call reasoning from magic internally.

An editorial design on the web always faces difficult questions. Two of the standout questions from our whiteboard sessions were:

“How can you maintain creativity and originality at scale?” and “How do you create a system around it without letting the audience in on the secret?`" Explore Tabac

A bespoke CMS Made to Measure

The traditional CMS model was not going to work for a print-editor/designer like Elliot. The value of the Lagom brand is the design of the content just as much as it is the content itself. We needed something that could embrace flexible design, adjust for fit, add new features and replace underperforming features. We knew we couldn’t hand Elliot a one-size-fits-all template for an article, he needed to be able to craft this himself, just as he would an editorial piece.

We chose Craft CMS for the simplicity and flexibility that a small startup needs. Contentful CMS deserves a notable mention in our decision-making process but upon consideration, we felt Craft was a better choice for the editorial team at Lagom. We chose it for its modular functionality that allowed Elliot and Samantha to craft their own editorial design by giving them the right tools and flexibility. Craft has a refreshing approach that allowed us to give Lagom a modular setup, in-part allowing Elliot to build his own CMS within a CMS.


Working backwards from a solution we found that in order to empower editors and engage readers with an exciting editorial design, we needed to have a bank of pre-made rules rather than templates, in order to keep the magic of the rules out of sight, we needed to avoid having them appear in predictable patterns by having a CMS that wouldn’t enforce a set order of content fields, and finally in order to get as close to freeform editorial design as possible we needed to let Elliot and Samantha add content fields and rules easily on the fly employing the content rules as and when they needed them.

Dropping images into the Craft CMS admin

Design Systems

“Designers of these systems will need to move beyond designs that don’t change once they’re handed over. Articles are made of many elements with different visual treatments: headlines, ledes, body text, photos, pull quotes—instead of providing a specific template, designers could supply ranges and options for different elements, along with guidelines on using them."
—Allen Tan, Interactive Designer at New York Times Read more
Early layout wireframes based on the magazine

Building Creative Freedom Within the CMS

Long after we launched Lagom Jordan noticed something interesting after logging in to the admin section to fix a routine bug. As we built the article sections to allow Elliot and Samantha to stack blocks of content and layout rules, we often thought we would return to the image grid component as it felt like we hadn’t explored as many layout possibilities as we wanted to or had time for in this phase of the project. The image grid component allowed for five different types of image layout: a full-width image, an image with a left aligned caption, an image with a right aligned caption, a two column grid and a three column grid.

Jordan called the team over to his desk to show them how Elliot and Samantha had stacked adjacent image grid fields together to come up with new layouts from within the CMS.

We recognised the importance of building a CMS that worked for its content editors rather than the content editors working for the CMS. Leveraging Craft’s powerful image transformations and optimisation capabilities meant that all media uploaded to the platform was optimised for the web in the background. By deferring optimisation and cropping tasks to the CMS, we saved Elliot and Samantha from routine admin tasks freeing up more of their time to work on higher-value tasks for the magazine.

Revolutionary Moment

"It was a revelatory moment for me. Even though the solution we built was quite flexible, I thought I had an idea of the limitations of the rules we put in place. I thought I knew where the invisible tracks behind the grid were laid and what was possible. But I started noticing more complex and ambitious content pieces being published and I started thinking “How did they do that?” on more than one occasion.
It turned out that by stacking the image grids we built in the CMS, Elliot and Samantha found a way of taking a content rule that allowed for five different combinations to 5(n) meaning they were designing new layout rules from within. I realised at that point that we came pretty close to what Allen Tan was talking about. I guess that’s what happens when you give rules to creative people…”
—Jordan Moore, Director of Design at Dawson Andrews

Building Efficient Content Production Tools

Part of the magazine experience is stumbling upon content that you didn’t necessarily intend on finding. For example, if you notice a cover story you want to read on page 60 you might read a few pieces on your way to finding it as the chances of you opening the magazine exactly on page 60 are slim.

The web is more precise and more deliberate than that. If you see a story you want to read on the web, you navigate to it instantly and there is little room for discovery in between.

We worked on a T-shaped navigation model that would move people sideways through the product by offering meaningful, hand-selected related content rather than algorithm-driven related content. Because of the deliberate nature of navigation on the web, we chose the opposite path of the print publication’s discovery before content and favoured discovery after content.

The Issues section of the website had layout flexibility similar to the Articles section with the additional benefit of being able to be reused and repurposed throughout the experience. As issue sales are the primary financial driver behind Lagom the end goal is to push physical copies of the magazine in a tasteful, non-intrusive way (see the Partnerships & Ethical Advertising) section for similar challenges).

Whenever Elliot and Samantha are about to launch a new issue of the magazine, they populate a new entry in the issues channel which does a number of things behind the scenes.

Once the new issue entry is opened up for the public to view, the issue number in the navigation automatically increments, it displays the new cover image that has been cropped and optimised for file size and retina displays, a summary card is created with social media-friendly Meta Tags containing the issue image and description and the issue can be cross-referenced with any article published. This reuse of content allows for more efficient content production and consistent brand voice.

Partnerships & Ethical Advertising

2017 was the year Adblock went mainstream. As digital publishers pushed more aggressively with crude “Around the web” plugins and paywall models, the readers pushed back with ad blocking.

It’s a discussion that divides the design community. One side believes advertising models are a necessary evil in keeping the lights on for the publisher, the other side claims it has gone too far. Some publishers have even tried paywalling ad blockers and asking the reader to make an exception on this occasion in some sort of sad digital showdown between both parties.

We knew there had to be a better way. Working together with Elliot and once again looking to print publications for inspiration, we found a partnership model that is non-intrusive, respectful of the reader and sidesteps the traditional digital advertising game which has become a battlefield between publishers and Adblock-equipped readers. One of the caveats of this new ethical model is that you need to know your audience rather than letting the algorithms decide.

A current Lagom article design

With a proven record of successful independent publications, it’s safe to say Elliot and Samantha know their audience. They created the “Lagom ×” partnership programme where Elliot and Samantha personally select partners who they personally want to write about and showcase with the added benefit of knowing their readers are going to be interested in the partners too. Each partner receives a detailed, explorative writeup like any other article on Lagom so it is non-intrusive and respectful of the reader. The test Elliot and Samantha set themselves is if they were to remove the partnership label from the article, would it still be something they would be happy to write about and does it stand up to the same editorial standards as the rest of the content in the publication?

We’ve enjoyed working with Elliot and Samantha watching their publication go from strength to strength as they tackle challenges like digital transformation and ethical advertising. We’re proud to stand shoulder to shoulder with them facing these challenges head-on as one big project team.

Talk to us: Talk everything from Type to CMS
Reach out to us to discuss your typographic challenges or needs for a CMS…Book a slot for a scoping workshop.