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
Prototyping
1 Product Manager
1 Designer
2 Engineers
User 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.
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.
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.
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.
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:
While the immediate use was for the homepage and the stream, I envisioned it working something like this.
These UI elements needed to be used on other pages, such as the article page.
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.
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.
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.
.svg){kind=small}