Finnish / Suomeksi

Dr. Joel Kiskola

Portfolio. Language: Finnish, English.



From the resume

February 2024 -

Postdoctoral Researcher

Drawing and studying future AI-enhanced news apps

2013 part-time work

Consulting on Web design

and coding HTML, CSS, JS

PhD in Human-Technology Interaction

January 2024

Designing UI interventions in uncivil online discussion. Link to doctoral dissertation

BA in Design

2015

Resume in LinkedIn


Read my resume in LinkedIn

Thoughts on my skills and their beneficiality to organizations

I have design, research, and strategic expertise. I excel at broadening the range of possibilities and identifying disruptions. While I enjoy creating beautiful prototypes in Figma, I do much more. Below, I present my skills across different areas of design.

1. Understanding People and Situations
  • Empathy and user-centeredness: I believe it's crucial to understand users' needs and desires. This increases customer satisfaction and loyalty, which in turn can boost sales and profits. It also helps to avoid failures.
  • Leveraging speculative design: Through questioning and experimentation, I can reveal market risks and technological opportunities.

Example: In my dissertation research, I developed UI prototypes for using AI to moderate online news comments — before ChatGPT was released.

2. Design Constraints and Analyzing the Designed
  • Clear constraints and expectations: I know that well-defined design constraints reduce misunderstandings and save time at different stages of the project.
  • External and internal guides: User requirements guide the design work. The work is also guided by design team's reflection, which can be supported with speculative design.
  • Attention to detail: Accessibility, usability, and visual clarity are key factors in excellent design.
  • Changing the game: It's important to consider new perspectives and/or shifts in approach. My knowledge of both design practice and design philosophies is useful in this.
3. Ideation and Workshops
  • Creative ideation: Innovative solutions are born through ideation and workshops. I can quickly sketch ideas and wireframes and facilitate open brainstorming.
  • Speculative design: I can use speculative design tactics, such as dystopian visions, to push the boundaries of ideas and provoke reflection.

Example: In 2024, I led ideation workshops on the future of media consumption with AI.

4. Prototyping and Testing
  • Prototyping: I can build prototypes with tools like Figma, Balsamiq, and HTML.
  • Usability and testing: By researching and testing prototypes, I ensure usability before major investments, reducing the risk of product flaws and post-launch costs.
  • Visual design: I can create polished-looking prototypes.

I have lectured for several years on visual design to master's students in the HTI 100 course at Tampere University.

5. Design Documentation

Good documentation: I ensure the continuity and efficiency of the design process. Clear documentation saves time and helps onboard new team members.

Thoughts on my skills and their beneficiality to organizations

I have design, research, and strategic expertise. I excel at broadening the range of possibilities and identifying disruptions. While I enjoy creating beautiful prototypes in Figma, I do much more. Below, I present my skills across different areas of design.

1. Understanding People and Situations
  • Empathy and user-centeredness: I believe it's crucial to understand users' needs and desires. This increases customer satisfaction and loyalty, which in turn can boost sales and profits. It also helps to avoid failures.
  • Leveraging speculative design: Through questioning and experimentation, I can reveal market risks and technological opportunities.

Example: In my dissertation research, I developed UI prototypes for using AI to moderate online news comments — before ChatGPT was released.

2. Design Constraints and Analyzing the Designed
  • Clear constraints and expectations: I know that well-defined design constraints reduce misunderstandings and save time at different stages of the project.
  • External and internal guides: User requirements guide the design work. The work is also guided by design team's reflection, which can be supported with speculative design.
  • Attention to detail: Accessibility, usability, and visual clarity are key factors in excellent design.
  • Changing the game: It's important to consider new perspectives and/or shifts in approach. My knowledge of both design practice and design philosophies is useful in this.
3. Ideation and Workshops
  • Creative ideation: Innovative solutions are born through ideation and workshops. I can quickly sketch ideas and wireframes and facilitate open brainstorming.
  • Speculative design: I can use speculative design tactics, such as dystopian visions, to push the boundaries of ideas and provoke reflection.

