User reputation on Quora

How might we better surface user reputation on Quora?

This past summer I had the fantastic opportunity to intern on the Core Product and Quality team at Quora in Mountain View, CA. At Quora, designers code, so in addition to my responsibilities as a designer, I also handled the front-end code for my implemented designs. A large part of my summer was spent working on a smaller team kickstarting a conceptual initiative centered around more accurately representing individual users' reputation and credibility on Quora. One of the questions that fit into this initiative was: "How might we better surface user reputation on Quora?"

This was the first project I worked on after initial ramp-up tasks and it was even more of a milestone because we were able to take the project through experiments and ultimately launch it to production! My mentor Jackson and I chose this problem because after evaluating a bank of various reputation based problems, the highest impact - low time commitment solution was based on a hypothesis: People follow who they follow on Quora because they value these people's opinions, writing, and other indicators (upvotes, blog posts, etc). Thus, by showing the viewer of a profile the people they follow who also follow the user who's profile they are viewing, we can better represent a personalized version of each person on Quora's reputation. For example, if I follow Hillary Clinton and I see that she is also following a writer I'm interested in, I might be spurred to follow that writer because of the credibility/reputation boost Hillary Clinton has now given them.

Step 1:

The first thing I did was familiarize myself with the profile page system on Quora, from goals, to conventions, to existing UI patterns across the product. Below is a screenshot of an average Quora users' profile before I attacked this problem.

I wrote down all of my thoughts into an internal Quip document detailing the problem, metrics to be moved, product mechanics, and a lengthy list of ideas for how to present the information and sent it out to the team for feedback.

Step 2:

The goal here was diverging and going wide from the ideas we brainstormed previously, then critiquing the top contenders in a design review to settle on a final idea. I built this mobile first, which interestingly enough, led to some huge issues later on. I also made the conscious decision to skip the basic wireframe stage in order to better integrate this feature into the existing profile page.

A couple of the second iteration winners in the quick draft stage (high fidelity versions were reserved for after I translated my designs to code, for efficiency):

Step 3:

At this point, it was time to converge on a final design as well as figure out a good way to implement these ideas on the desktop version of Quora. We simultaneously evaluated the mechanics of the feature on mobile as well as tried many different options on desktop. In the end, we felt that the setup of the mechanics of the right most screen from above worked best and made the most sense, but the lack of mobile and desktop parity left it much less elegant on desktop:

At this point, my mentor and I decided to actually expand the scope of the project to:

1. Implement the 'Followers You Know' feature
2. Redesign the About section on profiles to have mobile parity
3. Decide on the static ranking of these items on both mobile and desktop based on goals of the reputation/credibility initiative so as to better inform users and make it easier to surface high credibility details on profiles.
4. Extend this new About section across the product

This took the project in a more well rounded direction by not only injecting this new feature into the product, but then making room for it to take a more prominent role in a more deliberately designed profile page.

The Solution:

The first step was to match the desktop About section to the mobile profile, with similar truncation (the use case of a high-profile Quora user, and myself, an average user):

Some key issues that arose at this point: 

• While the visual design is much more streamlined on my profile that doesn't have any Quora badges, on Marc Bodnick's, the Followers You Know icon stands out as the only icon that is gray. However, making the icon red for parity there would cause Followers You Know to take on too much visual importance and perceptive attention.
• Perhaps we don't need to truncate in the same way as on mobile because we have so much real estate on desktop-- providing more context for the user upfront creates a better experience.
• Truncating at a single line is also visually more appealing, but shows almost no actionable information, especially for 'Followers You Know' where only 'Adam' is shown

Our approach to solving these issues actually required creating a more detailed definition of the reputation initiative:

• There needs to be a conscious devaluation of Quora badges because they do not signify reputation and credibility in the real world, which is contrary to the type of reputations we want to push. Icons will be uniformly gray to make them less garish and visually cluttering due to the high volume of different icons.
• We'll show the entire contents of the About section on desktop but implement an appropriate static ranking of the contents (active devaluation of answer views, Quora badges, pushing Work, School, and Location for real world credibility), and ultimately on mobile as well
• We'll allow variability in truncation, based on number of items within each section, as opposed to a line count (reduces code complexity and provides more context)

Tradeoffs we're allowing:

• Pushing some items below the fold on profiles with many objects in the About section because we are confident in the quality of our ranking of objects
• Disappointment from Top Writers regarding devaluing Quora badges

At this point, myself and an engineer coded up the product and launched it into an employee beta. After correcting bugs, making some minor changes, and collecting tips from our coworkers, we moved into experiments.

Final Steps:

Pictured above is the profile as it is today, the same as it was pre-experiment. We were fairly confident in the success of this endeavor, so we moved forward with making a Product Updates post on the official blog for this relatively major change to profiles in conjunction with a major mobile navigation change.

I set up an experiment for this feature to track click throughs, Work/School/Location adds tracking, and other defensive and target metrics, and we let it run for about two weeks. During this time it was interesting to take feedback from real users and also learn to handle negative reception from my designs in the real world. Ultimately, the experiment performed very positively and we launched the project to 100%, a very exciting milestone in my design career! You can see these changes on your own profile and other places around the product: