KOFI'S FIRE: A Spark of Resistance
This interactive graphic novel is inspired by the true events of a 1741 revolt led by enslaved people and indentured servants in New York City. While grounded in historical research, the story weaves in fictional elements to offer a richer, more complete portrayal of Black life in colonial New York—narratives often missing from the historical records of the time.
Kofi's Fire
How might we create an engaging and visually compelling graphic novel that helps young people learn about Kofi in a way that feels fun, relevant, and cool?
Kofi's Fire Case Study
Role: UX Designer, Background Illustrator
Team: Bluetelescope and HHV
Tools: Figma, Airtable, Monday
.
Platform:
Desktop
Mobile
Year: 2023
PROBLEM: Despite widespread education on slavery in the American South, the stories and experiences of enslaved people in the East are often overlooked or completely absent from mainstream history curricula. This lack of representation creates a gap in students’ understanding of the full scope and complexity of our nation’s past. Kofi’s story, brought to life through an engaging and visually captivating graphic novel, seeks to fill that gap—offering young readers a powerful, exhilarating, and informative way to connect with the richness of untold history.
About This Project
Summary
KOFI’S FIRE: A Spark of Resistance is an interactive graphic novel that illustrates the historic uprising of 1741 in New York City from the perspective of Kofi, an enslaved dock worker accused of arson. We collaborated with Historic Hudson Valley to create this immersive educational experience for middle and high school students to spark their imaginations with a richly detailed slice of an often overlooked history and to fan the flames of curiosity when they encounter other stories.
Goals & Objectives
KOFI’S FIRE offers today’s students an opportunity to engage with a rare slice of history in new and exciting ways. By combining approachable language and vibrant illustrations with elements of African folklore and Afrofuturism, we ask students to consider what else might rise from history’s ashes.
Results & Impact
Kofi’s Fire frees its title character – a real enslaved man – from the margins by imagining a multi-dimensional, main-character story that’s full of humanity, agency, and life while also inviting students to reconsider the limitations of one-sided narratives and the blindspots of canonical history.
RESEARCH METHODS
- User Interviews
- Usability Testing
- Competitve Analysis
- Site Map
- User Flow Diagram
User Flow Diagram
This User Flow Diagram illustrates how a student navigates through the website. As they progress through each chapter of the story, they have the option to “Flip the Perspective”—a feature that encourages critical thinking by allowing them to view the events from a different point of view. Additionally, students can explore more in-depth information about the historical context and locations featured in the chapter.
Homepage
This is the homepage—the user’s first point of entry to the Kofi’s Fire website. Upon arrival, users can choose to immediately Begin the Story or take their time reading through the introductory text. They also have the option to scroll down to explore interactive maps, meet key characters, and access additional information about each chapter.
Chapter Story Page
The Chapter Story page is intentionally dynamic and visually engaging to reflect the feel of a graphic novel. Every design element—from the paper texture to the shape of the thought bubbles—was carefully considered to enhance the reading experience.
As users scroll, dialogue appears gradually to mimic the pacing of a graphic novel. On some pages, a brief explanation of the scene is shown on the left, while a question prompt appears on the right inside an orange shape. When students click the question mark, a side box opens with an answer to encourage critical thinking. They can easily close the box to return to the story and continue reading.
Document Explorer
The Document Explorer features actual historical documents that appear within the story, highlighting key facts for students to know. Each document includes the option to view a transcript, which provides a clearer, modern-day explanation of the content. All sources are properly cited and can be found in the footer for reference.
The Map
The Map pinpoints the exact locations in New York where key events in the story take place. Users can click the “View Current Day Map” button to see what these locations look like in present-day NYC, allowing them to connect the historical events to real, modern-day places.
The Design System
The Design System played a crucial role in shaping the overall look, feel, and functionality of the Kofi’s Fire website. From typography and color palettes to buttons, icons, and interactive elements, every detail was thoughtfully designed to ensure consistency, clarity, and a cohesive user experience across all pages.
As one of my favorite parts of the design process, I took great care in helping build and define the Design System for this project. This foundational work not only brought visual harmony to the site, but also made it easier for the team to scale and maintain the platform as the project evolved. The Design System serves as a guide that supports both current and future iterations of the experience, reinforcing accessibility, usability, and storytelling throughout the site.
Chapter End
At the end of each chapter, readers will find a powerful quote from a prominent Black leader, along with the option to follow Kofi’s Trial on all social platforms. Users can also choose to begin the next chapter directly from this page. For educators, a dedicated section provides teaching resources and tools designed to support and reinforce the chapter’s content in the classroom.
Lessons Learned from Kofi’s Fire
1. The Power of a Strong Design System
Creating the Design System was one of the most rewarding aspects of this project. It reinforced how crucial a well-structured system is to maintaining consistency, scalability, and a seamless user experience. I loved seeing how every visual and interactive element came together to support the storytelling.
2. Collaboration Fuels Great Work
Working with such a talented and collaborative team made this project not only smooth but incredibly fun. When everyone brings their strengths to the table, the creative process becomes energizing—and the results speak for themselves.
3. Seeing It Through Matters
Being part of the product development cycle from start to finish was deeply fulfilling. Watching the vision come to life and knowing that we built something meaningful for students—to explore, learn, and grow—was a powerful reminder of why I love this work.
KOFI’S FIRE Awards:
Museum Association of New York (MANY) Awards 2025
Excellence in Design: Publications & Graphics Award of Distinction
Anthem Awards 2024
Silver: Special Projects – Education, Art & Culture category
Bronze: Book, Story or Feature – Education, Art & Culture category
Summit Awards 2024
Best of Show Award – Education Website category
> Among a handful of gold/silver/bronze awards, only one Best of Show title is awarded per category each year
Telly Awards 2024
Gold: Virtual Experience—Immersive, Interactive, & Mixed
Gold: Art Direction—Immersive, Interactive, & Mixed
Silver: General-DEI: Diversity, Equity & Inclusion
Silver: General-Scripted & Narrative
Silver: General-Education & Training
Silver: General-History
Silver: Craft-2D Animation
Silver: Craft-Character Design
Bronze: Craft-Use of Interactivity