The Brief

---

Our aim was to create a template that could be used across all bands and we started with GQ. Some of our objectives being to increase mobile traffic, enhance the sites gallery experience and retain consistent engagement through infinitely scrolling articles. We were also changing the way that the editorial team were uploading content, by running the new site on a new platform and creating a custom CMS. I was responsible for all visual design as well as helping with the UX functionality.

Research & Testing

---

Studies were undertaken by our US titles, which revealed interesting information that many users viewed their publications on mobile and tablet devices. With a mobile first approach to design becoming increasingly popular, and with stats revealing that our mobile traffic was surprisingly under achieving we knew we had to explore this further. A user-testing workshop was created to examine how users interacted with our 4 main titles, Vogue, Wired, Glamour and GQ. We noticed that a lot of people consume information on the go. They preferred short form articles, and the ability to easily scroll and swipe to consume more content. They wanted a better gallery experience allowing them to view thumbnails and skip to images. Editorial content was highly trusted and valued. From this study we began looking at the mobile functionality of our current websites and improving areas that were not performing well.

The Concept

---

A lot of users discover our sites through external links and therefore land directly in an article. We therefore wanted to keep the user engaged, with recommendations to new content or by infinitely scrolling into the next article or gallery. A lot of content GQ publish is made up of galleries, whether they are products or shows. Being able to switch between a list and thumbnail view was therefore a good feature. We wanted the homepage to feel discoverable and somewhere that users could easily see news. We had the idea to create different sections that could sit anywhere on the page. This would allow mobile content to start with either a feature story or a list of stories. It also meant that editors could choose to reposition content and rename sections as they wish, either by recent content or categories. We wanted ads to feel less intrusive, and feel part of the content flow. With this information to hand I began mocking up wireframes. I used tools such as InVision to easily show stakeholders how they could navigate around the website, and also allow the editors to see if this new approach would work well with the content they write. I explored many different options, from the size of panels on the homepage to the responsive layouts of articles and galleries.

Visual Design

---

As with nearly all projects, I liaise with and rely on the support of the brands, both editorially and from a creative perspective. With the recent update of the GQ magazine application it was important that there was visual consistency between the two. I was working closely with the GQ Art Director to choose web fonts that were in keeping with the magazine. I use Typecast as a way to test out fonts and display different options. It was important that fonts worked seamlessly across all devises, at different sizes and on both black and white backgrounds. I wanted to keep the site clean, simple and easy to navigate. Colour was used to signify sections so that users were able to associate certain colours with certain topics.

My main difficulty lay with the homepage. If editors were able to reposition content, it meant that every panel had to work in several different situations. This involved carefully applying spacing to certain panels and thinking about how the use of dark and light backgrounds would work if paired next to one another. I also had to think about how full width responsive adverts would sit next to panels, without them being intrusive to the design. I wanted there to be a clear distinction between article and gallery content, especially with articles infinitely scrolling straight into a gallery. I achieved this simply with colour, associating article content with a white background and galleries with a black background.

There was a lot of consideration with iconography and also the use of social icons. It was important when viewing an image in a gallery that it could be expanded, viewed in both list and thumbnail view and easily shared. Icons were used on the homepage to highlight gallery and video content. Designing a mobile first concept definitely made me take a less is more approach, really simplifying the design, and only displaying the necessary information in a clear and concise way. I worked very closely with our in-house development team, refining the designs in the later stages of the project by supplying CSS changes via CodePen prototypes.

This is a live project; please visit www.gq-magazine.co.uk to explore the new website.

---

Next project

---