preoject hero image

Yahoo Follow + Block

Yahoo 2020

For Phase 2 of our personalization initiative, we introduced the ability to "follow" your favorite sports teams, celebrities, and public companies. This sends Yahoo an even stronger, more specific signal as to your interested and helps form your stream based on your preferences.


Lead Product Designer


Product Design
Product Strategy
User Research
Design QA


Anant Singh, Product Manager
Chris O'Boyle, Designer
Vinit Dholakia, Engineer
Mihai Vespasian, Engineer
Joseph Ramsawak, Research


We wanted to rapidly follow our success of the Show more / Show less feature by getting even more granular feedback. One of the problems introduced by the show more/less feature was that we didn't know exactly which piece of the content users were giving feedback on. Was it the topic? The source? The category? It was a little ambiguous. By introducing a new Follow/Block feature, we can narrow it down somewhat. This will also help set us up for phase 3: Categories.

Problems and goals

Problems we were trying to solve

  • Phase 1's Show more/less implementation left us with ambiguous signals
  • Users wanted something more robust than the show more/less tool
  • Other products, and competitors already have somethign like this in place, we are lagging behind.

Project goals

  • Scalability across other Yahoo verticals such as Sports, Finance and Lifestyle
  • Users are going to be required to login, how to we minimize bounce?
  • Improve our LIDAU (logged in daily active users) metric
  • Fits within the framework already implemented by Sports and Finance
  • Sunset the Show more/less feature after implementation

Strategy and kickoff

photo of desk with all of our post itsphoto of whiteboard showing our post its

One of the biggest challenges was how this was going to work alongside, or in replace of the frameworks that already existed with Sports and Finance. With Yahoo Sports, you can choose your favorite sports teams to get scores and news updates. With finance, you can add public companies' stock tickers to a "watch list" which shows you the latest updates and news with that ticker. Does this feature replace them or live alongside them? Well, in the case of sports, we decided we would use the same framework, and basically merge the two together, so when you "follow" something on home, you are basically favoriting it on sports and vica versa. We would just surface the word "follow" on sports from now on. In the case of finance, we decided to leave them separate, so you can still follow companies, but it won't add them to the watch list. This is purely for the homepage.
Here you can see how it became quite a spirited debate amongst the various verticals.


Phase 2: Follow

The show more/show less mechanism was simple, easy to use, and gave us a ton of data points that we were able to train our algorithm with a very low barrier to entry for the user. The more granular the feedback we get from the user the better equipped we become to provide them with a robust personalized experience that starts to move beyond just content. By allowing our users to follow or block granular topics/entities we will be able to not only personalize the content but also extend this to the utility modules such as Sports and Finance, and provide the user with targeted notifications. From a user standpoint, this feature will provide them with the following functionality as a ‘Follow’, ‘Unfollow’ & ‘Not Interested’. All the user interests will be captured in a topic management page.

Desktop User Journey

follow user journey

Stream enhancement

The follow and block features were direct descendants of the show more/less feature, but were much more robust. It gave us the opportunity to be much more specific and deliberate in the type of feedback we asked for and allowed users to give us. Here is how it worked.

For every article, our algo would scrub it and give it a keyword score/ranking based on what we thought the article was about. The highest ranked person, team, or company would then be displayed as the entity the user could "follow". For our MVP of this feature, we were limiting it to the #1 ranked topic. In future iterations we will increase it to multiple entity(say 2-3). Also, we would allow the user to "block" or say "not interested" on that entity as well. Additionally, we allowed the user to block certain news sources as well. See the screenshot below for an example of the UI on desktop and in the action sheet on mobile.

swipe variationsmobile web follow action sheet

Follow UI

We decided to go with the filled and empty star icon for our follow framework. This is because it would be replacing / merging with the current star icon we used with Sports. Users were already trained in it's meaning, but we would add additional content and labels to help transition from "add to my teams" to "follow".

During this project Yahoo was going through a brand refresh and we wanted to incorporate more of the Yahoo shades of Purple to bring mroe brand identity to all of our pages. This follow funcionality exists on other sites, but we wanted users to know this was Yahoo's follow.

Here are some of the very early UI explorations I did for the follow buttons in various formats:

follow pill explorations

While the immediate use was for the homepage and the stream, I envisioned it working something like this.

Pills on stream

Other uses

These UI elements needed to be used on other pages, such as the article page.

article view with pill on top

I created an alternate version to give a little larger image where we had additional vertical space such as under an article. See example below.

follow card explorationsarticle view with pill on bottom

Topic Management

This was all very excited but we needed to provide a place that users could see that the actions they were taking were actually being recorded and allow them to edit their choices if they choose. So I created a simple front end management screen that showed all of a users followed and blocked entities. The information architecture was a bit of a challenge. I explored many different variations. Should I break out the Followed vs the Blocked? Shoudl I break each of those out into which type (Person, Team, Company)? After many different explorations (see below) the team landed on having followed and blocked on a single pane but separated.

topic management screen

Learnings and results

What did we learn?

  • Users didn't understand WHY they should "follow" something.
  • Users understood "block" more than follow. Due to the fact we didn't call it block but were more descriptive in having the label say "Not interested in"
  • Users had trouble getting to their topic management pages

Changes we made

  • Cleaned up desktop UI, simplified the pills and the cards. Also made them slightly smaller
  • Introduced a small "tutorial" and intro cards to help users understand the feature and see what value it provides.
  • Coming up, we will be allowing users to follow more than one entity at a time.
  • Reduced the number of colors and less purple.

Results and metrics

  • Increased logged in daily active users by 26% QoQ
  • Increased sign ups but 19% QoQ
  • Users had on average 3 followed entities, and, funny enough, almost 7 blocked entities.


After noodling on different color variations and how things would be presented in other parts of the website I was able to finalize and create a style guide to reference in the future.

follow style guide

Previous Project

Next Project

Yahoo Stream Personalization

View case study

Smugmug Cart and Checkout

View case study
Smugmug Cart project thumbnail

Next Project

Yahoo Stream Personalization

View case study

Previous Project

Smugmug Cart and Checkout

View case study
Smugmug Cart project thumbnail
Contact me avatar
Want to work together?

Let’s get in touch!