An interactive website features typography animation that inspires audiences to review why and how certain birds in modern urban life aren't living as birds but being objectified as food or products. This website is my Master's degree thesis project for Interaction Telecommunications Program (ITP) at New York University (NYU) in 2020.
When I was an undergraduate student in Taiwan, I recognized two passions I have, and one fact that raised my awareness. One passion has been my love for the birds, especially sparrows, because I enjoy listening or watching casually to birds in cities. The other one is my passion for graphic design, which has driven me to work as graphic designers for years. And finally, I watched a talk with one slide showing an image of a bird dying due to the plastic waste it swallowed. The image has not even raised my awareness of environmental and animal rights issues, but also driven me to contribute to make the world a more friendly environment for the animals.
My intention to come to my graduate program ITP at New York University was to find my unique approach to contribute to the issues by integrating programming, visual design, and multidisciplinary skills. To achieve this goal, I decide to create a work that consists of the web interface, graphic design, and birds for my thesis project.
I chose to focus on birds because of three reasons based on my research for the thesis project. The reasons include:
Though I had the idea to create a project that raises awareness of environmental or animal rights issues, I needed more concrete directions and plans to develop the project. The following sections were the
w questions I asked myself before jumping into the development process of the project.
Based on my personal experience, I categorized various ways of discussing animal rights issues with two-axis - the level of rationality and level of abstraction. I appreciate all kinds of approaches to raise awareness of the issues, but I know lots of people are unwilling to learn more about the facts because of the shocking content, and I also understand the rationale arguments might be boring for most audiences.
So, the problem I'm addressing is the lack of more unconventional ways to talk about animal rights issues. And I wanted to create something that's communicating the message in a rather emotional and abstract way.
To create a unique form of expression which I'm skilled at and comfortable with is the main goal of my thesis project. In order to achieve the goal, I also have two minor goals, which are creating powerful visuals that linger in the audience's mind, and leaving space for audiences to think.
In order to achieve the goal, a group of target audiences was required. I didn't want very detailed or accurate target audience profiles, because I only needed the list of audiences that helped me making critical yet quick design decisions, instead of a comprehensive strategy. The target audiences included:
The other helpful list I made that constructed the principles of this project was the "don'ts", which were:
With a clear understanding of the problems, goals, and principles to achieve the goal, I entered the development process of the website.
After weeks of research and ideation process, I decided to design and create a series of typography animations that re-present the process of birds being objectified as food and products.
During the prototyping process, I quickly made two critical design decisions that became the backbone of the website. The first decision was the usage of the typeface Helvetica as the metaphor of birds being objectified as items instead of living beings because of the typeface's pursuit of universalization. Secondly, I wanted to use fewer colors as possible in order to focus on key messages.
With the fundamental design decisions made, I quickly developed four steps of chicken being transformed into the meat with code, reaching the first milestone of the project.
The audience of conventional media, including films, music, or physical exhibitions, has to take in the story linearly. Websites, on the other hand, provides audience initiative to experience the story in a non-linear form. This interaction between website user and website interface is the most fascinating feature yet challenging problem for designers and developers.
The completion of the animations of the chicken part brought a huge challenge I didn't expect - how to connect the animations together to tell good stories about the birds on a website? Even before developing the parrot and sparrow parts, I started to try solving this problem first.
The first challenge was to tell a linear story, which was the stages that one bird went through. For example, what's the most friendly and intriguing interface to lead an audience to walk through the four stages of the journey of chicken being objectified into food? After a few unsuccessful experiments, I created a side panel that works as a navigation interface and an information card at the same time.
Once the story of one bird could be narrated clearly, the next challenge was to tell the stories of three birds in a non-linear but mutually connected form.
The solution I had was to build an entry page that led to an individual route without a certain order. To enter a route, a user needs to try to connect the dots between the name of the birds and its paired role. This interaction not only serves as an entry point of the stories but also encourages the audience to look at the birds from different perspectives.
Of course, a call-to-action button that leads the user back to the entry dots connection page was implemented at the end of each route of the birds, closing the loop of the flow. At this point, I could finally draw the comprehensive user journey diagram of the website.
To provide a better experience and to urge the audience to review the relationships between the birds and the connected roles, the dots connection page has to store the pairs that have been connected. The dots connection page has a few different views states according to user behavior.
There are lots of ways to improve this website in various aspects, including the visual designs and web development issues, and most importantly the effectiveness of communicating the messages I want to deliver to the audiences.
On the design and web development aspects, I'll make improvements consistently. At the same time, I'll reach out to more audiences for more feedback. Furthermore, I can try to submit the project to various platforms, publications, or exhibitions for more feedback, and hopefully, create greater impacts.
Looking back, I've really learned so much from building this project. The most fruitful experience is searching for the best approach to tell stories on a website.
Thank you for reading this post about the development process of my thesis project Chicken, Parrot and Sparrow. I hope you have something to take away from here.