As you likely know, FOMO (Fear Of Missing Out) refers to "anxiety that an exciting or interesting event may currently be happening elsewhere.” -Oxford Dictionary
Twitter's fast-paced, chronological timeline is nearly impossible to consume yet contains valuable content. What if there was a way to extract the valuable nuggets of Twitter without requiring such high costs of time and attention?
Daily news leaderboard
2015 - Lead product designer partnered with lead eng
Vision
FOMO allows users to glean as much value for as little cost as possible.
This Product Vision informed every stage of the design process, from the mechanical system, to the product communication, to the overall experience which incorporates interfaces, interactions, expectations and results.
- Insight: Twitter offers great value but requires a lot of work to get it
- Solution: Obtain interest-specific data sets and extract high-value content
- Design: Leaderboard of Link Previews incorporating relevant metadata
Insight
Loved by few and ignored by many, Twitter has matured to saturate an addressable market of around 100M+ DAU’s globally. A far cry from Facebook’s 1B+ daily actives, Twitter holds a uniquely valuable (though notoriously difficult to monetize) place in the market for interest-based networking.
Simultaneously emboldened and burdened by its fast-paced, chronological feed, Twitter can be engrossing for those addicted to the real-time information drip and exasperating for those seeking high-signal data.
Further complicating Twitter’s value prop is the need to invest in the curation of one’s follow feed - an arguably daunting practice that surely plays a large role defining the outer limits of user adoption.
All of this is to say that we have in Twitter a fabulously crowdsourced data set of constantly accumulating information attached to various, specific user interests. As one of these loyal active users willing to paddle upstream to find this value, I found myself compelled to design a system to separate the wheat from the chaff for those lagging behind in the user-adoption hurdles described above (or those simply looking for another avenue to this value).
Solution
In order to deliver the most value for the least cost, I wanted a system capable of ingesting thousands of Tweets per day using Twitter's firehose and spitting out the top stories in three categories: Tech, Sports and Finance. Limiting ourselves to three popular categories would scale down the demands of our system to make a feasible and affordable solution (processing power isn't free!).
By curating lists of credible Twitter accounts in each subject, FOMO could scan their public Tweets to aggregate and rank shared links by popularity on a rolling 24-hour window, keeping the content fresh every hour.
I created three Twitter Bots, one for each vertical, and set them up to follow my carefully curated cohorts of Twitter users for each.
Enabling User Stream permissions for my bots, I was able to ingest their Twitter streams in near realtime and subsequently identify all Tweets that contain Links.
Aggregating Links to identify the most popular content for each vertical, I restricted the frontend data to a 24-hr rolling window so that FOMO would always shows the freshest, highest ranking content.
The result is a daily leaderboard of the most popular content on Twitter within three distinct interest bubbles.
Parsing
In addition to understanding which URLs are being shared by these accounts, I want to understand the content within these URLs to a very specific degree i.e. metadata. It's important to note that the design process discussed next informed the technical process discussed here.
Delving into the more granular aspects of this system requires a brief education on the process of "parsing" metadata from URLs. A good content parser is essentially a very picky web browser. Instead of reading all the information required to display a full web page, it quickly reads only a few items from the URL metadata and stores it in a database. For FOMO's parser, these items are the article Title, Lead Image, Body Intro (or description), Source and Author.
Armed with these high-value bits of information for each trending URL, let's jump into the process that presents this treasure trove to the user.
Design
There are infinite ways this data could be communicated, from a stripped down, Craigslist-style list, to a rich and interactive Flipboard-style mosaic, but a thoughtful return to our original Vision will do as much to inform our interface design as it did our system design: Maximum Value for Minimum Cost
Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service. - Steve Jobs
FOMO is to be one product from the inside out.
I love this quote because it penetrates straight to the heart of product design - great things are built from the inside out, with consideration of every component in relation to one another. If you think it’s ridiculously presumptuous of me to quote Steve Jobs in the context of my Twitter news hack, you’re half right. Sure, this isn’t a revolutionary service, but it’s still very important to me that our approach remains consistent within and without our product, because Design is so much more than just what the user sees.
Information Chunking
Humans recognize patterns. We use these patterns to “chunk” information in the processing phase of our consumption. Viewing a novel arrangement of data requires greater processing than viewing a familiar arrangement of information.
I arrived at the use of Preview Tiles (or cards) for reasons I will explain next. Rather than follow a popular pattern of cascading, Pinterest-style arrangement, I decided that a more rigid, consistent arrangement of information would give users more value. The goal is not to make them spend as much time here as possible*, but to give them what they need as quickly as possible.
*Many services actually optimize for the Time Spent metric (as it tends to equate to advertising opportunities) and in doing so may make design decisions that slow or disrupt consumption.
Link Previews
- Title
- Lead Image
- Body Copy Preview
- Source / Author
- Actors (Twitter Accounts)
Photo-Forward
A picture is worth a thousand words, or so they say. There’s good reason (and data) behind the facts that Facebook dedicates ~80% of their Link Share story design to the image, Twitter expanded their Tweet structure to include images, and Instagram has a half billion users. Pictures are an incredibly valuable medium for communication, and when when used in the context of a Link Preview, can be the most valuable asset adjacent the Title.
Here we have a story tile loaded with rich content fed from our parsed link database. Abutting our metadata (and dictating our story rank), we have the associated Tweet authors (avatars and retweet symbols), Category (in this case, Finance), and a quick Share link to allow users to share this content if desired. Native-state on the left and Hover-state on the right.
Responsive
Given this is a web-based tool, it's important to incorporate responsive web design for varying device browser sizes and inputs. Using gridded rules, we can adapt this layout to fit the largest desktop views to the smallest smartphone views.
Iterating
One incredibly convenient aspect of this tool is that the content generation on Twitter is not impacted by usage on FOMO. This means that playing with variations in design, layout, navigation, etc. can be accomplished without compromising the inbound data feed. Please poke around and let me know what you think!