Chicken, Parrot and Sparrow

2020

    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.

    role web developer, UI/UX designer

    stack Vue.js and GSAP

    website Chicken, Parrot and Sparrow

    ITP class Thesis 2020

    source code GitHub

    Why I developed the website?

    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.

    Two passions and one talk that raised my awareness of the issues. Two passions and one talk that raised my awareness of the issues.

    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:

    1. I like birds.
    2. It's too ambitious to cover all kinds of economic animals.
    3. Among all the living beings, birds are unique as a group in terms of the different kinds of relationships we as people have with them; birds could be food, pets, and neighbors at the same time.
    Google search chicken, parrot and sparrow individually, and the interesting but evident results of how we position each kind of bird show up. Google search chicken, parrot and sparrow individually, and the interesting but evident results of how we position each kind of bird show up.

    About the project

    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.

    What's the problem?

    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.

    A diagram showing various ways of communicating animal rights related issues based on my personal experience evaluated by level of rationality and level of abstraction A diagram showing various ways of communicating animal rights related issues based on my personal experience evaluated by level of rationality and level of abstraction

    What's the goal?

    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.

    How to achieve the goal?

    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:

    1. Graphic designers and graphic design lovers
    2. People who're slightly aware of the environmental or animal rights issues
    3. Animals or birds lovers

    The other helpful list I made that constructed the principles of this project was the "don'ts", which were:

    1. Don't try to provide answers or solutions to the issues
    2. Avoid usage of data, statistics or diagrams that might get people bored
    3. Never contain any bloody or scary images that scare people away

    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.

    Prototypes

    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.

    The first set of experiments I made, including a research on the values of Helvetica, grid system and typography layout. The first set of experiments I made, including a research on the values of Helvetica, grid system and typography layout.

    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.

    Four steps of chicken being transformed into food presented by typography animations Four steps of chicken being transformed into food presented by typography animations

    Storytelling in a website

    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.

    1. Telling a linear story

    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.

    The functions of the side panel in animation pages The functions of the side panel in animation pages

    2. Telling a non-linear story

    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.

    The basic flow of the entry dots connection page and individual routes The basic flow of the entry dots connection page and individual routes

    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.

    User journey diagram of the website 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.

    The various view states in dots connection page according to user behavior. The various view states in dots connection page according to user behavior.

    Summary

    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.

    All the typography animations in the website. All the typography animations in the 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.