Background
This project won the Capital One Women in Tech Demo Day. The challenge, “Help young women of color see themselves as a Computer Scientist,” was sponsored by Black Girls Code. I deeply related to this challenge, as my father is in the tech industry but it took me until my 30s to see myself as someone who could be a developer.
Approach
My solution to the problem was “Alika’s Treehouse,” a digital comic book about a young girl from New York who spends the summer in Savannah with her widower grandfather Nevin building a treehouse. The story is roughly based on Alice In Wonderland. Throughout the story, Alika’s is challenged and encouraged by pop Nevin (the name of the White Rabbit in the Disney Adaptation) to question her assumptions. Dialog Example
Alika: “Pop, no one taught you how to build a treehouse”
Nevin: “Alika, if you sit around waiting for someone to teach you something, you will never get the things you want.”
Interface and Coding Lessons
The interface has three parts: 1.) an interactive comic with animations and inputs that a user can play with and get curious about; 2.) an interactive code editor that teaches coding and displays visuals of what the user is building; and 3.) a cat named Charles (reference to Alice in Wonderland author’s original name) navigates the user between the story and the lessons. As the user saves snippets from the lessons, the system builds a SPA (single page application) that becomes and interactive Treehouse, designed by the user.
Comic and Lesson Interaction Example
Pop Nevin suggests she create a sign for the treehouse while he clears brush. Charles introduces the user to the interface that has a code editor on the left and a live preview on the right (see third screenshot). The preview shows a poster. The user then learns about html tags like H1 and ULs while makings a Clubhouse rules poster for their treehouse. When the user is done with the lesson, they are shown the interactive treehouse they are building. The poster they just created is on the tree (screenshot 4). Eventually, the user will learn things like HTML structure to build the treehouse, CSS to add decorations and furniture. The end product is something they can share and swap “recipes” for.
Results
For the demo day I built a very rudimentary prototype. I have a working editor with the poster example, the interactive treehouse page and a single page of the interactive comic book with amazing art form my friend Mark Mandolia.
The work won the hackathon!
Next Steps
In 2018 I had additional stories built out. This included Radio Dia, A World Elsewhere, and Ray’s Treasure Adventure. In the future I plan to build a platform that allows these lesson-stories to be built out easily.