Example: In 2024, I led ideation workshops on the future of media consumption with AI.

4. Prototyping and Testing
  • Prototyping: I can build prototypes with tools like Figma, Balsamiq, and HTML.
  • Usability and testing: By researching and testing prototypes, I ensure usability before major investments, reducing the risk of product flaws and post-launch costs.
  • Visual design: I can create polished-looking prototypes.

I have lectured for several years on visual design to master's students in the HTI 100 course at Tampere University.

5. Design Documentation

Good documentation: I ensure the continuity and efficiency of the design process. Clear documentation saves time and helps onboard new team members.

Selected projects

Clicking on the image enlarges it, and when necessary, opens a description of the design. Videos start playing when clicked once, and double-clicking them will make them fullscreen. For some videos, it's also possible to open a story about the video.

Research project on ways to mitigate uncivil online discussion and a video prototype of an audience for online writers that I created at the end of the project.

Inappropriate online discussion is a problem, and a multi-year research project addressed it from the perspective of emotional psychology. I worked on the project as a designer and doctoral researcher. I will now highlight key points emphasizing the multi-phase process that led to the presentation of this video prototype.

× 

Research project on ways to mitigate uncivil online discussion and a video prototype of an audience for online writers that I created at the end of the project.

Inappropriate online discussion is a problem, and a multi-year research project addressed it from the perspective of emotional psychology. I worked on the project as a designer and doctoral researcher. I will now highlight key points emphasizing the multi-phase process that led to the presentation of this video prototype.

My Task

In the research project, my task was to explore possible interface solutions to address inappropriate news commenting using speculative and critical design methods. Specifically, solutions that would address inappropriate comments by supporting users' emotional regulation. My ideas had to be promising from a psychological perspective and serve as discussion starters in user research. The reason for this was that very little was known about the possibilities and risks of addressing inappropriate commenting, and information was sought from both journalists and commenters.

Idea Generation and Selection for Further Development

I started by sketching about 60 ideas on paper and discussing them with my supervisor, user-centered design professor Thomas Olsson, and postdoctoral researcher Heli Väätäjä.

I evaluated all my ideas based on feasibility, novelty, and difficulty, and discarded about 20 ideas. Of the remaining 40 ideas, 19 proved promising, such as a virtual audience for online news commenters. I created more detailed wireframes using Balsamiq and presented the ideas to the research team, which included the aforementioned individuals as well as three psychologists and an IT expert. The psychologists provided feedback that some ideas contained too many gamified elements or were unclear. Regarding the audience idea, the psychologists noted that it could concretely illustrate the emotions a text might evoke, and they found it promising.

I considered the psychologists' feedback and selected the audience idea and five other top ideas from the wireframes to present at a meeting with journalists and media researchers from Rajapinta Ry. I asked for feedback on the ideas from an audience of about twenty people via a short form. Based on the feedback from journalists and media researchers, the virtual audience seemed promising and thought-provoking, and it would thus be suitable for opening up discussions with research participants.

Wireframes as Part of Interview Research

The six wireframes I selected for solutions to address inappropriate news comments were part of interviews with 10 experienced Finnish journalists. The interviewees were asked to think aloud about the ideas presented to them, regarding their feasibility, etc. The results were published at CHI, the flagship conference in the research field.

The interviews revealed, among other things, that the idea of a virtual audience for news commenters was seen by experienced journalists as questionable, but sensible. Thus, I deemed it worth further research and planned lab experiments with prototypes.

Coronavirus and Online Survey for the Ideas

Due to coronavirus restrictions, all lab experiment plans had to be canceled, and since it was too early to test the ideas live online, the research on the ideas had to be conducted via a survey. With the support of my colleagues, I conducted an international survey for online news commenters regarding the proposed methods for addressing inappropriate commenting. I created more refined versions of eight ideas, including the audience idea, using AdobeXD and built illustrative storyboards for the survey.

