Interaction Process

Concept Ideation

Originally I had looked into parallax scrolling, and wanted to evolve my idea around storytelling. However, when consulting with Prof. Ha I realized that my idea was too centered around the content of my website rather than the interaction element by itself. By suggestion, I looked more into the history of scrolling, infinite scroll, and the scroll bar. I was also inspired to use a play of the word scroll or to even take inspiration from everyday life. So I came upon the concept I have known as doom scrolling. By definition, it is the act of consuming negative media on the internet that can have a huge impact on your mental health. Prof. Ha also recommended that I source live news using JSON and API that we learned that day to enhance my idea even farther.

Overall, I wanted to encapsulate the idea of doom scrolling in my website by having a page that is populated with bad news the further you scroll to embody the user experience of literally entering the void of the doom scroll abyss.

handwritten notes
Notes based on feedback and ideation process

Visual Inspiration

For aesthetics I really liked the overcrowded look of the blank windows website that was recommended as a resource for the project. I eventually used this look in my design by recreating the white boxes and a shadow to add depth to the look.

I also created an are.na account to gain inspiration for the different ways people have utilized the scroll bar, but deviated my idea from these websites.

I also found inspiration from the research that I did based on the impact of the infinite scroll. Infinite scroll affects your mental health, attention span, and can even contribute to polarization and extremism. By incorporating the infinite scroll, I wanted it to be a symbol of never ending escape from bad news once you go down the rabbit hole. I want the user to feel overwhelmed with the nasty headlines the further they scroll. I also wanted the news to get worse the deeper the user goes.

Moodboard
Inspiration moodboard

Process

I originally wanted the visuals to be screengrabs of the articles themselves but realized that would be a lot harder when using just data from world news apis. So, I went with the simple white boxes and Times New Roman typeface to give it the classic newspaper look and a drop shadow to add some visual depth.

prototype of figma file
Original Vision of what it would look like


black and white box with times new roman text
The standard box that I evolved the rest around

For the JavaScript part I decided to create scope variables specifically for the batchsize which would gradually increase how much news populates the page as the user scrolls more. I also used an array for the range of sentiment so that the content would get progressively more negative. I used WorldNewsCatcher.com for the api and they had a rating system for the content of their news with 0.9 being happy to -0.9 being horrible. I was also able to filter out languages and countries from the documentation guide that the api provided. I have it set to the US, UK, Canada, and France for now. I also created a function to make the boxes a variation of sizes. I also utilized a scroll function to ensure that the website knows when to reload a new batch of news once the user reaches the bottom of the window.



World News Catcher API site
World News Catcher API site


There were two issues I ran into as well which is that I have a daily amount of data requests from the free api website. To continue testing my site I created a for loop with fake content to ensure the scroll interaction was working. The other issue is that the content of the article also tends to repeat itself.