CASE STUDY

MyGQ

ROLE: Product Director, UX/UI Designer, Lead Engineer
CATEGORIES: Design, Development, Strategy, Apps

 

OVERVIEW
See a suit you want to remember or a new pair of sunglasses for summer? MyGQ is a digital collection application that allows readers of GQ to save articles / pages from the digital magazine. Readers can make collections and even shop products from inside of the magazine itself. It opened new opportunities for advertising to create custom collections for readers to browse offering targeted marketing directly to GQ readers.

Read about the launch here

 

THE BRIEF
My team at Studio Mercury was approached to create a web app that would work inside of the GQ magazine app. The ask was to create a product that would add value to advertisers and increase reader engagement in the app.

PROJECT GOALS

  1. Increase reader engagement time in the app
  2. Add value to advertisers of GQ
  3. Allow saving of GQ content (advertising and editorial)
  4. Make it easy for the reader to interact with
  5. It has to be easy for the GQ team to create maintain.
wireframe-grid-2

RESEARCH
We started researching all of the parameters of the project: what does a reader want to save, why would the save it, how a user would interact with the content they saved, what technology is available behind the scenes in the app. 

ADDING VALUE FOR ADVERTISERS

GQ wanted to create a system that would give advertisers new opportunities for reaching their readers. Their research found that GQ readers were just as engaged in advertisement pages as they were in editorial pages. We thought through multiple options for advertisers and created multiple opportunities for advertisers to reach GQ readers.

TECHNOLOGY 

We reviewed the authentication methods for users of the app and were able to allow a single-sign on experience with MyGQ. Additionally, we figured out the limitations of the container app and how we could achieve the functionality of saving pages from the magazine.

icons-web

KEEP IT PLAYFUL
The GQ brand is playful but sophisticated. We didn't want the interface to be stuffy and minimal. Instead we opted for icons that were playful yet smart.

SHARE. SHOP. SAVE
The final product was a seamless integration into the digital magazine. The web app kept the same playful design of the magazine but included helpful features allowing readers to share individual pages / products from the magazine, directly shop products from an advertisement, and save individual pages / products into their own personal collection.

SAVE WHAT YOU LOVE

Readers could tap the MyGQ icon from any page of the magazine. For editorial content, they could save any page of the article. For advertisements, they could save the ad or specific products with the advertisement.

key-features-2
SAVE WHAT YOU LOVE

Readers could tap the MyGQ icon from any page of the magazine. For editorial content, they could save any page of the article. For advertisements, they could save the ad or specific products with the advertisement.

key-features-01
ORGANIZE YOUR FAVORITES

Readers could organize their saved pages / products into customizable collections. For example, a reader could group a collection of suits for referencing later. We made creating groups simple: either tapping the "Add Group" button or just drag a pin on-top of another to start the process of creating a collection. 

ADDED VALUE FOR ADVERTISERS

Advertisers were given the option to associate products with their advertisements in the magazine. When a reader tapped the MyGQ icon they could directly shop the products in the ad or save the specific products into their collection.

key-features-4
ADDED VALUE FOR ADVERTISERS

Advertisers were given the option to associate products with their advertisements in the magazine. When a reader tapped the MyGQ icon they could directly shop the products in the ad or save the specific products into their collection.

key-features-3
WE THOUGHT OF EVERYTHING — FROM SIGN IN TO SIGN OUT

Sign in was simple, we were able to tap into the existing user account created in the app which allowed for single sign-on. Since MyGQ was also a web app, we also allowed a reader to sign into any other iPad and their saved items would automatically follow them.

NOT YOUR AVERAGE TEAR SHEET 

Saved pages are not just pretty images. Readers can see which issue the page came from and tap to open the issue (and go back to that page). Additionally, readers can add notes to a page, share it on social media, or if an advertiser provided one - shop the look in the page.

key-features-5
NOT YOUR AVERAGE TEAR SHEET 

Saved pages are not just pretty images. Readers can see which issue the page came from and tap to open the issue (and go back to that page). Additionally, readers can add notes to a page, share it on social media, or if an advertiser provided one - shop the look in the page.

EASY TO UPDATE. EASY TO MAINTAIN

The GQ team needed an easy way to add and maintain data associated with each page from each issue of the magazine. Additionally, there needed to be an easy interface for them to add advertising meta-data (like associated products) to each page of the magazine. We created a web portal for them maintain the MyGQ platform every month. 

MYGQ-backend-5

KEEPING TRACK OF MAGAZINE METADATA
Saved pages of the magazine needed to be associated with an individual issue of GQ. We created a platform for them to keep track of issue metadata like cover image, productID, publish date. 

MYGQ-backend-1

KEEPING TRACK OF PAGES
Every page could be saved in the MyGQ platform. There could be hundreds of pages in an issue so we created an easy way for the GQ team to upload a whole issue into the MyGQ platform and it would parse and create all of the individual pages, metadata, and images in the platform.

MYGQ-backend-4

INTEGRATING WITH EXISTING SYSTEMS
To make the MyGQ portal easier on the GQ team, we integrated it with all of the different platforms of the digital magazine. One example is that we were able to automatically pull all of the issue metadata from Adobe's servers. This saved the GQ team time every month.

MYGQ-backend-3

EDITING INDIVIDUAL PAGES
Just like issue metadata, we created an automated system to pull metadata for each page of the magazine. The GQ team only had to add metadata for sharing / purchasing urls or associate individual products with an advertisement every month.

THE RESULTS
After its launch, GQ saw an increase in reader engagement and an increase in time spent in the app. Additionally, advertisers were excited and GQ saw an increase in advertising revenue by adding value for individual advertisers of the magazine.

Case Studies

Gather JournalProject type

Martha StewartProject type

West ElmProject type

MyGQProject type

Garden & GunProject type

Sotheby'sProject type

NARS CosmeticsProject type

Selected WorkProject type

ABOUT ME
I’m Kirk Mueller – designer, builder, and previous partner and director of digital at Studio Mercury.

At Studio Mercury, I produced comprehensive award winning brand identities, campaigns, and digital products that spanned multiple industries and platforms. As co-founder and director of digital at Studio Mercury, I oversaw the creation of digital identities, translation of brands throughout their digital projects, and manages all aspects of projects from start to finish between multiple stakeholders, designers, and development teams. I wrote, pitched, and presented proposals that allowed our studio to compete and win projects with $500k budges. I lead both creative and development teams of between 5-15 people, all while working on multiple projects (usually between 8-12 concurrently). I lead branding and strategy sessions for all of our new clients. I’m a passionate leader with success in building, mobilizing, and developing cross-functional teams of strategists, designers, programmers, directors and photographers.

While pursuing my Masters at the Rhode Island School of Design (RISD), I developed a healthy skepticism of the role of technology in our lives. He believes the integration of technology should be purposeful and well thought out and applies this ethos to my work.

Sometimes when I’m tired of looking at the screen, I’ll hand-print wallpaper or hack Nintendo cartridges. Working with my hands helps fuel my inner maker.

I currently live and work in New York City.

kirk-profile

You can reach me at: [email protected]
LinkedIn or Instagram.

You can reach me at: [email protected]
LinkedIn or Instagram.

kirk-profile

You can reach me at: [email protected]
LinkedIn or Instagram.

You can reach me at: [email protected]
LinkedIn or Instagram.

You can reach me at: [email protected]
LinkedIn or Instagram.