In the survey I designed, each respondent evaluated two randomly selected ideas and then chose and explained which one was better. This setup produced two types of data: which proposed ideas were considered better than others (quantitative results), and what aspects were noted in the evaluations (qualitative results). The qualitative results were published in the high-ranking BIT journal, and the quantitative results at the mid-tier domestic Academic MindTrek conference.

(The accompanying image shows the quantitative results. Lines and stars indicate significant differences. One star means there is a 95% probability that the difference is significant, two stars 99%, and three stars 99.9%.)

Based on the quantitative results, the idea of a virtual audience was rated less effective in improving the behavior of inappropriate commenters compared to many other proposed ideas (see the left side of the accompanying image). The audience idea was also rated as more inappropriate than many other ideas, although most respondents did not find it particularly objectionable (see the right side of the accompanying image).

Qualitatively, it became clear that providing feedback to the commenter about their writing via a virtual audience could make the commenter feel anxious or annoyed. For example, one respondent said: "I don't want to know that I’m being judged before my comment is even posted." On the other hand, many mentioned they would find the feedback helpful when writing.

Based on the conflicting results of the survey, I decided to create a version of the virtual audience that would only pop up when the user clicked 'send' on an inappropriate comment.

Second Online Survey

I conducted a second international online survey for news commenters, in which the new version of the audience idea and a standard 'text-based feedback window' were evaluated as a comparison (see the accompanying image "text-based alert"). The survey also included a variable for how much instructional text was given in the feedback (see the accompanying image "More1, More2, Less").

According to the survey results, a virtual audience popping up when sending an inappropriate comment was no more annoying to users than a simple text box (see the left side of the accompanying image). There was also no significant difference in how likely users believed it would change the commenter’s behavior for the better (see the right side of the accompanying image).

Additionally, the survey revealed that what matters in terms of whether feedback is believed to work is how precise the information it contains is. Vague feedback like "your comment might need adjustment" was not seen as effective as feedback like "this is how the audience might react to your comment," which included a virtual audience.

Thus, the idea of a virtual audience still appeared viable.

Video Prototype with AdobeXD

After the research project, I created a video prototype of the previous version of the audience prototype because I was curious about how the idea of a constantly observing audience could practically function. With video prototyping, I was able to experiment with what kind of audience gestures would be appropriate. For example, I realized that hand clapping or other rapid movements would irritate me as a writer. I also wanted to showcase my skills in my portfolio with the prototype.

I added a reference to a fictional "VirneGPT" AI model in the video prototype, as current AI models can easily simulate audience reactions and emotional responses from different personas. However, there are still many unanswered questions, such as "Does the graphical style of the audience matter much—for example, could AI generate realistic faces?", "How important is the accuracy of emotional reaction simulation?", and "Would a virtual audience, which takes up a relatively large amount of screen space, be practical in real use?"

Coursework. Apartment finding tool for students

I Designed and Coded This Portfolio Website

The layout of this page is my own work. The functionality of the buttons and the image gallery is also my own creation. I chose to build the pages myself because pre-made solutions are not very flexible and contain unnecessary components for my needs, and they load much slower.

Coursework, prototype. Intelligent home insurance

This is a course project for the Artificial Intelligence and Insurance course. The student team consisted of three business and/or insurance experts and two UX/UI design experts, of which I was one (with less experience).

The project progressed as follows: we first collectively familiarized ourselves with IBM Watson's machine learning and the possibilities it offers. After that, we brainstormed together, leveraging the expertise of each team member. Following this, the designers took a more prominent role, creating wireframes that we discussed. Next, one of the designers created a prototype of the mobile application seen in the video, while I and others provided feedback. Finally, I took the lead in directing and producing this video presentation.

Coursework, prototype. New Media Experiences

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.

× 

Coursework, prototype. New Media Experiences

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

Contact

Email: joel.kiskola(at)gmail.com

Resume

I have my resume in LinkedIn.

Copyright © Design 2024 Joel Kiskola

×