top of page

Case Study

Yahoo User Profile

Site

All the verticals, e.g., Yahoo News, Finance, Sports and Lifestyle, across Yahoo networks

Canvass, Yahoo’s integrated commenting system, plays a vital role in driving user engagement across key platforms such as Yahoo News, Sports, and Finance, which collectively serve over 700 million monthly active users. While Canvass has been a successful feature, the design of user profiles, which are critical for fostering trust and interaction, has not been updated for quite some time. Through user research, we discovered that a significant barrier to user trust was a lack of credibility in the comments. To address this, the team embarked on redesigning the user profile experience with a focus on showcasing user credibility. This initiative aimed to foster greater trust and more meaningful engagement across the Yahoo ecosystem.

My role

As a Senior Product Designer, I led the end-to-end designs. My responsibilities include:

 

PROJECT SCOPING

I helped the Product Manager define the project goal, problem statement, acceptance criteria, and deliverables. 

 

WIREFRAME, PROTOTYPING, AND TESTING

I created all the wireframes based on user research. To ensure the design reached the project goal, I created interactive prototypes and conducted several rounds of testing.

 

INTERACTION AND VISUAL DESIGN

I had several visual design explorations and iterated based on other designers' feedback. I illustrated detailed interaction designs via Principal, an animation software.

 

COLLABORATION

I partnered with developers and made sure the design is implemented accurately.

 

Screen Shot 2019-03-04 at 4.00.11 PM.png

The old design of a user profile. There was not much information about the user.

Challenge

Before jumping into solutions, the team and I must understand user pain points, feelings, and moments of delight. I created a user journey map that helped visualize users' emotions and create a shared understanding of user needs among the teams.

User journey map on Canvass

As we can see in this map, the reader experience stopped at the user profile. It's because there's little information about the user. As a result, readers can't tell the credibility of the person.

Stay connected user journey.png

Once we successfully design the user profile that allows users to tell the credibility of users. What's next? Do users want to stay in touch with other users?

Project phase

The team and I decided to break the projects into two phases:

  1. Phase one is to redesign the user profile, so it shows the credibility of a user.
     

  2. Once we show a user's credibility, phase two is to test if users want to get updates from the people they're interested in.

Phase 1

Wireframes

In phase one, the user research team identified the elements that could show a user's credibility. I then created different options for displaying these elements.

How to present the reference article?

In the user activity, we show the user's activity and a reference article. I had three options to present the information.

Option 1: Show more emphasis on the article with an image thumbnail

Option 2: Show only the article title

Option 3: Show the article title with an icon indicating the type of media

Product decision

We, as a team, discussed these three options and felt that option three would give more attention to the user's activity instead of the article. As a team, we made the product decision that, at this point, we only want to show the credibility of a user. Therefore, option three is the best to reach this goal. We can revisit this design if we wish to have more article views in the future.

Design challenge on the content order

One of the biggest design challenges we encountered was to find the content order that makes sense for the users. There were three types of actions in the user history:

  • User's comment on an article

  • User's upvote on someone's comment

  • User's reply to someone's comment

Should we put a user's action always on top? Or should we put content in the order that makes sense to the readers? I could find examples for each option, but what do users think in our case? Moreover, does the layout reach the project goal, "showing the credibility of a user"?

Testing, testing, testing

I set up a remote user testing session with 10 participants. There were three objectives of the test:

  1. Could users tell the credibility of the user by looking at the profile?

  2. Does the content order make sense to users?

  3. Are there any usability issues

I intentionally put in real comments from real users and comments that can be confusing in order to discover the best content order in the worst scenario. Here's an interactive prototype example (click on John Doe on the 2nd comment).

Learnings from user testings

Through user testing, we learned:

  1. When there's a badge next to a user, our research participants find the user more credible. Most participants didn't need a label for the badge to understand its meaning.
     

  2. When the research participants are interested in the commenter, they want to see the commenter's profile. They don't want to follow the user immediately.
     

  3. Research participants felt the metric gave a good summary of the user. At the same time, they want to see the number of downvotes.
     

  4. Participants knew how to mute or block a user.
     

  5. For the content order on user's comment, user's reply on someone's comment, and user's upvote, participants' preferences are: reference article on top > reference article at the bottom > no reference article.

    The reference article on top was the most intuitive. When the reference article was at the bottom, it always took the participants a while to comprehend the information. When there was no reference article, it was just confusing to the users.

     

  6. Most participants had a screen resolution of around 1280 wide. Therefore, when the user profile was in a modal, it took most of the screen and was not an issue to them. Furthermore, they understood the flow of opening and closing the user profile.
     

  7. All participants had the correct understanding of the following.
     

  8. The visual design is clean.

Visual design explorations
visual exploration 2.png
Fine-tune interactions
Final design
profile.png
following.png
Phase 2
Fake door test

Instead of spending months building the following feature, we need to find out first to see if users want to get updates from the people they're interested in. To test the idea, I designed a "fake door" test. The team tracked the click-through rate of the button and measured the potential impact of the following feature.

In the above example, I added a fake "Follow" button in John Doe's hover window. 

In the above example, I added a fake "Follow" button in John Doe's profile.

Results from fake door tests

We diverted 1% of traffic to this experiment. In the experiment, 1.5% of users opened the hover window, and less than 1% got to the user profile window. For the users who opened the hover window, we got 10.3% of CTR. For the users who opened the profile window, we got 14.2% of the CTR.

With this CTR, the team can evaluate if the time and cost of development would justify the potential impact on the following feature.

Based on the result, we got the signal that users want to connect or get updates from other users. However, the following feature may not be the only mechanism to reach this goal. We should continue to explore and test other means like pushed email notifications, passive alerts, or direct messages.

bottom of page