CONDE NAST DIGITAL STOREFRONT

As Condé Nast began to implement the production of digital versions of their magazines, Consumer Marketing identified a need to have a means to give readers a way to buy and subscribe to these new digital magazines. This was primarily to be in front of the coming digital magazine wave now that the iPad was available. Adobe had a bare bones ‘out of the box’ storefront, but was lacking several basic features. Working with developers and Consumer Marketing, I was tasked with designing and helping implement the Condé Nast custom digital storefront.

Initial storefront map

Grid sketchs

Business Goals

Consumer Marketing wanted to target three groups of readers with the storefront:

Print Authenticators. These were print subscribers who could gain access to digital versions of their subscriptions.

Users who wanted to subscribe to just the digital versions

Users who wanted to purchase single digital issues

The New Yorker was chosen to be the launch partner. This was for several reasons: The brand had always been an early adopter to new avenues of content distribution, their audience was older, so it was a good test ground in terms of the UX, they had a good deal of digital back issues, and they also had book and special issue content. Because of their large amount of content, developing the storefront for them would guarantee that it would work for all other brands as well.

Though Consumer Marketing had very narrow business requirements, The head of my group wanted to build it with a 'blue sky' approach: This was to be the central hub where users would log in and could read and watch content; buy subscriptions, download branded books, search for specific articles, and create their own curated collections of articles and videos. Originally, I would have the help of two designers and a front end and back end developer, and the 1st stage of the project, which was to include the design of the storefront, and building it for 12 brands, was scheduled to be approximately 18 months. It would be for only the iPad (iOS) since that was a majority of our users’ platforms. The three stakeholders would be Consumer Marketing, developers, and myself, representing the Editorial Developement Group.

Even though Conde Nast was developing the custom storefront ourselves, Adobe became somewhat of a silent partner in this project. Adobe developed the Digital Publishing System using Conde as one of their launch partners, so we had a good working relationship with them. This was important because we needed to have input when Adobe was developing new releases of their APIs. There was constant back and forth communication between us and Adobe during this development, especially when the programming phase began. Tech decided that the storefront would be written in Javascript rather than the native Object C. The downside to this is that the storefront would be slower, but the upside is that it could be easily and cheaply developed and modified later on by our tech team.

DESIGNS AND UX

Because our launch partner (The New Yorker) I needed to figure out a way to make the covers big enough to see, yet small enough so that the user wouldn't have to scroll through a ton of screens. The solution was to make 2 screens.

Working on a grid system, each page was 3 columns wide. The first page would have a cover which was 2 columns wide, and a few small covers in the 3rd column. The second page would have 9 covers. This would utilize the swipe motion, which by now was becoming second nature due to the iPads popularity. Because the issues were listed in chronological order, once a new issue came out, all other issues would be pushed back to the next spot. I began to come up with various layouts that could handle a mix of digital magazines, video, books, and special issues. This showed that we could handle all types of content, and that the storefront would become a repository of all The New Yorker brand extensions. The tabs at the bottom would be used to call up specific types of content. We also thought about having a sponsor logo up top to monetize the storefront. This design was presented to Consumer Marketing and was given the green light to begin development.

After running the grid options past developers, it was pointed out that having a dynamic categorizing of content was not going to be possible within the existing Adobe API's and to the fact that the storefront was being . Even though Conde Nast was developing this, there were asks we were putting forth that just weren't achievable: search capabilities, video, and from our dev standpoint, we wanted to keep the templates at a minimum.

To that end, we settled on 3 templates: 1 page with three, including 1 large current issue cover. All these had issue descriptions. The 2nd screen would have 6, with issue descriptions, and the 3rd would have 9 covers without descriptions, as would all screens after that. This way it could guaranteed that the storefront code and design could deal with a large amount of back issues without breaking. Design-wise, my group leader was interested in dividing space without lines, so space was divided using shadows, which would become a standard throughout all the brands' storefronts.

Also by this time, Consumer Marketing started to narrow down their business requirements. They wanted editors to have the ability to promote certain timely issues or special issues, so we added a Featured tab. This would be a 3 cover page, but content would be chosen by editors. We also added a Subscribe tab, and an All Access, for people who subscribed to the print version and were entitled to the digital editions as well.

Because Consumer Marketing wanted the ability to cross promote brands within the storefront, announce special subscription discounts, or promote featured content, so I created a space at the top for upset banners that could be rotated in.

The storefront needed to be able to 3 types of readers, we needed 3 different sign-up paths. The added complication came in the form of our subscription fulfillment company, CDS. Because our subscriptions were managed by a third party, we didn't have control over the signup path, so we had to figure out how to make it as easy as possible within the CDS framework. After looking at several signup screens at various websites, I explored making buttons big and the instructions very conversational and light, as opposed to technical and robotic. One inspiration was Barak Obama's voter signup screens in the 2008 campaign. Voter registration seems very complex and long, but this site broke it down, so that each screen had a small amount of info that needed to be input. The result was a more screens but also much simpler. I applied that principle to the subscriber signup screens. In order to set the casual tone, I commissioned illustrations from Christoph Neimann who does work for the New Yorker on a regular basis. Each illustration would depict the CTA of that specific screen (what is your address, what is your subscription number etc). Before launch, Consumer Marketing decided to scrap the illustrations and go with a more formal import form, which could work within the CDS frame.

DEVELOPMENT & LAUNCH

Once the subscriber flow was hammered out, the designs were cut up and sent to dev, where I worked with a team of 3 to get The New Yorker up and running. Because The New Yorker is The New Yorker, they wanted as much room as possible for their metadata and issue decriptions (will no month abbreviations). So I came up with a character count matrix that would be sent to them showing all the issue positions in the layout and how many characters would be allowed. This was helpful for when we rolled out the storefront to the rest of the brands. At the same time, the dev team was constantly in a back and forth with Adobe, trying to get code to work with their APIs, at a speed that was acceptable. To make things more complex, Apple gave us a release date for the iPad 2. This tablet had a higher resolution, so all the assets had to be resized, and reshipped to dev. Meanwhile, the production department for the group was setting up systems that would be built into The New Yorker's production flow. This flow would add the generating of cover images, as well as getting metadata/issue descriptions from the magazine that would be input into the storefront.

Once The New Yorker launched, and the bugs were worked out, it took me another 18 months to roll out the storefronts for the other 11 brands. Some of the time lag was due to new API's being released and dev having to rewrite around them, and us asking for certain functionality to be included in new updates. Overall, the project was considered a success in that it offered readers a relatively easy way to access the digital editions, and resulted in much needed revenue. I saw a few other publishing houses set up similar storefront styles in the months to come. 3 years later, Adobe came out with a new generic storefront, which Conde Nast migrated to as Adobe would be responsible for the maintenance and upkeep along with the code updates. All in all, it was a great project which exposed me to developers, business stakeholders, and UX, and strong personalities.