Black Youth Project (BYP), a project-in-residence at The Center for the Study of Race, Politics and Culture (CSRPC) at the University of Chicago, was founded in 2004 by Professor Cathy J. Cohen as a national research project to examine African-American youth ages 18-30. The BYP website functions as an online platform to feature the voices of Black youth, expand their human and social capital, and facilitate their empowerment by highlighting their experiences and ideas. The articles and videos housed on blackyouthproject.com, which fall into several different categories including gender and sexuality, politics, education, race, and entertainment, are written by scholars, educators, community activists, youth allies, and Black youth and Millennials.

In the Spring of 2017 I was contacted by the Head Editor of BYP, Jenn M. Jackson, to overhaul the website and give it a fresh look and architecture that reflected the spirit and youth of the platform. At that time, the site was formatted like a blog, which meant new content was very quickly being pushed far down on or completely off of the homepage and required several clicks by the visitor to see articles that were still relevant and deserved more eyes and interaction. My goal was to design a homepage and category landing page interfaces that would fit considerably more content above-the-fold (primarily via desktop) and to design an article page interface that would entice visitors to engage with additional articles both new and related to the article they were reading (primarily via mobile).

Post redesign, site-wide page views were increased by an average of 19k per month, and the homepage bounce rate was decreased by almost 10%. In layman's terms, the new blackyouthproject.com entices visitors to browse the site for a considerably longer time whether they enter on the homepage or an article, as is the case with most users who click through from Twitter and Facebook.

Blackyouthproject.com; various devices
Black Youth Project

The blackyouthproject.com redesign utilizes the color palette—black, white, red, and gold—already established by the previous logo and site design. Whereas the background color of the previous design was entirely white, I used black in the background of certain sections to create separation and minimize the feeling of clutter. Namely for the header, footer, and other containers of content that aren't as frequently updated as the articles: the media section of the homepage, which includes video and podcast content, and the newsletter call-to-action.

Blackyouthproject.com; website walkthrough

Editors have the ability, via the Wordpress backend, to build the homepage in various different ways. The HP can include as little or as many category sections as an editor chooses and the order in which they appear is also customizable. The newsletter call-to-action is always auto-placed at the mid-point, no matter how many categories are chosen, via a jQuery function.

On the backend, too, is an option to include a pull quote for an article, which is easily sharable on click on the front end.

Blackyouthproject.com UI

On desktop the header collapses to maximize real-estate on scroll down. The newsletter call-to-action expands after a user has already opted to begin populating the form to maximize real-estate that would otherwise be taken up by extraneous form fields. On the article page, which, as aforementioned, is where most mobile users enter, the most recent articles are provided as well as articles that are related by subject matter, category, or tags. Ideally a visitor should be engaged enough and offered enough engaging content to browse the site for an extended amount of time without ever even seeing the homepage.

Blackyouthproject.com; mobile walkthrough
Blackyouthproject.com; mobile views
Black Youth Project

More Projects

1839 Mag

Creative direction, photography & photo editing, social media management, UX/UI design & dev, identity, branding, and custom WordPress theme for a Pittsburgh-based Black arts and culture magazine.

PF/PCA Exhibitions

Marketing, public relations, copywriting, social media content creation, graphic design, photography, and videography for an non-profit arts organization's exhibitions program.

Carnegie Art Associates

Marketing, PR, consulting, and art direction as an executive board member for a new membership and programming tier at Carnegie Museum of Art.

Durand Bernarr

Creative Direction, styling, photography, EP booklet design, UX/UI design, front end dev, and a custom Wordpress theme for singer/songwriter and Erykah Badu background vocalist Durand Bernarr.

Back to Top