- Zuleika Arroyo Team
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.
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.
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.
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.
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.
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.
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.