My Coily Story - The Process
My initial objective for this project was to combine the concept of escapism through gaming with the black identity. After looking into escapism and coming across the organisation ‘Black Girl Gamers’, I decided that I wanted to primarily focus on the identity of the black woman.
I first started by reading multiple books, journals and articles pertaining to the different aspects of the black woman. I then watched movies, documentaries and panel discussions surrounding the same topic. After going over my notes I created visual research pages that highlighted the most interesting points I came across.
While going over my notes, I realised that there were specific subject matters that came up continuously; hair, texturism and colourism. Using these topics as inspiration, I created a couple sketches to get my creative juices flowing.
By this point, I felt a bit lost regarding what my next step was. I knew that I was drawn to the subject of black women and hair; however, I wasn’t sure how to go about developing my project. I decided to voice my concerns to my tutor and was advised to be playful and experiment with whatever medium I came across. The next few weeks were filled with me collecting different materials around my house and seeing how I could portray black hair using them.

Black Hair & Baubles
- Pictures taken on a Canon EOS 7D

Dangers of Hair Care
- Pictures taken on a Canon EOS 7D

Dangers of Hair Care, Short Clip #1
- Taken on a Canon EOS 7D

Dangers of Hair Care, Short Clip #2
- Taken on a Canon EOS 7D

Dangers of Hair Care, Short Clip #3
- Taken on a Canon EOS 7D

Scans of Braids and Hair care products
- Scanned on a Scanner

pH tests of black hair care products #1
- Tested on Litmus Paper, Scanned on a Scanner

pH tests of black hair care products #2
- Tested on Litmus Paper, Scanned on a Scanner

Markings of Braids #1
- Acrylic Paint

Markings of Braids #2
- Acrylic Paint

Markings of Braids #3
- Acrylic Paint

Markings of Braids #4
- Charcoal Sticks

Markings of Braids #5
- Pastels

Markings of Braids #6
- Pastels

Hair Care products encased in Glycerin Soap #1
- Glycerin Soap

Hair Care products encased in Glycerin Soap #2
- Glycerin Soap

Hair Care products encased in Glycerin Soap #3
- Glycerin Soap

Mould of Hair Baubles
- Air-Drying Clay

Mould of Hair Brush
- Air-Drying Clay

Mould of Braids
- Air-Drying Clay

3D Hair Relaxer Animation
- Blender

3D Hair Maintenance Animation
- Blender

Coded Parallax of Black Game Protagonist #1
- Procreate & Coder

Coded Parallax of Black Game Protagonist #2
- Procreate & Coder

Black Female Protagonist on Game Start Screen
- Procreate

Markings of Braids #7
- Pastels
I found this process extremely beneficial as it made me not take things too seriously; sometimes being playful brings out the most fruitful results
After showing my experiments to my tutor, I was advised to look into an artist called Danielle -Shirley Braithwaite. Brathwaite creates immersive digital experiences focusing on black trans people. She has told multiple stories using coding as a medium. Looking through her website made me realise that gaming is more than just the visuals and sound effects, its also the story being told to the player; the user experience is the most important thing. Because of this revelation, I decided to create an interactive story that focused on the journey the black woman takes when learning to accept her natural hair.
At this point, coding was still relatively new to me; because of this, I decided to spend a couple weeks following YouTube tutorials that covered very basic concepts.

Subtle Image Change
- Hover Effect

Image Spotlight
- Mouse-Over Effect

Parallax Landscape #1
- Parallax Scroll Effect

Animated Playing Cards
- Hover Effect

Parallax Astronaught
- Mouse Parallax Effect

Hidden Information Card
- Hover Effect

Profile Cards
- Hover Effect

Parallax Landscape #2
- Parallax Scroll Effect

Glowing Link
- Hover Effect

Animated Square
- Hover Effect
Following these tutorials developed my skills substantially, and soon enough I felt confident enough to come up with basic plans surrounding my final outcome.

First Rough Plan #1

First Rough Plan #2

Second Rough Plan #1

Second Rough Plan #2

Quick Sketch

Idea Generation

Key Themes Generation

Dialogue Plan #1

Dialogue Plan #2

Dialogue Plan #3

Dialogue Plan #4

Dialogue Plan #5
In order to make the story as informative as possible, I decided to illustrate different aspects of the natural hair journey that were spoken about repeatedly in the different materials I used as research. Each illustration would be made interactive through coding and each interaction would add to the point I was trying to get across.

Original Sketch
- Procreate

Natural Hair x Anxiety
- Procreate & After Effects

Original Sketch
- Procreate

The Palatable Black Woman
- Procreate & After Effects

Original 3D Model
- Procreate

The Temptation of Relaxers
- Procreate, Blender & After Effects

Original Sketch
- Procreate

Choosing Relaxer #1
- Procreate & After Effects

Original Sketch
- Procreate

Choosing Relaxer #2
- Procreate & After Effects

Original Sketch
- Procreate

The Struggle of Hair Maintenance
- Procreate

Choosing to stay Natural
- Procreate

Choosing to go Relaxed
- Procreate
Soon enough, I had enough material to create a final solid plan.
All that was left was to get it done.
After months of coding and problem solving, I was able to create my final outcome.