WIRED

300-5px.png
 

WIRED is all about the adventure of what is to come, illuminating how technology is changing every aspect of our lives. For 25 years, its editors have told stories that are rigorous, surprising, and necessary, helping readers to navigate new ways of thinking and make new connections.

 

my role

As Design Director at WIRED I oversaw all digital platforms for the magazine, including the website, digital promotions, magazine, features, daily news stories, and social media. It was my job to make sure that every pixel that WIRED represented was perfect, up to the standards of our design-obsessed editor in chief.

To best explain my role as Design Director this case study is presented as a day in the life at the WIRED San Francisco offices. 

 

Editorial

Art Direction

UX strategy

ui design

design

Project Management

marketing

social

 

a day in the life:


6am:
Before getting into office I would check Wired.com in the morning to make sure there aren’t any bugs or major noticeable issues. I would sign in to Slack and skim my inbox for any technical, social, PR, or pressing marketing issues.

9-10am: The mornings are centered around status meetings and catching up on the previous day. The immediate focus is on the news for the day to be posted on the website, and then outlining the day’s work around the print magazine or other endeavors.

Morning meetings included:

  • Print meeting at 10:00 Monday, Wednesday, Friday to stay current on print status

  • Attend the Daily Web meeting at 10:15am

  • Additional print meetings in the afternoons when reviewing FOB stories, issue features, or other long tail pieces or art commissions


10:15am:
In the Daily Web Meeting section editors and other WIRED team leads go through the new topics and potential content for that day, the next day, and upcoming big events. Individual stories are pitched and modified on the fly, and follow ups recommended for more complex pieces requiring additional research or art. As Design Director, this meeting is an opportunity to talk about upcoming design needs for these daily stories (such as custom charts, custom diagrams, or art) or upcoming launches (such as the digital advertising wallpapers that WIRED pioneered, updates to article templates, or custom features).


11:00am:
The design team worked in lock step with the engineers to stay ahead of issue and daily story needs on the site. In these meetings we would also discuss metrics, user feedback, and the technical roadmap for improving the website.

Other topics for discussion included corporate Condé Nast initiatives and how best to work those into the WIRED design without compromising the individuality of the magazine.

On Tuesdays, Tech team discusses tech issues from the past week and updates. This was largely based on user feedback. WIRED has a long and proud history of catering to a vocal and highly technical audience that has very little patience for gimmicks or bugs. There was very little room for error on the digital side.

On Thursdays, the Analytics team joins the daily web meetings and discusses data for that week (what’s working, what isn’t) and other issues. The newsroom was very data-driven and these analytics were helpful in figuring out the right cadence of what types of stories, what design elements were doing well, and what trends we were seeing from users.


11:45am:
I am finally able to get my day started. I typically use this time to catch up with my team in person and see how they are doing with their workload. I used Google Docs to track all digital, magazine, social, and marketing assignments.


Snapshot of the workload I managed:

Each line item in the calendar below is an individual story at various states of the design, approval, or editorial process. While there are tools that help project manage, I found that this low-tech, but highly manual method was the best for WIRED because this calendar needed to be easily updated by me at a moment’s notice. I made weekly reports for the Creative Director, Head of Editorial, and Editor and Chief.

sketch

invision

wordpress

Google Suite

illustrator

photoshop

indd

k2

trello

 

 
 

12:30pm: Lunch at the WIRED kitchen. I tried to minimize how many desk lunches I had because the people at WIRED are some of the smartest and funniest people I’ve ever had the pleasure of working with.

1:30pm: Back to work. This time was typically reserved for working on features, creating additional assets and components and working with the Photo Department to design and approve the 25-30 daily graphics that accompanied the daily news posts.

3:00pm: This was a good time to check the website homepage and sections for overall design aesthetic. This meant checking for clashing art on the homepage, or identifying stories that could be made stronger by better art, additional graphics, or different formatting. This was also a good time to check to make sure the day’s stories are visually up to WIRED brand.

3:30pm:
Social media teams typically had afternoon brainstorm and approval sessions for the latest round of Apple News, Twitter, Instagram, Facebook , and Snapchat creative.

4:00pm: Work time. Check on my team and provide feedback on work in progress, and approvals wherever possible.

6:00pm: I would visit with the homepage editors to make sure the next day’s promotions were arted and scheduled appropriately. This meant delegating to the designers and overseeing the components that went into these wallpapers for mobile, tablet, and desktop are set up appropriately. Providing and getting further stakeholder approvals for the headlines, and then distributing a review link to gain approvals. The launch times for these items were typically 3:00am PST.

