Inappropriate online discussions are a problem, and a multi-year research project addressed this issue from the perspective of emotion psychology. I worked on the project as a designer and doctoral researcher, collaborating with psychologists. I developed several prototypes suitable for research purposes to address inappropriate writing and gathered extensive information about online writers' preferences related to these interventions. Next, I will tell about this video prototype of an audience for an online writer that I developed after the project and of the process that led to it.

My Task

In the research project, my task was to explore potential interface solutions for addressing inappropriate news comments through the means of speculative and critical design. Specifically, solutions that would address inappropriate news commenting by supporting the user’s emotional regulation. My ideas needed to be interesting to both the design team and psychologists, and serve as conversation starters in user research. This was because little knowledge existed on the opportunities and risks of intervening in uncivil online news commenting.

Ideation and Selection of Ideas for Further Development

I began by sketching ideas on paper and discussing them with my design team. This sketching-discussion cycle was repeated three times and resulted in me producing approximately 60 ideas. My design team included myself, as well as my supervisor, Professor Thomas Olsson of user-centered design. The design team also included Heli Väätäjä for a year, who has extensive experience in user-centered design.

Afterwards, I evaluated all my ideas from the perspectives of feasibility, novelty, and the challenge they posed in terms of thought, and I discarded about twenty ideas. Then, my design team and I evaluated the remaining 40 ideas together and found 19 of my sketched ideas to be promising. One of these was the idea of a virtual audience for online news commenters.

I created cleaner and more detailed wireframes of these 19 ideas using Balsamiq. Then, I presented the ideas to the entire research team, which included my design team and the psychology team (3 psychologists and 1 IT expert). The psychologists provided feedback that some of the ideas were not good because they included too many gamification elements or were unclear.

I took the psychologists' feedback into account and selected the 6 best wireframes, in my opinion, and gave a presentation on them at a meeting of journalists and media researchers to gather additional information on their relevance. I asked for feedback on the ideas from an audience of about twenty people. Based on the feedback, the 6 selected ideas seemed promising in terms of being interesting and sparking discussion. I concluded that they were suitable for research use where participants are asked for their thoughts. One of these ideas was the virtual audience for news commenters.

Wireframes as Part of Interview Research

The 6 wireframes I selected for addressing inappropriate news comments were part of interviews with 10 experienced Finnish journalists. Together with a more experienced research colleague, I planned the interview process and questions, and the colleague conducted the interviews with journalists. (Later in the project, I was responsible for conducting the interviews myself). The interviewees were asked to think aloud about the ideas presented to them, particularly in terms of their feasibility, etc.

From these interviews, I learned, among other things, that the idea of a virtual audience for news commenters was considered questionable but reasonable and worth further investigation.

Creating More Refined Images for an Online Survey and Survey Findings on the Audience Idea

Next, I decided to conduct an international survey of online news commenters regarding my ideas and sold the idea to the rest of the team. I created more polished versions of the selected eight ideas, including the audience idea, using Adobe XD and built illustrative storyboards for them. I also discussed the images with the design team and refined them based on that feedback. I also planned the survey and its questions together with colleagues.

The survey revealed the following about the audience idea: Several respondents noted that providing feedback to the commenter on their writing through a virtual audience would make the commenter feel too anxious or annoyed. For example: "I don't want to know right away that I'm being judged before the comment is even published." Additionally, some respondents pointed out that "[the feedback] might just encourage some people to continue commenting [to the point of negativity]." Despite this, some mentioned that they would find feedback helpful when writing.

Based on the conflicting results of the survey, I decided to create a version of the idea where the audience would only pop up when the user clicks "send" on an inappropriate comment.

Second Online Survey

I conducted a second online survey for news commenters, where I included the updated audience idea for evaluation and a comparison with a standard 'feedback window.' I also presented both with varying amount of instruction text for the writer on how they should edit their comment.

Based on the survey results, the audience that pops up when an inappropriate comment is sent is no more annoying to users than just a text box. It also became clear that what matters in whether the feedback is perceived effective or not is how precise the information in the feedback is. Vague feedback like "your comment may need adjustment" was not seen by respondents as effective as feedback like "this is how the audience might react to the comment."

Video Prototype with Adobe XD

After the project, I created a video prototype of the audience idea for my portfolio, but also because I was interested in how the idea of an audience constantly following the writer might work in practice. Through video prototyping, I was able to experiment with what kind of changes in the audience’s gestures would be appropriate. For example, I found that clapping hands or other quick movements would annoy me as a writer.

In this course project, myself and two others designed the addition of augmented reality content to magazines. The work included ideation, user research, and prototyping phases, all done collaboratively.

1. Initial Idea Description

In articles about cars, there are many pictures, but unlike a typical car magazine, here the reader can get different views of the car using 3D augmented reality. The reader can explore the car from their own perspectives and save their observations for other readers to view. The reader is, in principle, part of the article, having learned more about cars and perhaps even added value to the article.

2. We Conducted Surveys on the Understandability of Magazines and Interest in Augmented Reality Content

3. Sketching Phase

After analyzing and summarizing the results of the surveys we conducted and confirming our user experience goals, we began sketching. In the first sketching round, we drew eight different quick sketches of what the design could look like, how problems could be solved, and goals achieved.

In the second sketching round, we drew at least seven different sketches based on our discussions of the sketches made in the first round. We drew these sketches on rectangular sheets the size of a smartphone.

The sketches start with the basic idea of the starting screen, followed by the tutorial screen for first-time users, and then the multi-content screen that briefly displays all the additional content of the current article. The remaining screens are content screens, such as discussion area screens and image library screens, to which the user would navigate from the multi-content screen.

After a few initial sketches, in the second round, we realized that using the application would likely be best when the device is placed next to the magazine horizontally (contrary to how it is typically held in the hand). This also led to the idea that the device could detect page turning using smartphone sensors like the microphone, which would now be placed at the ends of the magazine's pages.

4. We Wrote and Drew the Application's User Journey and Interaction with the Magazine

5. We Used MarvelApp and Photoshop for Prototyping

6. We Created an Introductory Video