Using design as a weapon to affect perspectives on race & culture.
A case study on my recent web project that’s been receiving some attention, Black In History.
Black History Month has always been a bit of a quagmire for me; on the one hand it serves as a nationally recognized period of time to honor important figures in American history that otherwise wouldn’t be discussed.
But on the other hand, what was once something intended to educate and inspire with the best of intentions, has also turned into a way to ironically segregate and marginalize important historical figures and events that you will never hear of outside of February. When you stuff centuries of history into a 28 day month, things tend to fall between the cracks. Had Black History Month become a way of avoiding the discussion? Did its existence do just as much harm for awareness as it did good?
Being black and working in the Ad industry as an Art Director, I tend to be more sensitive to how I’m spoken to as a demographic. And how I felt spoken to (and discovered I was hardly alone) was that it’s not really American history, it’s just Black history. Not the big story, an aside, really.
Therein lies the problem. And instead of rolling my eyes and commiserating with friends/family another year, I decided to contribute to solving that perception problem in my own way. I’m gonna walk you through how I tried to do that.
Black in History
I decided to create a Tumblr-based web project aimed at shining a spotlight on the forgotten people who made contributions to our society as a whole, but don’t get the same level of recognition they deserve.
I had a few initial user experience and content strategy objectives:
- Who’s looking at this site?
This had to be a site targeted to a much larger audience in order to succeed. There are plenty of Black history sites out there, but most only target the audience that would initially appreciate it most: Black people. This means picking interesting subjects that potentially have a wide appeal with accomplishments that affect everyone, and avoiding subjects (at least starting out) that have already been exhausted in the public eye or could potentially alienate readers. - Simplicity.
Simplicity in function, in browsing, in reading, and in accessing the information. Easy to use, fun to use. - Responsive/Adaptive design.
We’re a mobile world now. This site should be easily consumed no matter what device you’re on, whether that’s a desktop, laptop, tablet, or smartphone. - Engagement.
Getting people to visit this site is a challenge to begin with. But to keep ‘em there, I needed to stop the site from becoming a one-way conversation. Utilizing Tumblr’s platform and massive social network was key.
The main objective of the site, however, was to demonstrate in a passive way that Black history IS American history; that the people on this list did things that everyone can relate to. Not just civil rights and social progress, but science, technology, medicine, the arts. Black people’s lives just weren’t affected by these innovators, everyone’s lives were. We shouldn’t have to be a certain color for someone to remember us and our works, whatever they might be.
“You don’t feel as real if you don’t see yourself reflected in the media […] There’s something very powerful about seeing yourself represented.”
-Dwayne McDuffie, a trailblazer in the comic industry, breaking ground by aggressively introducing more representative superhero minorities between the pages.
Executing the concept
Visual design and initial landing
Negative space, flat design, large photography and typography are the key design principles practiced throughout the site. Landing on the homepage sets the tone for the entire site; “BLACK HISTORY IS AMERICAN HISTORY” is displayed with clipped, quickly rotating images of historical black figures. This is the only place you’ll see it. I use jQuery to hide this landing splash on any subsequent index pages to avoid redunancy and annoying the user by forcing them to scroll down every time he/she clicks for the next page.
How the user navigates
From a top level, when the user enters the site through an index page,
they’ll see a minimal list format for quick scrolling and browsing. The challenge here is that there’s a good chance the user will not know which name to click on since most of the names are unfamiliar and new to him/her.I hate committing to clicks without knowing what I’m getting into. To alleviate that click anxiety, I used tooltips that activate on hover and pull plain text intro copy from the full post.
There’s a sticky menu with options for viewing by filter, learning more about the site through a voice recording (HTML 5 audio), and viewing the archives.
I use big buttons for easy browsing and to entice users. The search bar is close by for quick look-ups and references. It’s enhanced with the Swiftype service for fast inline searches.
Individual entry pages
The post page was designed with a large image of the subject that animates away as you scroll down. I wanted to approach how the content was presented in an engaging way, while also helping to visually connect a face to the name before you read further.
Collaboration
Using Tumblr was a no brainer. Since 2007, they’ve been on the rise amassing a huge network of committed, influential bloggers and curators. More importantly, I needed an easy way for Tumblr users and people outside the social platform to submit names for consideration. It needed to be a two way conversation; asking for user feedback helps foster a sense of investment into the progress of the site.I used Tumblr’s dead simple native ask form to connect the project the the viewer.
Results
So far, so good. Thanks to Tumblr’s strong social network, once I launched, the site spread rather quickly through reblogs and impressions alone at first. The follower count has grown to 33,000+ and counting in just 3 months. Analytics currently show over 44,000 visitors since early February. Black In History received a “Site of the Day” Awwward. Got featured in multiple industry blogs. It even got press from Tumblr itself. Here’s a list of some of the more notable recognitions:
Tumblr Storyboard (interview)
Tumblr Staff
Tumblr’s New & Notable
Tumblr Spotlight for History & Culture
Under Consideration
Awwwards Site of the Day
Designworklife
Web Designer Magazine
Speckyboy
Web Design Ledger
Erik Ford (interview)
CSS Design Awards
Forrst (ranger pick)
Pattern Tap
Design Beep
Admire the Web
HTML Inspiration
Web Design Inspiration
CSS Mania
The response for the general public has been so inspiring; I’ve seen tweets, read messages, Tumblr reblogs, from people of all walks of life. Men, women, parents, teachers, students, teens have all expressed a interest and even joy with using the site while learning about their shared history. Actually I had the fortune to even to get a kind tweet from the famous Aarron Walter, UX Director over at MailChimp:
I tried to create an experience that was crafted to be inclusive and pull a large audience together by (hopefully) reminding them we all share a common link. What could’ve been just a fun design exercise I did in my personal time, turned into a significant cultural project that many people enjoy, share, and contribute to.
One of the lessons I’ve learned through this entire process (besides a bunch of awesome stuff people who happened to be black did) is that if you feel strongly about a cause or issue, don’t sit around and complain about it, don’t wait for someone else to speak for you, speak for yourself using the skills you have.
And maybe budget for a few extra cases of 5 hour energy.
