Boat Int. 2015

Bringing the world’s biggest yachting brand to mobile

Overview

Boat International is a product of Boat International Media, which produces the world’s most luxurious superyacht publications and sells over 1.2 million magazines a year worldwide. I was tasked with providing a responsive HTML solution to their digital editions and improving on their current PDF product. This included making sure the content was able to respond to different screen sizes, like mobile and tablet, and be published across multiple channels.

They faced two major problems with their legacy solution. One being their inability to publish to mobile devices without introducing more production costs to their workflow—a technical debt that would only continue to increase as the device list grows—and, two, that each issue would reach up to around 500mb in file size when uploaded as an in-app purchase. They felt that this would be unacceptable for mobile users with capped data plans, as they might not always be connected to wifi when downloading new issues, in addition to the very limited capacity for apps on their devices.

Publishing the content as HTML solved both of these problems but the client was still worried about the compromises it would have to make to their product. Ultimately, my role with the brand was to work with their creative team in order to build responsive components while retaining the strong sense of luxury found in superyachting. Case study below.

Boat International App

Case Study

Living the luxury life isn’t exactly easy. When we get a cabin cruiser, we need to aim for a sailing yacht. After the sailing yacht, we need to aim for a superyacht. After that—a megayacht. Tough choices have to be made because, you know, in this world bigger is better.

Creating luxury products for small screens isn’t easy either. It’s essential we aim for the best otherwise we’re not justifying our position in the market. How does that saying go again? Oh yeah—more money, more problems. When the new look Boat International went on sale last year, the world’s leading superyacht magazine, it was constructed by some of the most talented writers and photographers in the business. Each page delivering style and sophistication to the reader. The yachts featured in the magazine weren’t bad either.

Yes, you probably guessed it–it looks fantastic–and that’s exactly how they wanted their digital product to look too. Our problem, though, is how exactly do we preserve this luxury appeal for mobile screens?

Boat International Magazine

Photographs of the magazine courtesy of Show Media, London

Design vs Workflow

I began with analysing the needs of the two most important stakeholders. Boat International readers expect a flawless reading experience, which serves their dream of sailing blue waters off the Corsican coast. That’s what we’re selling at the end of the day—champagne and sun at the stern, overlooking the bronze young things by the beach. The publishers, on the other hand, require a workflow solution so that their team can build digital issues on a tight deadline and still make time for those finishing touches. Working weekends or after hours sucks. So let’s not make that an option for the editorial team. Our job as designers is to make sure both sides are satisfied with the solution.

By using the digital publishing platform Contentment, I was able to provide Boat International with a workflow that let’s them design and publish their issue once without the need to build separate versions. That includes iOS, Android and the web for any device or orientation. The Contentment Platform uses the latest web technology to build publications, allowing the content to behave in a responsive manner, which perfectly bridges the gap between design and workflow. Everyone wins, perfect.

Boat International App
Boat International App

Initial work on the Boat International app container for iOS

Boat International App

Examples of design components used to build pages

Don’t Forget to Breathe

With most projects, I begin by picking out key patterns in the design that regularly occur throughout the publication. Design components like headers, title styles and box-outs can all be broken down into reusable layouts and inserted into a page where required. We’ll sign off on default styles for each component and alternative styles to use on the fly. Since the content is the king here, let it decide the layout and not the other way round because page templates are rigid—and that means putting square pegs into round holes. Let’s not do that.

Instead, let’s give the content freedom to respond to different screens sizes by using a grid layout and CSS for decorative elements. So often we become too focused on print layouts and positioning that we forget that we’re designing for a dynamic product. We’re in a world where we have to think about various kinds of people and the devices they use. I read things on phones, Boat International subscribers read things on phones and, unless you’ve been living under a rock, you probably read things on phones too.

Print designers—try not to gasp. The challenge here is to create a luxury product and what’s more luxury on mobile devices than spacing? Let’s give our modular layouts room to breathe and the opportunity to hold their own on the page. This project isn’t about cramming everything above a mythical fold; it’s about the reading experience, and we want to make sure Mr. Big Wig is happy spending his precious minutes reading this magazine.

Boat International App
Boat International App
Boat International App
Boat International App

Screenshots from a proof of concept app on iOS

Megayachts, Mega Whistles

Even though there is less control over the output, we can still maintain the luxury feel of the magazine by keeping each aspect of the design consistent. Colours, spacing, ratios—all of the modular elements were prepared with great attention to detail. The baseline is still a thing on the web. Let’s not forget the product is on a platform that’s much more dynamic than print too. We can add popovers, CSS animations, image galleries and more. When was the last time you watched a video in a newspaper? Never. But you can on a screen.

Most of us love the bells and whistles, looking at you advertisers, but it’s vital we maintain the elegance of the brand. That’s why for Boat International you will only see subtle animations that do not distract the reader’s flow and popovers used only to add to the story that the user is following. Sometimes we need to let things breathe rather than suffocating the content with features. An easy mistake but it’s what separates the superyachts from the megayachts. Let the content do the talking.

The new Boat International magazine is still under production and will be available soon on major app stores. Cover photograph by Tatiana Zhukova from Unsplash.