Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

British Vogue Gets Top Marks for UX & Branding

By Shelly Wilson on Wednesday 15th of May 2013

As part of a recent review of online consumer magazines, British Vogue was singled out as top in class. Here’s a quick look at the findings as well as how a focus on typography put the fashion mag on top.

British Vogue on desktop

It’s funny. When it comes to design, typography and layout, often we look to the world of print and traditional publishers for examples of ‘getting it right’. After all, for many of the challenges we face in the web design world, they’ve already been there and done that. But while so many of these brands excel in print, a recent study suggests that many are struggling, even failing, to provide their readers with quality experiences online.

The research was commissioned by Monotype’s Brand Perfect initiative earlier this year and looked at the top 100 online consumer publications in the US, UK and Germany. Researchers observed that publishers have been slow to provide rich and contextually appropriate cross-platform experiences.

Only two out of the 100 titles in the study were responsive sites: British Vogue (UK) and Quartz (US). A modest 25% were optimized for tablet displays, with the majority defaulting to automatically scaled-down versions of their desktop sites (despite the fact that mobile smart devices like tablets and phones are predicted to outsell desktop computers two-to-one this year). And although many of the titles offered a mobile app version of their site, many of these were a replica of their print publication.

Winning by designing for the reader

But it wasn’t bad news for everyone. A panel of experts assembled by Brand Perfect selected British Vogue as the title offering the best cross-platform experience to readers.

British Vogue on iPhone display

British Vogue on iPad

“This feels like the most modern of the sites we’ve looked at today, in terms of understanding browser technology and its layout,” said Alex Ossman, panel member, Digital Creative & User Experience Consultant, and the creative lead on the BBC iPlayer. “Nice big font sizes; good amount of white space; good design grid.”

The panelists also admired Vogue’s design clarity, use of web fonts and HTML5, its adaptive design approach and its strong brand personality.

“It’s definitely the winner for me. And it’s also refreshing to see British Vogue have enough confidence in its brand to keep advertising clear of the homepage, which is perhaps analogous with a magazine’s front cover.”

The team at British Vogue attributes their site’s success to a number of factors: making typography and content the top priority throughout the process, questioning norms, finding new and better ways to work together, and frequent testing and iteration.

“[Before this redesign], our article templates were like countless other sites’,” says Gareth Williams, Lead Information Architect at Condé Nast Digital UK. We [had] site navigation on top, assuming if someone selected this article, the first thing they would want is full access to the whole site. The usual right column held advertising, boxes for most popular, what’s being shared on Facebook, photo section highlights, etc. We figured that people were most attracted to the words ‘most popular’ and ‘most shared’, and, therefore, the content underneath these. Our research showed that these long held industry truths were not true today.”

Designers at British Vogue describe their design process and the importance of type to their brand.

By adopting a content-first approach and getting rid of the distracting elements many publishing sites still hold on to, they were able to improve the way readers explore content.

“We threw away the idea that an article page, list page, gallery and homepage are all separate entities and aimed to build an experience that focuses on the user’s overall journey.”

Careful consideration of the typography and heaps of experimentation allowed them to establish and convey a strong visual brand identity not just on desktop, but across platforms and viewports.

“Typography and layout are essential to getting a brand’s voice right,” says Kat Windley, the team’s Lead Designer. “And in this case, being able to take full advantage of every screen size and density to ensure things like the images were as big and high-quality as possible and that the typography was rendered with real fonts instead of grainy images was crucial. Key to this was being able to design with web fonts in the browser from the beginning to test combinations and to continually evolve complimenting styles.”

According to Pete Miller, the team’s Head of Product Development, relying less on Photoshop and more on prototypes and rapid iteration improved how closely the team worked together as well as the quality of information they based decisions on.

“Our key on this project was throwing away the Photoshop-first approach and letting information architects, designers and developers work together to verify their concepts – building prototypes along the way,” he explains. “Then we continued that integrated partnership throughout the build process, allowing ourselves to keep evolving concepts as we found what was working and what wasn’t.

The goal is to now keep iterating in an intelligent and more frequent way, instead of focusing on large-scale and infrequent redesigns.”

If you’d like to hear more about Condé Nast Digital UK’s design process, check out their article on their content-first approach with Wired UK. Or have a look at our post Ditching the Shoehorn for tips on how to move published content from replica editions to web-friendly, multi-platform formats and still get typography that works everywhere.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus