Yahoo’s DAU’s and LIDAU’s were steadily declining. Our technology and feature set were falling behind some of the competitors. One missing feature was the ability to personalize your own “stream”. The stories we showed were based on our ML algorithm but the user had little control.
Lead Product Designer
Anant Singh, Product Manager
Chris O'Boyle, Designer
Vinit Dholakia, Engineer
Mihai Vespasian, Engineer
Joseph Ramsawak, Research
People come to Yahoo Home to stay up to date on what matters to them most. The key here is ‘what matters to them’. This makes our job to ‘Sift through the noise and only surface relevant and personalized content for each user. The pace and precision with which we can get to a state where most of what a user sees on the homepage is based on their interests, the more likely we are to retain the user.
I facilitated a multi-day design sprint with ~a dozen stakeholders to strategize, create, gather, challenge and express ideas and brainstorm solutions. We came out of it with a few main takeaways. To improve our understanding of our users and their interests, we will be asking them to provide us with overall feedback about content in the stream. This feedback will be a general/broad-spectrum on the entire content piece and allow us to reinforce our inferred signals to understand the user better. We want to launch this in phases in order to rapidly deploy and gather lots of data points quickly.
From a user standpoint, this feature will function as a Show More / Fewer tool. The feedback will not be editable or exposed via any feedback management tools. The user will not be required to sign in to start with but will be offered the opportunity to do so.
I created a simple user journey flow to show proof of concept of how the icons may look, location, and actions a user can take. Straight forward with only two main actions, show more and show less. With Show more, we invite them to log in to save their preference, and with show less we ask for additional feedback.
I build a fully functioning prototype in Principle to use during our moderated user testing sessions. I opted for an animated prototype rather than a Invision click through because I thought I could learn a lot just from the micro interactions and animations such as the hover effects, and tooltip flyouts. How was the speed? Did users notice them? Did they read them? Are they distracting? I wouldn't have gotten the same quality of responses from a static screen and click through prototype.
For mWeb, I wanted to have a very similar experience, but instead of traditional icons, I wanted to try to use native gestures to simplify the process for users. This included challenges for discoverability, but I remedied those by adding hint animations to educate the user.
I tried a few different variations on the swipe design. I tried multiple styles and interactions. For example, in order to fit 3 actions, I tried a single sided swipe with all three actions in buttons. You would swipe and then tap the option you wanted. This felt cumbersome, so I tried a variant of a double sided swipe where as soon as you swipe the action occurs (think Tinder) and I moved the "more" outside of a swipe gesture and into an icon on the stream. This icon would open up an action sheet that slides from the bottom.
For our mobile responsive prototype, I did it in Principle again because I needed to see how users interaction with the native gestures. We first tested a mobile web version of the feature, with multiple variations tested in random sequence to reduce bias. These variations included multi-sided swipe, single-sided swipe, variations of language, and variations of icons.
One little detail that I needed to address was the iconography for this feature. I explored many different options and we tested a couple different ones during user testing .
A few of these icons made more sense than others, while some were more abstract. At this time, Yahoo had been using the heart with the line through it to signify "don't show me this publisher anymore" but we decided that the heart wasn't a good symbol for showing something that people wanted to see more or less of. In fact the emotional weight the heart carried could be in direct conflict with the tone of the content itself. For example, a piece of content may be around a terrible tragedy or natural disaster, and although people would be sad and not "love" it, they would want to stay informed and up to date and see more news about it. So it caused some internal conflict and hesitation. After testing several different variations, the Thumbs actually resonated with people the most and didn't suffer from the same kind of emotional attachment as the heart. Instead of users thinking of the thumb as like/dislike in regards to the subject matter of the content, they saw it more as a green light / red light to show them more or not. Very interesting.
Since users are generally more vocal about things they dislike than things they like, we wanted to gather additional feedback to further personalize their stream. This also gives the user the confirmation that we are actually listening to what signals they are giving us. I designed a very simple and optional feedback form if they tell us they wanted to see less of something. This would help train our ML algo to serve up more relevant content.
After user testing and multiple iterations on the overall flow and design. We decided to scrap the "why didn't you like this" portion" for this phase. We wanted to get this out and start receiving a lot of data points for users. We decided to launch this alongside phase 2. For the desktop, I created a style guide fore the developers to use. You can find that below.