Comfort &
Friendly Storytelling
Collaborative Animated
Documentary Platform
This project uses an online digital interactive platform that connects survivor and animation artists so then they can produce a collaborative work about a sensitive/unspoken story using animation.
Mobile App
iOS
Creative Collaborative
The use of media as a tool for social change needs a careful approach in terms of ethics. Ethical storytelling is crucial when working with a subject with a certain situation. One of the examples is working with a marginalized subject that might be living in an oppressed situation or living with trauma. Telling this kind of story can be very challenging.
The main purpose of this project is to give a voice to the voiceless, to empower them with an effective storytelling. I have realized that there is no safe way of capturing and telling a story of a survivor who wishes to remain anonymous; most of them who want to speak in public or in front of camera want to hide their real identities, either for their own safety or for the safety of those surrounding them. Therefore, anonymity is important in this stage, and finding a medium of storytelling that can enhance this issue is not simple.
At some point, people who experience an oppressed situation do not know how to speak up about the problem, not only because they are afraid of their vulnerable position, but also because they are afraid of the stigma that will follows as they become a survivor. Moreover, there is no specific platform that can accomodate the needs of this expression. Whereas when one survivor shares their story, usually it will inspire other survivors to speak out about the same issue. This can be evidenced when people began speaking out about their personal experiences during the #MeToo movement.
The question of using media as an appropriate tool to solve this problem remains in my head. Searching for an applicable and effective way of telling that kind of sensitive story is the most essential thing in this journey, and to make it happen it needs a careful design which involves a multi-disciplinary collaboration. This project uses online interactive platform that connects survivor and animation artists so then they can produce a short animated documentary about a sensitive/unspoken story. There are two mediums that are incorporated in the development of this platform, which are animation and interactive media.
* Please click on each content list to learn directly about the process or you can scroll down thoroughly.
Having extensive experience in using video as a tool to capture human stories and using them as a tool to express a true voice through non-fiction storytelling and documentary filmmaking seems not enough to solve that problem. Even though traditional video and filmmaking tools is getting better on capturing and processing more realistic images, when it comes to a story of a very sensitive subject there is always a kind of barrier that appears during the process. Protecting the identity of this kind of subject is another huge challenge.
More inclusive way of media production with a vulnerable subject.
At the end of 2019, there was an interesting case that involved some undocumented media makers who requested an apology from the producers of a Netflix series entitled “Living Undocumented”(Collective, 2019). The series tells stories of what it means to be an undocumented immigrant in the United States today. During the pre-production process, the producer of the series reached out to different immigrant rights organizations and undocumented activists, with the hopes to find individuals that might be interested in being featured on the series. The problem came up after one of the undocumented media makers thought that it was a good opportunity for them to get involved on the production process directly, not just as an outsider subject but also included on the production process. However, without any further consideration regarding the collaborative idea, the producers said that it wasn’t even an option to work with those undocumented media makers for the series.
According to the letter, the collective stressed that the outsider perspective of making their stories by not asking them to collaborate on the production has been perpetuated for a number of different projects. The exclusion problem is raised up because of their status as undocumented media makers. This exclusion has been happening for a long time, and it seems there is no clear path to resolve the problem. Therefore, an appropriate platform that is inclusive and more participative should be developed – not only in support of these two aspects of inclusivity but also as a way to create a more empowering platform for the subject. The subject is able to find a better way to tell their stories in a secure way and independently, without relying to other people or even big production companies to feature their stories.
There are obvious problems such as inclusivity, the production of sensitive stories and animosity on the use of media for storytelling. Therefore, how this media can create a change needs to be explained. Animation will be used to cover the survivor’s identity by replacing it with different characters and representations, and interactive media will be utilized to enhance the participatory process of this media.
Animation is an effective tool for social change as it can convey complex ideas in a short time, can appeal to various age groups, and can address sensitive issues in an open and unthreatening way
The platform will be developed in a mobile-app platform. My main role for this project is to become the moderator or facilitator. The survivor and the animator will work together as collaborators. This idea was initiated as the adaptive result of the current development of digital technology and the revolution industry 4.0. When people are having more access to mobile broadband and sophisticated gadgets such as smartphones, they can connect through the internet and established interactions via social media. This is an era when people can create personal content independently and publish it globally.
Therefore, I have listed some points that could explain some basic purposes of this project:
Discovery
Looking back to the time when I started to think about the idea of developing this platform, I was trying to develop my own animation documentary. I was searching throughout the internet to find animation software that is accessible, handy, and easy to learn by anyone on any different level. I found some free online platforms, which mostly are for educational or semi-commercial purposes. I found no narrative exploration on those existing platforms. Bouncing around my idea to different people including my advisors and the interactive professors at School of Visual Communication, I didn't find any satisfying answers. While exploring all the platforms online, I also watch one of the MFA cohorts Neketa Forde, who at that time was working on her short animated documentary about an asylum seeker, who fled from their home country because of gender persecution and residing in the U.S. From her project, I kept thinking that why there is no platform that connects those two types of people. A person who has a story but having difficulties telling it, and a person who is seeking a story and wanted to help somebody to tell the story. So, that basically how I discover the idea of developing this platform.
Inspiration
I keep exploring the idea, with the quest of finding existing platforms out there. One of my advisors suggested me to check a platform called HitRecord , it's an online collaborative platform to connect people from different backgrounds, skills, and education levels to create a collaborative project online. This platform was founded and developed by actor Joseph-Gordon Levitt.
Along the way, I also found Fiver , a marketplace for freelance creative individuals to share their skills and work with clients directly. I found another good example when I was reading a newspaper someday called Daivergent. This platform interestingly unlocks the unique aptitude of people on the autism spectrum, connecting companies to a high-quality workforce.
Daivergent then becomes one of the good examples of how developing an online collaborative platform can be used to solve any social issues. This is a more specific example of how an interactive media platform been used to create a change, within the spectrum of a vulnerable community. During my quest, I also found other platforms such as 1in6 , a project that also deals with survivors and photographers. The Bristlecone Project is a project by Dr. David Lisak, the co-founder of 1in6, an organization whose mission is to help men who have had unwanted or abusive sexual encounters deal with their trauma and live happier and healthier. Their mission also includes serving family members, friends, partners, and service providers by providing information and support resources on the web and in the community. This project is a good example of how media, especially portrait photography and documentary film, play an important role in expressing trauma by male survivors.
Recently, I also just discovered a platform called StoryCorps that compiles user-generated content using direct interview audio and then develops it into a great final piece of the story, they're also using animation as part of their final product. But I can see that the animation was done by a professional animator without any collaborative efforts.
Competitive Analysis
During my journey of finding inspiration and the existing platforms above, I also work on analyzing those examples. To analyze all those different examples I created three aspects to measure the interactive and collaborative components of each platform. The metrics are :
This aspect means that there is a differentiation between two different types of users involved in the platform. For example between storyteller and media producer, or survivor and photographer, someone with autism and the workforce, and etc. This separation is important to make the interaction simple. Just like on any other online platforms such as Airbnb who connects traveler and host, Uber who connects driver and passenger, and many more examples.
This aspect will measure how inclusive and participative is the platform, through their options of creating their profile, setting up account settings, the options that available on the platform and how it will represent the user when they finished setting up their profile.
The last part of the measurement aspect is about how the two types of users can collaborate and work together to create one piece work together as the outcome of this platform. Many of the existing platforms, unfortunately, didn't go in this direction, while in my opinion, this is actually the backbone of the platform that I'm currently developing.
To see the details analysis please see the table below:
Metrics | HitRecord | Daivergent | StoryCorps | 1in6 Project |
---|---|---|---|---|
Role Determination | Not clear | Yes | No | Yes |
Participation | Yes | Not clear | No | Not clear |
Collaboration | Yes | Not clear | No | Not clear |
The undocumented migrant worker as the survivor.
This project is dedicated for all kind of survivors, that's why the name of the paltform is "Surv". The survivors can be from any different issues, such as domestic violence, sexual assault, social presecution, and migration. For the first series as part of this thesis, I will feature the stories of undocumented migrant worker communities from Indonesia. I will be focusing on a specific type of Indonesian migrant worker who worked at cruise ships around the sea coast of the U.S. The Indonesian migrant cruise ship workers are not deployed in the deluxe part of the ship, such as on the entertainment side, dining-bar or even on the ship operational crew (captain, the staff captain, and seamen). The Indonesian migrant workers are mostly engaged in the hotel sector, responsible for the cleaning section, or as the hotel room boy, taking care of the food and beverage behind the kitchen door, or responsible for the galley or laundry place. According to an interview by Manola Abella in Labor education provided by ILO in 2002, migrant workers are among the most vulnerable people in society. They often come to destination countries where they are doing the jobs which local residents no longer want to do. They are regularly subjected to abusive, exploitative and discriminatory treatment, there is a term called “Three-Ds” jobs which denotes dirty, degrading and dangerous (Abella, 2002).
These migrant workers are at high risk of facing exploitation by their employer in the workplace. It relatively involves long hours of work but low wages. According to the stated report, these migrant workers are in the bottom level of all the crew ship workers. This unfair labor condition and discriminatory treatment force the Indonesian migrant workers to leave their contract and become undocumented migrant workers through illegal status conversion (Han, 2002). An Indonesian-American community magazine based in San Francisco known as Kabari reported in 2008 that 3 out of 10 Indonesian migrant workers on cruise ships violated their visa status and ran away from the cruise ship to find a job in the mainland of the U.S. This phenomenon is known to the Indonesian migrant workers’ communities as “jump-ship” (Digital kabari#16 jun08, n.d.).
There is a deep connection between the closer connectivity through easier broadband access to the internet with the increase number of migration populations
With additional aspects such as the network established through the advanced development of smartphone and social media apps, people can more easily get information regarding migration patterns and destination countries.
I started my interaction with the “exodus” Indonesian migrant worker in the U.S as just a pure connection because I am of the same nationality. I equipped myself with my previous experience in documentary filmmaking and started to hear their stories, took small observations of their activity that probably will be useful for my story bank in the future. During this observation, I found some sort of pattern that is looping throughout the migration cycle, and it involves the use of media and technology. On this specific case, at the modern era of networking technology and expansive broadband, these undocumented migrant workers have fully utilized social media as their way of entering the U.S unauthorized and have enhanced a probably “undetected” irregular migration pattern. Maintain their living in the U.S mainland for quite a while, sending remittances back home, assimilates with local by few numbers of marriage, growing up their business and becoming a big diaspora community in the U.S.
The undocumented migrant worker’s communities that will be featured on this first series are located in Marietta, Ohio and Parkersburg, West Virginia.
Ohio University Animation Club and Animated Documentary Class Students
For the animator side, I'm inviting the OU Animation Club members to test out the prototype platform. I was once joining their weekly meeting during my first semester at Ohio University. This club consists of a group of passionate animation students from the School of Media Arts & Studies.
During this prospective user scouting, I also reach out to the animation Professor, Kate Raney, who in my second semester helped me a lot in developing a non-digital animation project as part of my independent study "finding accessible animation techniques". Turns out on the Spring Semester 2021, Prof. Raney is conducting a new class called "Animated Documentary". So throughout that class, I proposed the idea and work-in-progress prototype of my thesis. The detailed participation of their role in the development of this thesis can be seen in the "user-test" section. Check the OUAC's instagram profile here.
The user persona is a projected user who will be utilizing the platform. These personas consist of two categories; One is the survivor who has a background in the migration issue, such as Fatimah a newly immigrated refugee from Syria, and Ridho an undocumented migrant worker from Indonesia. Another category is the animator. Molly is a beginner animator from Ohio University and Jerry is a professional animator. These individuals are fictional and not based on an actual person.
Survivor #1
Profile
Age: 23 years old
Occupation: Groccery Store Cashier
Location: Columbus, Ohio
Story
Fatimah is a refugee from Syria, she currently based in Columbus, Ohio. She is now working as a part-time grocery cashier and an advisor for the refugee and migrant center. She is willing to tell their stories when she flees from her home country. However, she is afraid to reveal his true identity because of a family-related problem. She is looking for a secure platform that is able to tell their stories when she is having spare time on the weekend.
Goals
Needs
Survivor #2
Profile
Age: 27 years old
Occupation: Sushi Chef
Location: Marietta, Ohio
Story
Ridho is an undocumented migrant worker from Indonesia. He fled from his past job as a galley steward on the Cruise ship. He is now working as a sushi chef and has been very active on social media to share his experience while being working on the U.S mainland. He wants to make more stories and inspiring youth to chase their American dream but he is afraid that if he reveals his real identity he will get caught because of his irregular immigration status.
Goals
Needs
Animator #1
Profile
Age: 19 years old
Occupation: Animation Student
Location: Athens, Ohio
Story
Molly is junior studying animation and integrated media with an emphasis on media for social change at Ohio University. She would like to gain more experience working with different collaborators. She also wants to train her animation and storytelling skills. She is willing to work freelance, as her preparation for her final thesis.
Goals
Needs
Animator #2
Profile
Age: 27 years old
Occupation: Freelance Professional 3D Animator
Location: Los Angeles, California
Story
Jerry has been working in the animation industry for almost 7 years, he has experience working in multiple different studios and creative agencies from LA to NYC. He would like to continue his education and gain a master’s degree because he is interested in teaching at University. He is willing to work pro-Bono to share his years experience in the animation industry.
Goals
Needs
Site Maps
I started to imagine the interaction between two prospective users above by making a rough sketch of site map. This site map has became the first step to reflect on several aspects, such as the position of the subject involved (users), and the objective of this platform for each users. While sketching the site map, I keep questioning what's this platform beneficial for the survivor side? What's this platform valuable for the animator side? Through this site map, I am also imagining on how all the options of each users when they start to utilize the platform. Below are the detailed site map on the user on boarding and two distinction on the user profile creation. Click on each image to see the details.
User On Board
Survivor Profile
Animator Profile
Following the site map, I sketched the wireframes and then developed the low-fidelity wireframes using Balsamiq. This software is really useful to develop a wireframe, since it provides template to start imagining on how the platform looks like.
This is an example of low-fidelity Mockups of the completed profile.
This is an example of user on boarding page, when the first time of the user ready to login their credentials.
This is an example of role determination page, when the user decide what are they going to get involved on this platform.
This is an example of low-fidelity Mockups of the entry on animator experience.
This is an example of low-fidelity Mockups of the animator work specifications, there are three different options on 3D animation, 2D animation and non-digital animation.
This is an example of low-fidelity Mockups of the time investment on how both users will invest their time on this platform.
This is an example of low-fidelity Mockups of the story uploadment, the survivor can share their story using text, picture (Photo/Video) or audio.
This is an example of low-fidelity Mockups of the completed profile steps.
This is the most crucial and comprehensive stage of this project. Because on this phase it involves designing the prototype, designing the logo, creating a character, choosing the right color scheme and finding the right thypography. All this process will set up the style guide to shape the face of this app.
In the beginning, I was only going to create a logo for the platform. I did many iterations by sketching the font logo and pictorial logo on my sketchbook. While working on the logo, I was also trying to find the right typography. During the process, I found out that the first draft of the logo looked very formal. The slogan of "secure story" doesn't feel fit to the goals of this platform. I'm taking an alternative way, by developing something that relates to what I learned from the animation side. Which is start by developing a character. I've been thinking that hopefully, this character could be a good "neutral" representation of the users. I will elaborate more about the character development in more sections below.
Above are some sketches of how I iterate the logo and character design. I wanted to create a visual identity that is very simple, started sketching multiple lines to shape the logo and the character. One interesting starting point when I developed the character was when I wanted to represent the expression of the users after they use this platform. One of the purposes of this platform's development is to give a comforting space to those who are in a fragile position and not able to tell their stories, so I want to represent the expression after the user utilized this platform, which is a relieved expression.
So, as you can see in the picture above. I finally develop the logo and character based on the relieved face. These three combinations of the logo and the character first is the font logo - all capitals using humanist typeface called "Gill Sans". The second is the face of the character that represents the relieved face. Then on the third component is the three curve components which are transformable to create a "wave" that also represents digital connection and collaboration. Below is the specific setting on how to use the logo on different media.
I named this character "Survy", the face represents a feeling of relief. I created four different actions of the character, which then I put these characters in the introduction of this platform. Those actions represent the comforting feeling that I want to achieve through this platform. Like sitting and listening to each story, interacting using digital devices, and one action that represents movement.
Turns out that there is another online platform that also using the same visual identity and expression called "Headspace". So I made a little modification to its smile. Please take a look at the simple animated example below:
I initially wanted to use two primary colors which are red and yellow, with the idea of those two colors can represent urgency and attention. On the rough sketch of the visual identity above, you can see the original red and yellow colors. Then I twist a little bit of the color into red magenta and dark yellow, so then the app looks more informal. I added two other secondary colors which are light blue and green for the accents and buttons of the platform.
Dark yellow represents attention, personal power, and self-confidence, with the hope that it can match the concept of how survivors are independently able to tell the stories. The red magenta means universal love, it also promotes attention, compassion, and cooperation. With the hope, it can represent another main concept of this platform, which is working in collaboration.
I choose two different typefaces for this platform, under the umbrella of a humanist font. This typeface is characterized by the presence of shape by hand. The concept of this typeface hopefully linear with the main idea of developing more comfort and friendly platform of storytelling.
"Gill Sans" is picked as the heading text of this overall platform, even this typeface is used for the font logo. You will see that this heading also been used througout this case study and on the app as well. For the body text, I picked "Epilogue", because this typeface looks modern, handy, but can give a good contrast with the heading typeface.
Interactive Prototype
After finishing the design materials and the style guide, I incorporated all materials together into an interactive prototype using a prototype software called "Figma". Figma has been very useful in providing an interactive and shareable platform to build the prototype. I praised all the features of this software. Including the framing windows for mobile applications, the ability to edit .svg files, shaping buttons, and how this software has been useful in providing icons and accents to shape the prototype looks so professional. With the additional combination such as the character design, pick of colors, and choice of the typeface. This process of developing the prototype has been the most exciting part of this project.
User Test
One of the features of using Figma as the prototyping software is that this software has a very efficient connection to the user test platform called "Maze". I can automatically connect the prototype that I'm developing from "Figma" to the user test platform "Maze". Maze will record all the user/research participant’s decisions (“clicks”) when they navigate the prototype. The recorded interaction (user test result) then will be used to determine the development of the real application.
The projected users/research participants will interact with the prototype through Maze. They will navigate throughout all the paths and options in the prototype. The choices participants make will be accessible by me via Maze, but no personal information will be collected. At the end of the user test, there will be questions that ask about the effectiveness of the prototype. These questions , such as:
Currently, within Maze, I have created two different categories of user tests. These categories were created by looking back to my competitve analysis of the exsisting platform. They are the “Role Determination” and “Participation Determination”, on this stage, I haven't reached to the part of making the "Collaborative Engagement". On each category it has its own path, allowing users the opportunity to choose different options. Through their process of interacting with the paths, their choices will be recorded. The recorded interaction will be analyzed as part of the development of the design process. If you're interested in participating the user test, please click to two buttons below to do the user test.
User Test Result
I stopped the user test process on phase 01 at the end of March 2021. Since then I am working on analyzing the result. Surprisingly Maze has been also very useful in providing a very comprehensive result, below there are a few detailed breakdowns of the results. Including the quantitative data on each user (animator and survivor), example screens that need to rework, heatmaps and clicks analysis as well as the preferences result on the participation determination test.
Quantitave User Test Result - Animator Side
Metrics | Total Testers | Misclick Rate | Average Duration | Average Success | Average Bounce |
---|---|---|---|---|---|
Role Determination | 7 | 20.8% | 8.7s | 42.9% | 14.3% |
Participation Determination | 7 | 5.6% | 2.1s | 14.3% | 28.6% |
Path Analysis
Example one screen needs to rework - Role Determination at screen 7
Original screen
Clicks screen
Heatmaps screen
On this screen 7 the misclick rate is high: 7 testers misclicked and could have got lost! In a finished product this can lead to lost users.
“As a user, I should never have to devote a millisecond of thought to whether things are clickable — or not.”
However, according to that analysis, I would disagree with that result. The misclick rate is high not because of the wrong design, but it's because most of the users didn't carefully read the instruction at the beginning of the user testing process. I've informed the users that they wouldn't be able to fill up their personal data. But it seems the users were intuitively clicking the form and makes the misclicks result high. Following the screen needs to rework, below are the result of the user tester's answers. These feedbacks were very useful for the future improvisation of the platform.
How simple was the process of creating profile
[Opinion scale question 1-5]
Anything you would like to add or remove along the process of this role determination?
[Open question]
Is it clear enough to determine your role on this prototype?
[Yes/No question]
Result on the user preferences on the participation determination
Work specification screen
Work experience screen
Time investment screen
Story preferences screen
Working in collaboration screen
Upload work screen
“Users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they are on the right track.”
According to the heatmaps analysis on each screen and the participation options, I found very interesting results. Here's the breakdown on each steps:
To see the details user test report please click two links below:
Quantitave User Test Result - Survivor Side
There are fewer users who have taken this test, and on this test, I'm using "Bahasa Indonesia" because the user targeted on this test is the undocumented migrant worker from Indonesia. In this process, I found similar issues when the user is doing the test. Most of them weren't pay attention carefully to each step of the test and didn't read the detailed instructions. I think for the next phase I need to do more "in-person" user tests.
Metrics | Total Testers | Misclick Rate | Average Duration | Average Success | Average Bounce |
---|---|---|---|---|---|
Role Determination | 6 | 12.4% | 4.3s | 50.0% | 50.0% |
Participation Determination | 4 | 13.0% | 4.4s | 75.0% | 0.0% |
Example one screen needs to rework - Participation Determination at screen 9
Original screen
Clicks screen
Heatmaps screen
One example screen that needs to rework is screen 9, I think this is such an interesting result because this screen is built for the role determination of the platform. As you can see there are many users clicking the survivor option, but they were confused about which button they should click. Below on the open question section, there is one feedback that tells specifically about the screen.
How simple was the process of creating profile
[Opinion scale question 1-5]
Anything you would like to add or remove along the process of this role determination?
[Open question]
Is it clear enough to determine your role on this prototype?
[Yes/No question]
When I'm on the role determination screen, it would've been better if the entire banner was clickable. Or I would suggest that the button is separated from the banner, so it's more clear and didn't block the banner illustration.
Details result on each tested path from the animator side
Identity screen
Story topic screen
Time investment screen
Language preferences screen
Working in collaboration screen
Upload story screen
According to the heatmaps analysis on each screen and the participation options thet the user chose, I found very interesting results. Here's the breakdown on each screens:
To see the details user test report please click two links below:
This project is a manifestation of what I've learned for the past 3 years at Ohio University. I stayed on the linear track of learning documentary/non-fiction storytelling, but I'm expanding my area of media productions. I learn how a documentary should be made using animation, I familiarize myself with the key concept and how applicable this medium to certain needs and stories in animated documentaries. I also study how the interconnectivity of interactive media expands the possibility of collaborative and participatory storytelling. Through this project, I'm trying to seek the solution by seeing the overall problems from a higher perspective. Instead of making my own animated documentary about specific issues, I decided to create a platform that can connect two different stakeholders, which are the storyteller (survivor) and the creative producer (animator). The challenge is again to connect these two individuals which came from a completely different positions to work together.
I've been really enjoying the process of developing this project, I can reflect on the beginning of having the abstract idea of this platform until I finally wrote this case study. The process is not only taught me that I upgraded my skills in developing the two new area media productions which are animation and interactive media, but also my design and coding skills. This is still in the very beginning phase of a long process to achieve what I always mentioned on how to utilize the right tools/medium to enhance more inclusive, collaborative, and participatory media to create a social change. During the process I also wanted to highlight some basic tenets that need to be improvised for the next phase of the project, below are the detailed key points:
The goals why I'm developing this thesis project is to seek an efective way of storytelling, which comforting, save and friendly for the survivors. I would say that at this point, it's still too early to measure the success of this platform and accomplish the goals mentioned. This platform is one of an early attempts to achieve that goals.
This is one of the most important aspects on this project, which I keep mentioning on a different level of the process. However, because of the limited duration and other priority of this project I haven't been able to reach into this step. The collaborative process through this platfom is not developed yet, therefore no user connection has been built. It also results there is no survivor's story to be animated in this phase.
This relates to several aspects, first is Maze has been very helpful in providing a remote user test platform. So I don't need to meet with my prospective user in-person, especially during this pandemic covid-19. However because of the remote user test, there are some process that is missing. I can't see and assist how the user utilize the platform directly. This creates why many users misclicked some of the screen, because they didn't carefully pay attention or read the detailed instruction. That's the second aspect. For the next plan of the user test process, I'm hoping that I could conduct more in-person and intimate user test so then the user can really understand what's the purpose of this platform for.