Build a self-improving Recommendation Feed using MithrilJS
Recently I’ve come across a task to design a recommendation feed for an article collection web app. The app helps user collect article snippets and allows users to like certain snippets from other users that appear in the feed.
A newsfeed… Sounds familar? This design pattern is actually seen in social networks like Facebook or Twitter. Why don’t we take a look at how these recommendation algorithms work, and then devise our own?
Facebook’s Algorithm
In Facebook, the newsfeed would show the most recommended posts based on inventory, signals and predictions (https://tinuiti.com/blog/paid-social/facebook-algorithm/).
- The Inventory of all posts available to display.
- Signals that tell Facebook what each post is.
- Predictions on how you will react to each post.
- A Final Score assigned to the content based on all factors considered.
Twitter’s Algorithm
In Twitter, you can see trending posts or posts retweeted by people you follow based on recency, engagement, rich media and activity. It’s based on, according to Twitter’s blog post from 2017. (https://blog.twitter.com/engineering/en_us/topics/insights/2017/using-deep-learning-at-scale-in-twitters-timelines.html)
- Recency: How recently a Tweet was published.
- Engagement: Has to do with how many Retweets, clicks, favorites and impressions a Tweet has received.
- Rich Media: The type of media you include in your Tweet, such as images, videos and GIFs.
- Activity: Refers to how active a user is. For example, how long its been since the user was last on the site, how many followers they have and how much they use the platform.
Back to the Drawing Board
In order to come up with our own algorithm, we need to go back to the drawing board. We will go over several questions relating to the user story of this snippets app:
- What is the purpose of the recommendations?
- How do users react to recommendations?
- How to measure the quality of recommendations as a feedback mechanism to produce better recommendations in the long run?
Purpose of the Recommendations
With snippets collected by different users, a place where all snippets are shown should be where the user can find new and interesting snippets. As we expect the user to enjoy these recommendations and even take action. We would expect the recommendations to increase user engagement.
Let’s look at the data structure first, then go over the attributes that matter.
- Article title
- Publisher
- Snippet Content
- Timestamp
- Other Metadata…
Unlike social media posts, the timestamp for article snippets should not concern the average user. The order of the snippets should be customized to each user based on their previous reactions to similar content. With this in mind, we can break the recommendation problem into smaller parts, namely:
- Storing, retrieving and transforming user reactions
- Set a score for recommendations
It’s clear that the higher quality of recommendations, the more sticky the user will be on our snippet app.
User Reaction to Recommendations
Unlike link aggregators like HackerNews, the article snippets can only be “liked”. So there isn’t a mechanism to “downvote” or “dislike” a snippet. This means the likable score for each snippet ties directly to user preference. Additionaly, the user can save the snippet to their own account as well. This action of saving should naturally carry more weight than just liking. Thus the formula for our snippet likable score could be as follows:
Score = # of Likes * 0.5 + # of Saves * 0.75 + Keyword Relevance * 1
We’re putting the weights as is for now, putting Keyword Relevance at the top of Likes and Saves. It might change though, after a bit of testing.
Demo
Let’s set up the stage for the snippets. If you want to see the end result, just go ahead and check out the demo: https://mithril-recommendation.netlify.com.
Measuring the Quality of Recommendations
With this demo, we allow users to influence the likeable score by directly interacting with the snippet e.g. liking, saving or indicating their topic preferences. With more users joining in, we should leave rooom for the recommendations to improve. To do this, we need to define how good a recommendation is.
One way is to measure the duration of screen idle time when a snippet is at the center view of the web app. This way, we get the attention duration on each snippet by each user, which in turn can be fed into the scoring algorithm.
Where do we go from here?
In a production application, such recommendation feeds can be implemented with the help of specific libraries that uses collaborative filtering to achieve fast and effective results. In this tutorial, we tried to implement a different way of recommending items without the heavy guns. This approach may be useful for client-side apps that do not consume a lot of server resources.
Thanks for going through this tutorial! Hope it can help you get started on your own recommendation feed in your projects.
