When we began working with the Philadelphia Inquirer on a different kind of news experience, we landed pretty quickly on the idea of having a news feed, leveraging some of the paradigms of social media platforms (Facebook, Twitter, Instagram).

The idea was to focus on discoverability. You could customize which types of stories you were most interested in seeing (like maybe you didn't care about sports but did care a lot about a particular neighborhood). That "category" (which would effectively be the overline) could also be clicked into to see recent stories of that type as well. Different types of stories would have different visual treatments (many of which are visible on the Upstatement Case Study).

And you could click into articles to expand them, with some pretty outstanding (if nightmarish to get working) page transition animations, and from there either return to where you were in the feed, or the bottom of the article would have its own new feed of related articles.

If you look at the Case Study, it says that we delivered a Design System, and that's true, but it was actually one of three things that we delievered.

• Part 1 was a React Component Library. This featured the structure for the different "cards" and full articles and all of the parts that made them work.
• Part 2 was the Design System itself. For this, I used Catalog (which I loved so much more than Storybook but unfortunately appears to be quite defunct these days).

The Design System included code snippets, tips for usage, and documentation on the properties that each component had. There was also a "playground" of sorts in it that pulled things together. There (as shown in the third image above), you had a live card that you could customize. Change the author, text, image, category, style, and so on, completely altering it from what it had been in real time.

This is just the prelude to Part 3, though.

Part 3 was a prototype - demonstrating not only how the feed would work for users, but also showing off an experimental editor experience that I had been creating. A lot of WYSIWYG editors do their best to approximate how the experience will be, but largely because of their needs to be flexible, they don't go very deep into a singular experience.

I'm a firm believer that Gutenberg is the best thing that WordPress has ever done but I also question the extent to which something like a Block Editor really is a WYSIWYG editing experience, because it doesn't actually incorporate your design elements. Gutenberg doens't care if your headers are bright blue, like mine are. It doesn't care what font you want to display, and so on. (Is there a better acronym for this kind of case that I can't think of?)

With this project, I sought to create an actual WYSIWYG experience, that would be inherently intuitive to understand and use. If you wanted to assign a card to a category, you could hashtag it. If you wanted to change the author, you'd click their name. If you wanted to attach an image, you'd just drag and drop one.

One of the big things, too, is if you started to type a paragraph, it would treat it as a single card with a paragraph (see the "3 million more households" on the first or second image above), but once you entered a linebreak, it would covert what's befor the linebreak into the headline, as seen in the last image above.

It ended up being too much of a lift for the time to have them to move off of the publishing platform they were using, but it was a really fun and interesting thing to play with, and to have an approach where the content was completely shaping the tool.