7:00pm: Time to go home. I would keep my Slack signed on to catch any website crashes or bugs that would need to be fixed remotely by me and/or the engineering team.

Rinse. Repeat.

 
300-3px.png
 

Select Features

 

Mobile Feature

Design cohesion and a seamless user experience was expected across mobile, tablet, and desktop experiences.

 
 
 
300-3px.png
 

digital responsibilities


Magazine responsibilities

At monthly magazine scoping meeting the digital editorial staff decides what type of story will get what type of treatment on Wired.com. Templates and resources are assigned at this point, as well as extra assets and effort is assessed here. These feature due dates are agreed on by the entire team including PR and then I work with my team to execute the dozens of design items. We employed a three-round review approach for every piece on Wired.com: Alpha links, Beta links, and Release Candidate reviews before every due date. Additional rounds included Copy Edit, then Go Live QA.

Each WIRED issue has front of book items like Alpha or Gearhead that are typically batched and completed in one grouping. This is done for efficiency.

Upon completion, the technical designer will notify me and other WIRED stakeholders that this process is complete. I used a Trello board to track these individual stories because it made it easy to collaborate between design, editorial, copy edit, and engineers. Each story is cleared of action items and from there, editors decide what section to run these FOB stories on the website. We then schedule them accordingly.
 

Web responsibilities:

  • Making sure the WIRED design standard is being upheld throughout the day and with the publishing of news stories.

  • Arting stories via original illustrations or modifying stock photos

  • Data and infographics for upcoming stories

  • Commissioning works for upcoming features and stories


UX responsibilities

  • Tech issues and usability issues that arise

  • Designing and executing new WIRED features

 
300-3px.png
 

Magazine Feature Process

 
300-3px.png
 

Wallpaper Examples

Wallpapers are an editorial and marketing feature that are native to WIRED. It takes the immersive and prominent display of advertising takeovers on front pages of websites and merges it with the editorial world by using the website to promote features and stories. The wallpapers at WIRED were created and implemented by my team, thanks to a collaborative effort with the engineers that modified our CMS to include the ability to upload various graphics and layouts.

As Design Director these marketing placements were at my discretion. I would make suggestions for what made great wallpaper promotions in scoping meetings and the daily web meeting.

 
 
Donald Glover WIRED Wallpaper
WIRED Glide Wallpaper
 
300-3px.png
 

social + marketing


Snapchat, Instagram, Twitter
Social promotion is key to getting visibility on existing and trending WIRED stories. It is also key part of the brand strategy to acquire new generations of readers.

This meant our magazine and web stories were repackaged for Instagram, Snapchat editions (we were one of the first brands to be a publisher on the platform), Twitter, and Apple News.

In addition to individual posts, the cover assets and bios were updated monthly to include new art. This provided global digital visual cohesion from the user perspective.


Apple News Promotion assets
Each month the editorial team selected stories for promotion in Apple News. These promotional asset are ad units that are sent to Apple for possible selection in a carousel promoting stories from the latest issue of the magazine.

1 World Trade Center Promo materials

Depending on the buzz worthiness of a new launch, WIRED may get space in 1 WTC (Condé Nast HQ) to promote the issue and the teams.

  • These deliverables include:

    • 1. Digital Banners on other Condé digital properties

    • 2. Elevator animations and displays

    • 3. Cafe TV Screen takeovers

We utilized these such promotions for the WIRED POTUS issue and the Food Issue featuring David Chang.

 

Snapchat Magazine Edition Sample

 
300-3px.png
 

Illustrations for Web Pieces

Olga+Montserrat,+twelveofour,+for+WIRED-1.jpg
Olga+Montserrat+for+WIRED-1.gif
Olga+Montserrat+for+WIRED-3.jpg
Olga+Montserrat+GIF+for+WIRED.gif
Olga+Montserrat+for+WIRED-4.jpg
Olga+Montserrat,+twelveofour+for+WIRED.jpg
Olga+Montserrat,+twelveofour+for+WIRED-1.jpg
Olga+Montserrat+for+WIRED-1.jpg
Olga+Montserrat+for+WIRED-2.jpg
Olga+Montserrat+for+WIRED.jpg
Olga+Montserrat,+twelveofour,+for+WIRED.jpg
300-5px.png