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

Lagom Logo

Creating a unique digital presence for a lifestyle magazine

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.

Lagom on the web and print

Dawson Andrews builds and designs digital products from offices in Belfast and Sydney.


About Lagom

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.

Elliot Jay Stocks

Elliot Jay Stocks

Co-editor & creative director, Lagom

Elliot is the co-editor and creative director of lifestyle magazine Lagom, the Creative Director of coffee roaster Colonna, the founder of typography magazine- turned-book 8 Faces. He was previously the Creative Director of Adobe Typekit.

Samantha Stocks

Samantha Stocks

Co-editor & editorial director, Lagom

Samantha is the co-editor and editorial director of Lagom, as well as being a freelance journalist and copywriter.

In The Beginning

In October 2016 Elliot started to rethink Lagom’s online presence as a platform to drive engagement and subscriptions. He enlisted some help to implement his vision and he was following a style he had seen before a year earlier.

Back in 2015, Jordan (now Director of Design at Dawson Andrews) and Elliot started winking at each other via Twitter as all good design relationships usually start. Jordan and Andrew, (MD of Dawson Andrews) were working on a venture called Turf which was a marketplace.

Elliot quite liked the aesthetic Jordan had directed for Turf and it was used as a basis for some of the early aesthetic conversations for Lagom’s website via a relationship with the newly formed studio—Dawson Andrews.

Twitter Love 💕

How it all began on Twitter

Changing a Business Model; Print to Digital

Elliot has gone from ‘buy one printed magazine and read 30% that’s relevant to you’, to selling a digital version of it. Now he’s gone a step further by breaking it into individual articles with interwoven sponsored content with the likes of Bang and Olufsen.

Elliot's biggest design challenge would be adapting his beautifully designed print publication for the web alongside a 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.


Project Scope

  • Target new readers through deep and meaningful online articles
  • Simple platform to purchase print editions
  • Push purchase of the publication throughout the site
  • Push products through articles

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 create one from scratch or 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 behaviours in specific contexts, defining high-level grid systems and finding components that are fit for purpose across print and digital mediums.

Tabac in print
Discussing Tabac on Twitter

Developing Tabac

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. 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 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.

“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

Image Grids

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 (see fig 1 below) 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.

“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

Connect with Jordan on LinkedIn

Content Reuse

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.

Craft CMS Features

Related content in Craft CMS

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 audience. 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. 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.

Visit Lagom
Talk To Us

Talk everything from Type to CMS

Reach out to us to discuss your typographic challenges or needs for a CMS…

Teardown

Fixing ManUtd.com

Why the world's biggest football club is missing key digital product opportunities and partying like it's 1999

Interview series

Product People; an interview series

Join us as we dive deep into the world's top digital product teams and the people behind them