GQ

HEAD OF PRODUCT & DESIGN

When I began at GQ in 2015, digital was, surprisingly, relatively new to the brand and it’s business. GQ.com was a 5M unique website, was hosted on over 7 different content management systems, and had a site that was in dire need of a design and technology overhaul (so things could really only go up). 

In my time there, I’ve lead a wide range of exciting and challenging projects including a CMS migration, a carefully phased out and iterative approach to a massive overhaul of our digital presence, and have introduced and tested many new experiences. My areas of focus have included the core editorial experience, utility and service around our style and grooming content, performance and optimization, as well as advertising. GQ's audience has grown in my time here from a 5M unique website to 15M uniques at its peak.

As the Head of Product & Design, my goal is to always marry business and brand goals with user needs by constantly testing new ideas, talking with users and understanding data.

Some of the more important consumer facing projects I’ve worked on include a photo gallery redesign, category and homepage redesigns focused on style advice and products recommendations, a major overhaul to our newsletter product and launched new brands such as GQ Best Stuff, GQ Recommends, GQ Style, and GQ Late Night.

Each project below was worked closely on with Hugo Broche, GQ’s digital design lead, engineering, audience development, as well as our editorial and sales team. Take a look below to learn more.

gq-home-maingq-home-main

A New GQ

Before digging into any site redesigning, we developed a loose style guide, made to represent what GQ should represent, visually, across all mediums - including print, digital, video, social, and events.

By creating a style guide and agreeing to a “look and feel” early on in the design process, this would allow for easier decision making in the design process and provide consistency across all the various teams and departments across GQ and Condé Nast. These bold and solid colors along alongside a clean typeface would be applied to all elements within the interface and on all GQ digital properties.

gq-branded-colorsgq-branded-colors
gq-ui-brandinggq-ui-branding
gq-social-cardsgq-social-cards

GQ Newsletter Subscriber Growth Strategy

A big goal for GQ starting in late 2015 was to increase our newsletter distribution list, as well as to create various newsletters that are more target towards certain users.

gq-newsletter-layoutgq-newsletter-layout

MORE ABOUT THE PROJECT

Our initiatives at GQ were aligned with the rest of Condé Nast brands. What we built was rolled out to not just GQ, but distributed across all Condé Nast brands, including The New Yorker, Vogue, Glamour, and WIRED.

The goals were the following:

Bring our newsletter system into our internal CMS, distributing the code and the product to all other Condé Nast brands and allowing for a more seamless and faster production process than before.

Create a flexible, lightweight newsletter template that could be reused for different GQ newsletters as well as different brands across Condé. The goal was to keep each template flexible and provide options for different use cases. GQ created multiple templates and databases to help grow our newsletter audience. In addition to our ‘GQ Daily’ and ‘GQ Weekly’, the others created were ‘GQ Late Night’, ‘GQ Best Stuff’, ‘GQ Style’ and ‘GQ Fitness Tips’.

Develop several variations of newsletter sign up forms throughout the website. These forms (which included an landing page inline form, an article riser, and a standalone subscribe and unsubscribe page) would be templated and flexible in a way that would allow us to to easily spin off new newsletter templates.

gq-newsletter-risergq-newsletter-riser

Best Stuff Newsletter

Our Best Stuff Newsletter was by far our most unique. The goal for this newsletter was to not just drive website traffic, but to provide our fashion & style audience with a weekly digest of products we’ve tested and truly love. This newsletter was also a small, but important first piece in growing the Best Stuff brand identity, and testing new ideas in terms or products and content.

gq-newsletter-best-stuffgq-newsletter-best-stuff

THE RESULTS

A lot of learnings about newsletter growth came out of this project. On a positive note, bringing the newsletter creation process from our old system into our new CMS saved us over 45 minutes a day in production time (almost 1,750 hours a year). Our newsletters were smaller in size, ADA compliant, and worked great across all major devices, browsers and email clients. 

One thing we learned was that it’s not easy to grow a newsletter subscription base from scratch. On top of that, it’s not easy to get new users to subscribe to our existing newsletters. While we haven’t done so just yet, a big goal in 2018 is to test new ideas for make the sign up phase simpler and entice users to sign up.

More insights, learnings, and results to come soon.

Photo Gallery Redesign

GQ's photo gallery was (and is) one of our most major consumer facing products. The gallery was previously not designed with users or mobile in mind. The design was made to force as many ad impressions in as possible, leaving the user with a painful experience to get from start-to-finish (for those who even finished)

Below you could find designs and results of the new gallery (live version here) that went through several design iterations, prototyped, and tested thoroughly with real GQ users.

 

gq-gallery-maingq-gallery-main
gq-gallery-mobilegq-gallery-mobile

THE RESULTS

Below are various insights into 3 of our main KPIs for this project.

The overall average completion rate for the new vertical gallery saw an increase of 80%. Both mobile and desktop saw a +100% increase from our old gallery compared to the new one.

Our end-of-gallery recirculation unit had an average of a 45% click-through rate, up from just 3% on our old galleries.

The new version of our gallery saw an 8% increase in total sales, 11% increase in average order value and a 14% increase in average revenue generated.



We also introduced a new sponsor content unit that has been sold several times by GQ sales team.

sitemapsitemap

Channels & Category Page Redesign

Our Channels & Category page redesign had many goals.

1. Improve the experience and display of content on these pages.
2. Create a flexible system of reusable components that could be easily used anywehre within GQ.com.
3. Clean up and simplify the way to classify our content.
4. Bring an element of utility and service to our Style and Grooming pages, two highly trafficked pages.

Other areas of focus included commerce, discovery of GQ’s franchises and video series, increase in click-through to galleries, articles and other landing pages, SEO, engineering efficiency, editorial and production efficiency, and performance. 

See below for more or check out the final designs at GQ’s style, grooming, travel, culture and fitness sections.

gq-categories-uigq-categories-ui

THE RESULTS

Our category pages just launched in late November. While we’ve already seen an increase in daily visits to our Style landing page, and we knew that these pages would be successful in terms of our goals for the projects, its too early to measure success in key business metrics including engagement and revenue. Stay tuned for more results!

See even more from this project below.

gq-categories-products-lineupgq-categories-products-lineup
gq-categories-products-maingq-categories-products-main

PRODUCT RECOMMENDATION

GQ knows that our loyal audience comes back for fashion, style, and grooming advice and recommendation. Without making users go into an article or gallery, we’ve opted to present product recommendations on it’s respected sections. All these products are endorsed and tested by our team of editors.

gq-categories-franchisesgq-categories-franchises

GQ FRANCHISES, VIDEO SERIES & COLLECTIONS

GQ has a number of well-known franchises and video series that users come back for – Keith Olberman’s The Closer, GQ What to Wear Today, New Arrivals, Grooming Awards, Netflix Binge Guide, Men of the Year, Gift Guides, Comedy Issue and more. Prior to this project, there was no way to discover or find these series and find the latest from within. In the new designs, content from our latest franchises, which tend to be our most performant content, is front and center.

CATEGORY PICKER

Prior to the redesign, most users who did end up on these pages either navigated away or ended up using our ‘search’ to find what they were looking for. Most of these search results were fashion and style related – sneakers, shoes, watches, suits, socks hair, and more. With these insights, we added a very visual picker (sub-navigation) at the top, which allowed us to place in as many items as we want in an order that made sense for our user.