TITLE: The Chinese Adoptee: a Digital Ethnography
SUBTITLE: Our experiences. Our memories. Our stories.
AUTHOR: Phoebe Lemon
ELEVATOR PITCH: Learn about Chinese adoptee’s experience with family, culture, appearance, and identity through an interactive, storybook style, digital ethnography.
ABSTRACT: Growing up as a Chinese adoptee in America, forming and expressing my identity, whether it be through my appearance, language, mannerisms, culture, and family, has always been a struggle. Questions such as, “What do I do when no one in my family looks like me?,” “Do I call myself Chinese or American? Neither? Both?,” and “How do I define the word ‘family’ in a way that actually reflects my own feelings and experiences?” are constantly present in all aspects of my daily life. From the moment I was old enough to understand what adoption was, I’ve embarked on the journey towards reconciling my current identity with my past experiences, privilege, and oppression in hopes of and finding some answers to these questions.
In fact, this is a journey that nearly every Chinese adoptee will embark on; it is a journey that is ongoing and without a clear end. I’ve focused this project on the Chinese adoptee, for our struggles with racial, cultural, and linguistic identities are heightened by the fact that we are products of transnational adoption, living in transnational families. Not only that, we are products of the One Child Policy, which had great effects on a developing ‘global nationalism’ and ‘multiculturalism’ of the 80s, 90s, and early 2000s, making the Chinese adoptee distinct from other cases of adoption. Moreover, our opportunities to interact with other Chinese adoptees and other Chinese people, as well finding the resources to learn about our culture and history, are very limited, if not non-existent. Hence, this project focuses on telling the story of the Chinese adoptee experience in the form of a digital ethnography , as I believe this is the most authentic way to present the complexities and nuances within the community.
Digital ethnography, being a branch of anthropolygy, studies peoples, cultures, and societies, taking the the subject’s personal experiences, feelings, opinions, and memories as the main source of research, as opposed to more “official” sources of research such as legal documents, history books, and government data. My research draws mainly from online interviews of 14 adoptees, many whom I’ve been in contact with since childhood, and many whom I have recently gotten to know during my time at NYU Shanghai. I call this ethnography ‘digital’ not only because research was conducted strictly online, but also because it takes advantage of web development and interactive art and its capabilities of personal storytelling. This ethnography consists of four parts, each dealing with different aspects of the Chinese adoptee experience: the finding story, family ideals, cultural identity, and the notion of the body . Parts 2-4 are each accompanied by a piece of interactive art using p5.js, a Javascript creative coding library, that deepens the research beyond just text on a page.
Finally, this website aims to create a safe space for members of our community, to learn, to connect with, and to reflect upon other’s experiences, as well as our own. It is also a space in which individuals outside of the community are able to learn more about the complex Chinese adoptee identity in a way that forces them to step outside their own positionality and immerse themselves into a new perspective. My wish is that all adoptees, after looking at this website, might have some sense of direction in becoming their true authentic selves.
LINKS: website, code & files
SCREEN CAPTURES: Below are screen captures of each webpage.
DESIGN & COMPOSITION: I think it’s critical to note that while this is a “web development” project that is heavily code based, it is also is an ethnographic project, which I tried to make as scholarly as possible. In other words, yes, the visuals are indeed pleasing and deepen the text that’s on the page, but I think the most important and most difficult aspect of this project was the ethnographic fieldwork I had to do, writing all the explanations, introductions, etc. of each page, coming up with interview questions, conducting the online interviews ahead of time, filtering through everyone’s responses (15 in total), editing them, and selecting which ones would be put into the site. Each adoptee wrote me responses at least three pages in length– which is 45+ pages of writing in total that I had to analyze before even starting the coding process. I had to ask myself the important question of, now that I’ve actually done the fieldwork, how do I build this website that best reflects it? How do I best honor what people have said in their own words, while still being able to use web design and the sketches to strengthen what they have to say, without misinterpreting it? Because I am also an adoptee, how do I balance my own bias against those whom I interviewed, and how do I reflect my own bias and personal experience into the web design, while keeping the authenticity of the fieldwork? When should anonymity be applied or not applied? These are all questions I had to consider before and during the web development process, and they played a critical part in the design process.
The first step was writing my interview questions, which I have linked here. The process of writing, sending out, and receiving the interview responses took about two weeks, which was when I began the actual web development. I knew from the beginning that I wanted it to be a kind of documentary style, immersive website. This meant that there would be no menu, no back button, and images and text would be kept large. I also decided early on that there would be three main parts, the Family page, the What is Culture? page, and the The Body page. However, one of my interview questions was asking about the Finding Story. I figured I would weave it into one of the parts somehow, but later on I felt it deserved its own page, and so I made the first chapter titled Our Beginnings. I also decided to add an introduction and acknowledgement page that bookended these four parts. I think the inclusion of the introduction, while the design is very simple and there is a lot of text, it is necessary to provide a user with a basic understanding of the purpose and inspiration of the project, as well as explaining exactly what I mean by a digital ethnography. Additionally, it sets the tone for the project overall, letting the user know that this is a more scholarly, research based project, rather than visual and code based. The acknowledgement page also adds to the professional aspect of the site as a whole and is usually the most ethical thing to do when doing ethnographic fieldwork. All of these pages are shown above in the screen captures.
Next, the p5.js sketches. In total there are three, corresponding to the three main parts I mention above. For the page titled ‘Family’ I originally had in mind a kind of interactive portraiture that allowed the user to move photos around, creating their own ‘ideal’ family portrait. These images would be cut out images from One Child Policy propaganda of the 70s. I abandoned this idea because of time constraints, and also because I couldn’t find a lot of variety in the propaganda. I opted for reusing my sketch from the midterm project, which were these growing vines. Except this time, they were no longer vines, but a tree being drawn upside down on the screen, with text boxes that appeared on top of it. The tree being drawn upside down acts as a satire of a traditional family tree, which grows upwards, and acts as a destabilization of heteronormative, genetic centered family ideals that are so present in society.
The next sketch is a ‘game’ that goes along with the What is Culture page. I call it a ‘game’ with quotations, because it isn’t actually a game, but rather a simulation of a real lived experience of the adoptee, which deals with the idea that being lost within a bifurcated cultural identity is isolating yet inescapable. Hence why there is no strategy to the game, and there is no winning. The user simply has to move around and observe as text appears on the screen. Right now there are instructions that tell users how to play the ‘game’, but the text that should show quotations from adoptees that relate to the ‘game’ have not been coded in yet. This is something that I need to add on.
The final sketch appears on the last page of the site, which talks about the notion of ‘The Body’ of the Chinese adoptee. This term was inspired by a quote from French philosopher Frantz Fanon of the mid 20th century, which is displayed on the page previous. In short, Fanon was known for his anti-colonial theories and storytelling of his own racial identity. The quote I utilize is from his famous novel Black Skin White Masks, which talks about he, as a black man, exists in a body that is fragmented and spread across different spaces. He asserts that these partial selves, in the world of the white man, merely exist to deepen his oppression, and he does not have autonomy over his own body in this way. Through reading through everyones responses, my own experiences, and talking with other adoptees in my daily life, I realize that Fanon’s words really resonate with many aspects of the adoptee identity when it comes to physical appearance, which is why I chose it. The sketch on the next way then, aims to harmonize entries from the adoptees and this quote. It is simply just a bunch of cameras at random positions and random sizes across the screen, while an infinite and timed slideshow of entries lays on top of it. Although this idea actually came to me last minute, and takes up only a few lines of code, I think that its simplicity makes this page really powerful. Seeing so many images of yourself at once feels quite invasive, but also quite self-reflective; it’s like looking into 100 different mirrors. While you read the text, you are really forced to have an image of yourself in your peripheral, mimicking the notion of adoptee identity as being impartial and constantly perceived, interpreted, and judged — positively or negatively– by those around you. I think this page especially really captures this immersive aspect I had in mind. Even though I originally had in mind a sort of distorted portraiture effect using the camera, after revisiting Fanon’s work — a suggestion made by my sister– I realized that this was a better way to execute this notion of ‘The Body’. A photo of this sketch is shown above.
TECHNICAL ASPECTS: Of course, an important part of the website was the p5.js sketches. The first sketch we see is an altered version of my vines sketch, and you can find a detailed explanation of the code in the blogpost titled “Hedera helix: an exploration of algorithmic botany”. The second sketch is the ‘game’/simulation I mention above. This was the most complicated of the sketch. In total it has three classes, the lasers, planet 1, and planet 2. The alien character is simply a png from the internet. To get the pixelated effect throughout, the stars we see are small squares, and each planet consists of tiny squares that are created by rows and columns, which increase by every iteration until it reaches the diameter of the planet. I won’t go into too much detail because that’s not really the focus of website, but a screenshot of the code is provided below to show how the planets are created.
Inside the Planet 1 Class:
What I would like to focus on here is the technical parts of the html and css. My goal was to have the design be cohesive, intentional, and able to enhance storytelling. My technique for this was to have each page’s content increase in its length and ‘seriousness’ by implementing css animations and layouts that would actually force the user to spend longer on each page, and to really have to read, analyze, and self-reflect upon the information being presented. For example, the first page we have a large image, and a small text box explaining the One Child Policy and the Finding Story. The finding stories are quite short, displayed in an infinite carousel with arrows and also a dot-bar so you can jump between slides. This code was borrowed (see references below). The format of each slide in the html page is shown below:
In the css file:
In the Js file:
In the next page, the user has somewhat less control over the text. They can’t jump to where they want in a slideshow, rather, multiple text boxes appear with a fade in animation as you scroll down the page. The boxes also have rounded edges and a scroll feature to allow for more content in one box. The user then has to spend much more time reading each box, scroll, wait for the next to appear, and then read again. Each text box is situated in a div, shown below:
In the css file: 
In the js file, I use the scrollY position to determine when to fade in the boxes:
In the What Is Culture, the content is longer and much deeper, hence I use popup windows to display quotations from the adoptees. This way, the user can choose to read the captions I write, which help to lead into the sketch, or they can really deepen their understanding by opening the boxes, which also scroll, and looking at the primary source. The fact that these windows use a button ‘Expand’ and a close button correspond to an intentional action by the user. Moreover, the popup takes up the majority of the screen, so the user cannot be distracted by anything else on the page. A screenshot of this popup is shown below: 
This effect was created simply by the use of buttons that changed the opacity of the div box. The html code is shown here:
In the css file:
in the js file:
The instructions for the ‘game’ at the bottom of the page utilizes the same code as the carousel of the Our Beginnings page (see above). Additionally, it has a text typing function shown below:
A huge thank you to my friend Ian for helping me figure out this typing function, as well as the p5 sketch for this.
Finally, the last page is perhaps the most heaviest in content and the most ‘scholarly’ since it is based of Fanon’s work. Here, we have a black screen and white text, allowing for no distractions. A large text box situates itself in the middle of the screen with a simply white border, and an infinite carousel fades in on a timer. Because of this timer aspect and the lack of buttons, the lack of scrolling ability, and the simplistic sketch, the user is really forced to just sit back and absorb the text that is being presented on the screen. Again, it uses the same code as before in the previous slideshows, except on a timer. This is done in line 13 of the js file:
REFLECTION: I had such a great experience with making this project, because while making sketches on p5 is fun, being able to put them into the form of a website and to give them purpose is really what makes the process all worthwhile. I am glad I was able to explore so many more web development techniques, and I hope to learn much more in the future. Not only have I learned how important code and design plays into the efficacy of a website, but I’ve also learned how important a having humanistic perspective and approach is when it comes to things like this. Additionally, as I mention in my acknowledgement page, I think curating this website has contributing to healing apart of myself that I didn’t know needed healing. Through analyzing and sifting through the pages upon pages of responses, I learned so much about others, as well as myself. After being in Shanghai for so long, having immersed myself in a completely new community and culture, I felt that it was only a matter of time before I would have to make a project like this.
FUTURE DEVELOPMENT: As a thank you to all who I interviewed, of course I am going to share the site with them. But first I need to adjust the positioning and proportions of every page in order for it to be compatible on different screen types. This might involve some recoding at some parts. I also would like to add more transitions within pages, so that it truly feels immersive. Something like a continuous scroll effect would be something I’d like to explore. As mentioned above, I still have some entires that need to be incorporated in the What is Culture page. Finally, as for general development and goals I have for this project, I would like to extend it much further. Meaning, my one mode of digital ethnographic research was through online interviews, but I would love to explore other methods as well, such as analyzing people’s online behavior, communicating with adoptees I don’t know through social media, etc. Even further, I would love to even try conducting some in person fieldwork. Although the website would no longer be a digital ethnography, I think it could be a start to many new projects about adoption.
REFERENCES:
Carousels: javascript-image-carousel-building-a-blog-part-3-3oa0
https://usefulangle.com/post/313/css-flex-order-carousel-infinite
Vertical timeline:
Game: Ian Nacke