2018 - PRESENT
Apple News launched in 2016. When it started the publishing industry was skeptical of yet another unproven platform. Early partners faced significant obstacles publishing their content and many questioned if this would generate any money at all.
Hearst required a solution that would scale and accommodate an unlimited number of brands publishing hundreds of articles a day.
As design lead I designed, prototyped, and launched the custom Apple News integration for Hearst Digital Media's internal platform and CMS.
Working with development I mapped out the platform's CSS styling to a proprietary Apple News Format JSON. These layouts can ingest articles, video, photos, listicles, galleries, recipes, and e-commerce.
Today this automated system syndicates hundreds of stories a day for every magazine in the portfolio. This new revenue stream requires no additional work from design, engineering, or editorial.
ROLES AND RESPONSIBILITIES
Design Systems / Apple News JSON
Wireframes & Prototyping
Styling and Front End Development
Visual QA on device (all layouts, all devices)
Apple News
Oprah Daily, Car and Driver, Runners World
Elle: Watch Bad Bunny’s Puerto Rico Performance
Popular Mechanics: Scientists May Have Found a Hidden Universe
Apple News+
Cosmopolitan Digital Issue Archive
Bicycling Can Indoor Riding Actually be Fun?
Delish: Step by Step Recipes (Cooking view on iPhone/iPad only)
10 Years of Apple News
Nine of the top 100 stories featured on Ten Years of Apple News are magazines I brought onto the platform!
Explore the full list of 100 unforgettable reads
PROCESS
Treating this as a product and systems challenge rather than one-off design project was crucial in making this a success. I started by mapping out workflow and how the content was ingested into the CMS, and from there could be processed onto the site, republished to another site with its own styling, or sent out to our partners for syndication.
To work on a platform level across brands we needed to separate content structure from visual presentation: Editorial creates semantic content (headline, subhead, body, image, caption), the CMS structures that content with metadata, and then different presentation layers apply appropriate styling for each context.
Apple News is based on proprietary JSON written in Apple News Format. One layout defines the presentation for iPhone, iPad, and macOS. The format supports rich media. As the format matured I would map out new features and styling to our templates and design system.
The visual treatment (typography scale, color palette, image aspect ratios) developed on platform and used in Custom Feeds could be reused and applied programmatically based on each magazine's design tokens.
Since we were reusing design tokens and patterns we could onboard new brands in minutes rather than months. This meant that after the intial work and effort, onboarding new magazines onto Apple News was mostly hands off
Apple News+ includes premium content including an archive of the print editions of each magazine. Recently they've released a cooking mode for step-by-step recipe presentation. This feature is available on Delish and Good Housekeeping
