Black Women Too

Digital experiences can create lasting impressions. With new opportunities to reach growing audiences and leave greater impact, it has never been a more exciting time to be a creator.

- Zuleika Arroyo Team

Can you describe your project and the concept behind it?

Color of Change wanted to map the systems of abuse and violence that Black women and girls face on the daily across a wide social spectrum. Inspired by other investigative sites like those by the New York Times, our small team of myself, writer/activist Janaya Khan, and developer Ben Benjamin set out to visualize these systems of oppression within a three-week timeline, launching alongside Lifetime's "Surviving R. Kelly" documentary series.

Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

Usually we start by putting together a mood-board from a set of brand elements, context, and wireframes. Then the rest keeps coming together as it goes; however, due to our timeline, in this case we had to jump right into mockups and a prototype looking exactly as the outcome. This is part of the reason for the site’s minimal design approach — we started from a simple outline which would be easy to develop additional layers upon as we went along.

What influenced your chosen technical approach, and how did it go beyond past methods?

Without time to iterate on design and content before starting development, we knew we would need a CMS like WordPress for ongoing copy updates right up to the launch date. For inspiration, the client referenced a New York Times feature on Syria — our idea was to reference this for the internal pages while creating a strong, interactive home page where users had a simple way to navigate the site while being kept interested to educate themselves.

When did you experience a breakthrough or an "a-ha" moment during this project?

Our first lightning moment came at the kick-off of this project, as we all began working on our respective parts in parallel and found ourselves in sync with how we wanted to approach telling the story and grabbing people's attention. In development, one memorable “a-ha” came from finding a responsive method for laying out the home page using native properties of SVG to position HTML elements along a path that wouldn’t block our main subject.

What web technologies, tools, and resources did you use to develop this?

We used Adobe XD, Photoshop, and Illustrator for the design and prototype. The backend and CMS used WordPress, Gutenberg, ACF, and GhostKit, while the frontend used React, SVG, canvas, CSS animation, and react-wp-scripts.

How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

Given a short turnaround time of just a few weeks from conception to execution, all three of us (design, development, content) were in constant communication. This allowed rapid feedback, iterating only on the ideas which the client was 100% sure they wanted to explore. We were very lucky and grateful for the flexibility Color of Change gave us to play with their brand assets and colors in creating elements which appear throughout the site.

How did the final product meet or exceed your expectations?

We were very relieved to achieve our goals — without time for gradual iteration, we weren’t certain what things would look like when the project was complete. But in the end, our constant communication between design, development, and content paid off. The site launched in tandem with Lifetime’s “Surviving R. Kelly” series as an additional resource in the fight against systematic violence against Black women.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

Digital experiences can create lasting impressions. As technology continues to evolve, we become more attached to those experiences which allow us to connect, shop, create awareness, and much more. With new opportunities to reach growing audiences and leave greater impact, it has never been a more exciting time to be a creator.

See More Projects

World AIDS Day 2020 - A National Conversation -

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

View the Project
In Event of Moon Disaster

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

View the Project
Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

View the Project