About a year ago, the editorial and design teams at Fast Company and my team of designers, developers and researchers from Adobe’s Experience Design group spent several days in a corner conference room on the 29th floor of 7 World Trade Center. From there, we could see across to the then nearly complete One WTC Tower, down over the Ground Zero monuments, and beyond where the Hudson and East Rivers meet. It was a breathtaking view, to be sure, but even more inspiring to us were the in-depth discussions we were having with our partners from Fast Company: Bob Safian (Editor-in-Chief), Noah Robischon (Executive Editor), Florian Bachleda (Creative Director), and numerous other key members of their teams.
Fast Company and Adobe design teams in an early brainstorm meeting. From left to right: Kenji Arakawa (Senior Design Manager, Adobe), Florian Bachleda, (Creative Director, Fast Company), Jeremy Clark (Director of Experience Design, Adobe), Noah Robischon (Executive Editor, Fast Company), Anne Marie O’Keefe (Consumer Marketing Director, Fast Company), Yohko Kelley (Senior Design Lead, Adobe), Ming-En Cho (Senior Developer, Adobe), Rob Adams (Senior Researcher)
The discussion centered around what defined a “magazine” in this modern age of digital consumption where readers are increasingly engaging with brands on the web, on mobile devices, at all times of day, with increasing frequency and with broadly different expectations. While revenue from digital divisions of many publishers are growing, what has becoming increasingly clear is that the web traffic is often very fleeting. Average visit lengths across the web are measured in seconds instead of minutes, a vast majority of traffic comes from search engines or links from email newsletters, and repeat visitors per month can be scarce. On the other hand, print and digital subscribers are highly engaged and valuable to publishers, but surprisingly don’t tend to consume as much daily content on the web.
Adobe team conferring during a meeting break. From left to right: Jeremy Clark, Rob Adams, Amanda McCoy Bast (Senior Designer), Yohko Kelley, Kenji Arakawa, Mathieu Badimon (Designer), Johannes Eckert (Senior Design Lead)
Fast Company’s web content includes several prominent “sub-networks” (as we referred to them) such as Co.Design, Co.Create, Co.Exist. Across this family of digital properties, there are upwards of 40-50 articles published each day, many by the same writers and contributors as the content that is published periodically in the magazine. Yet many of Fast Company’s most loyal print readers may rarely see this content. Is that because they don’t think to visit the Fast Company website each day? Is it that they prefer a leisurely, monthly reading experience as opposed to reading articles more frequently? Is it that they appreciate the curated story arch in the magazine instead of the random nature of a typical blog feed? And the converse was also a challenge: How do we help capture the attention of those readers who may get sent a link to an article from a friend, on a news aggregator website or in their social feeds, and help them to discover additional stories they may be interested in? How do we extend the value of the magazine brand to casual readers and turn them into more loyal followers?
1 World Trade Center (left) and 7 World Trade Center (right), where Fast Company’s offices are located.
With a clean slate, we set out to define a new mobile-first reading experience for Fast Company together. Our goal was to blend the best of both the web and print and ensure that readers could immediately be immersed in Fast Company content without having to first make a purchase. We also wanted readers to be able to get a quick hit of a few selected stories to read on the go, give them the option to follow just the digital networks they cared about and access all of the content that is normally found in the print magazine — including longer feature stories — but in a mobile-friendly fashion.
We arrived at a content model where the stories or articles themselves were the atomic element instead of an “issue.” We created logical ways of grouping stories together to provide more flexibility for the Fast Company editorial team and enjoyment to their readers.
Fast Company and Adobe teams reviewing interface and content layout design progress. From left to right: Bob Newman (freelance Design Director for Fast Company), Christian Gaffney (Designer, Fast Company), Noah Robischon, Kenji Arakawa, Florian Bachleda, Nayong Park (Designer, Adobe), Stephen Lim (Senior Designer, Adobe)
We also created an interface that got out of the way so the reader could simply focus on reading, a way for users to quickly and intuitively navigate the content hierarchy through the use of common gestures and a way to encourage readers to easily discover content that they’d be interested in. And finally, we wanted the experience to scale gracefully between phone and tablet — not simply scaling down articles intended for print — but leveraging responsive design principles to adapt the articles for the targeted screen size.
Over the course of the year, there were countless in-person meetings, exchanges of ideas and designs online, and many rounds of working prototypes to test our interface concepts. In true partnership, we pushed each other to make sure the application we were designing truly met our collective aspirations.
Tour
Now that the app is live, let’s take a closer look at the new app and some of the features found within. For the sake of keeping the images small, I’ve used screenshots from the iPhone version of the app, but the iPad version functions identically.
Overview
There are three top-level sections within the Fast Company app:
- Our Picks:
The five top stories for the day, as selected by Fast Company’s editors
- Latest Stories:
The entire feed of stories from Fast Company’s various properties
- Magazine:
The articles that comprise of this month’s magazine, as well as back issues
Upon launching the application, the first section a user sees is called “Our Picks.” If the user swipes from right to left, they will switch to the “Latest Stories” section. If they swipe again, they’ll end up in the “Magazine” section where they’ll see the latest cover.
Alternatively, it is possible to tap the icon in the upper left of the screen (represented by three lines, or also affectionately known as “the hamburger”) to bring up a drawer from the left that allows for quick access to any section as well as application settings:
From any of the three sections, one can drill down into articles and then traverse back up to the top level by either using the breadcrumb (context-sensitive “back”) button at the top, or by using a left-bezel swipe gesture (dragging their finger from the left edge of the screen into the content):
Article-centric
This might be a good point to discuss how articles work within the application. As mentioned earlier, one of the major goals of this new publishing platform was to make the article the atomic element rather than an entire “issue.” In the Fast Company app, most all of the articles available to you are displayed in the “Latest Stories” section, including many of the articles in a given magazine issue as well as all of the networks (Co.Design, Co.Exist, etc.). The “Magazine” section and the “Our Picks” sections are a filtered, visually different way of viewing a collection of stories. In the case of “Our Picks” it displays five stories per day with large images, and in the “Magazine” section it is laid out much like a table of contents. This provides the Fast Company editors with different ways to present content to readers, depending on how they like to consume it.
Our Picks
“Our Picks” is a curated selection of five top stories for the day from the editors of Fast Company. As we intended this section to be highly visual and quick to navigate through, each of the five stories is represented as a full-screen card that one can simply drag up to expose the next card underneath.
Beyond the first five cards, you’ll notice the date flips back in time and exposes the top stories from the previous day. For those who don’t want to sift through all 50 or so articles a day, this provides a shortcut to things they might be most interested in.
Stories
If you tap on a story card, you’ll be taken one level down to the article. We’ve strived to provide a very focused reading experience here – free of superfluous interface elements and distracting links. We know the real estate on mobile screens is precious, and we wanted the content to be the only thing displayed (aside from the iOS status bar at the top so that you can still see what time it is, and what your signal and batter levels are at). In fact, when you start to scroll down through an article, we even remove the top menu bar with the breadcrumb navigation and share buttons. Not to worry – if you want to expose the menu to share an article for instance, you can do so by simply scrolling back up a tad.
Speaking of sharing, the Fast Company app works natively with the built-in iOS sharing solution, which allows you to send a link to an article through text message, email (as shown below), social networks, or even AirDrop it to your desktop or another iOS device.
At the end of each article, we bring up the top menu bar automatically, and we also offer a visual shortcut to the next article in the collection you were viewing (in this case, the next “Our Picks” article) so that if you’re wanting to continue reading articles in succession, you can do so without having to go up and back down the content hierarchy (or as we refer to it, “hub-and-spoke navigation”). But you don’t need to scroll all the way down to get to the next story: just as you can use a lateral swipe to switch between the three top level sections, you can use swipe gestures to navigate between all of the stories within a collection (in this case again, for “Our Picks”). This allows for another speedy way to leaf through articles almost like you might in the printed form, albeit with the distinct benefit of only having to leaf through one “page” per article, since all articles scroll vertically like a web page would.
Latest Stories
As mentioned earlier, the “Latest Stories” section contains stories from all of Fast Company’s sources – some 40-50 articles on a given day. We’ve provided an easy way to filter the feed if the reader wishes, by tapping the button in the top menu. This allows one to select only the story feeds that are of interest:
As one would expect, tapping on any thumbnail or headline takes you down to the article level. From here, just as with the “Our Picks” section, you can use the breadcrumb or left bezel swipe to go back up to the “Latest Stories” parent level, or you can swipe between articles to navigate through them directly.
One thing to point out here is that Fast Company displays an icon at the article thumbnail level that lets you know if there’s an image gallery or a video featured within the article. In the example below you can see the icon in the lower right on the “Latest Stories” feed. Once you tap the article, you can then tap the main image (also featuring a special icon) to go into a full-screen viewing experience for the gallery or video content.
Magazine
The last section to highlight in this tour is the “Magazine” section. Magazine editors and designers go to great lengths each month (or each week, for some publications) to put together a highly curated, well thought-out selection of articles. Often there’s a major theme or story arch to an issue: for instance, the March 2015 issue of Fast Company is focused on highlighting what their editors have identified as the world’s most innovative companies. Not only will the feature articles be dedicated to this topic, but much of the “front-of-book” and smaller articles will also be focused on innovation in general. So while most all of this content will also trickle into the “Latest Stories” section over time, the “Magazine” section is the first place where it will all be presented together.
A visual Table of Contents (TOC) displays a representation of the cover (simplified as needed for smaller screens), feature stories, and then the rest of the articles in the issue. As one would expect, tapping a thumbnail or headline takes you to the article level and you can navigate back up as you do in other sections, or you can swipe to continue through the magazine in the order it is presented in the TOC.
The Fast Company app also allows users to go back in time and view older issues by tapping the “Archive” button in the top menu. This takes one to a cover selector, where you can scroll down and tap a previous issue’s cover to view its TOC and navigate to content.
Check it Out
We’re really excited about what we’ve built in collaboration with our partners at Fast Company, and can’t wait to see how it is received by the broader publishing industry. Adobe is certainly leveraging all that we’ve learned from this close engagement with Fast Company to drive the direction of Adobe’s digital publishing platform, which we will start to deliver on later this year. But by no means do we feel that our work is finished. We have a laundry list of additional features we’d like to add. Be sure to visit the “Send Feedback” link in the application menu drawer and in Settings, to let Fast Company know what you think!
Read our announcement of Fast Company’s app here.
Download the Fast Company app now.
If you’re interested in hearing more from Adobe on the new product that will be released in summer 2015, sign up here.