Overview
Each year during the month of February, we celebrate Black History Month, which is a time dedicated to highlighting the accomplishments of black Americans and black culture. I was a part of the team who designed the 2021 Black History Month special edition website for the Columbia Daily Spectator. Our aim was to design a clean, elegant website that highlighted articles championing Black scholars, artists, athletes, entrepreneurs, and future leaders while remaining accessible to users on both mobile and desktop devices.
Collaborators: Caroline Mao (Product Designer), Mirah Shi (Product Manager), Hong Sen Du (Developer)
Duration: 3 weeks (late January to mid February 2021)
Role: Product Design, Visual Design, Illustration
Tools: Figma, Adobe Photoshop, Adobe Illustrator, React.js
Preliminary Goals
It was important that this issue maintained an introspective, earnest tone. A lot of social media activism in support of the Black Lives Matter movement can easily be seen as performative, and we needed to ensure the web design contributed to an honest, reflective stance on Black History Month. Additionally, because of time constraints and the consequent fact that the development team was simultaneously implementing the website as it was being designed, the web design had to be simplistic enough to be quickly coded while retaining visual interest and engagement.
Ideation
We first created a mood board of past Spec special edition and African American history issues as well as other design references to use as inspiration for the website UI.
Initial Design Explorations
Our workflow in Figma designing the edition's desktop & mobile versions.
Given our reference materials, we created some preliminary wire-frames to flesh out the overall site design.
During this process, we observed the following considerations:
Article cards
Individual article info should be aesthetically appealing and easy to click on and read.
Article presentation
A few longer, featured articles should be emphasized over others to draw the viewer's attention without diminishing the appeal of the rest.
Colors and typography
These UI elements should support the issue’s serious themes while matching the tone and visual design of the illustration.
Navigation
Users should be able to quickly and elegantly access any section's content of their choosing (Opinion, Sports, etc.).
Feedback + Iteration
Here's what Spectator staffers had to say about our preliminary designs:
Inconsistent styling: The colors and typography needed to be more consistent and harmonize with each other.
Too crowded: Several low-fidelity designs were distracting due to cramming in too many articles per row and too many images into the cover illustration area.
We thus settled on a two-tone, blue-black color scheme to evoke a sense of calm and awe. Heavier font-weights of Barlow were chosen as the typefaces to maximize accessibility and emphasize the issue's calming, uplifting effect.
We then prototyped revised landing page designs that emphasized a singular visual or more cohesive grouping of images and the edition title.
For our revised section layout, we increased the size of thumbnails for lead or more important articles and included one article per row. A snaking, rectangular line united the article thumbnails and guided the user through the content.
Landing Page Visual
While we continued to develop the site design, I worked on creating the lead illustration. I included a wide spectrum of black figures to best reflect the diversity of accomplishments celebrated during Black History Month.
Influential African Americans like Rosa Parks, Oprah Winfrey, Martin Luther King, Jr., and Colin Kaepernick grace the the illustration along with lesser-known yet similarly groundbreaking figures such as Shirley Chisholm, the first black woman elected to the U.S. Congress; Joy Buolamwini, the founder of the Algorithmic Justice League and a computer scientist at the MIT Media Lab; and Timnit Gebru, the former technical co-lead of Google's Ethical A.I. Team. Other significant African Americans pictured include guitarist Jimi Hendrix; writers Audre Lorde and Toni Morrison; business tycoon Daymond John; and Howard Bison men's basketball coach Kenny Blakeney.
A preliminary version of the illustration and a previous Spec print issue used for inspiration are pictured below.
Preliminary Lead Visual Mockup
2020 Spec BHM Print Issue Inspo
Revised Design
The bottom left design was the original final design, but after accessibility review we determined it to be too difficult for visually impaired users to read and chose an all-caps, lighter-weight version of Barlow, as pictured in the ultimate wireframe on the right. We also altered the menu selection highlight to be more visible, and we included the Spec logo at the top right corner to link back to the main site.
For the section pages, a sticky menu on the right side kept navigation clear and simple while a button at the bottom allowed the user to organically continue on to the next section, ensuring a seamless reading experience. The general design of the final section pages was loosely based on the following wireframe.
Final Designs
We adjusted the final desktop design for mobile purposes by creating a new landing page layout and a dropdown hamburger menu. The desktop section layout lent itself well to the constraints of the a phone screen, with each article thumbnail now the same size and still connected by the snaking rectangular line.
Reflection
This project was my first formal foray into product/web design, and it was a delightful, refreshing experience collaborating with Spec's Product & News Dev sections as a then Deputy Illustrations Editor. In general, working with Spec's journalism sections, the development team, and product managers on a short timeline taught me a lot about carefully balancing everyone’s opinions and needs. I also became much more familiar with Figma, and I gained a better understanding of how to holistically design both mobile and desktop versions of a website.