Will Harding Avatar

NPR Bylines and Bio Pages

NPR's Social Iterations team wanted to promote our journalists' social media accounts more while still maintaining the hierarchy of our story pages.

BRAND: NPR

ROLE: Product Design

Designing new bylines and bio pages for a company as large and multi-faceted as NPR can pose many challenges. NPR employs many types of contributors and finding the solution that balances all their needs is a must.

When I was given my first project at NPR my initial thought was that it would be relatively simple and a good project to "get my feet wet." I thought I would find byline inspiration from other large media organizations, but after research, I realized that those organizations must be facing some of the same challenges we were. How can you promote your journalists and all the content they create while serving the users immediate goal of digesting the content they visited your page for, the actual story?

Mockup of NPR Bylines at large and small breakpoint

One of the main goals was to give journalists the ability to promote up to two social networks without forcing the user to leave the page. Among the challenges was that often our stories are written by many different people some of which would link to a bio page and others that would not.

Final NPR Byline

I explored a lot of different options for the bylines and each of them had their own nuanced challenges that ranged from usable iconography to visual design bloat. Below is a selection of just a few of them. You can see how some of these would take too much interest away from the story or alternatively wouldn't achieve the goal of more eyeballs on the contributor.

Byline iterations

Another part of this project was to redesign how contributor pages looked once a user clicked on a byline. Previously, the site gave a little information about the person and then a single link, in the right rail, to see more stories by them. I designed a system that would show a teaser of the bio and gave users access to all their archived stories with out another page load. Also, at small breakpoints the former design used to fill the bio pictures to the full width of the page forcing the user to do a lot of scrolling to find other content. In the end the redesign successfully drove more users to follow contributors on other social media networks and didn't result in less time spent on the story pages.

Bio page on NPR
Bio page on NPR at small breakpoint