Dimension | Web doc.
Selected to be presented at HCI International Conference 2022 and 2023 and published by Springer.
The Problem
Prejudice, as a social phenomenon, spreads through different areas of society, reaching also universities.
Could there be an interactive expository tool capable of stimulating the empathy of university students for immigrants? What would this tool look like?
The Outcome
After user research and having a better understanding of the target audience, UX methodologies were used to create an interactive web documentary (website).
The user tests showed that the ones who interacted on the page (experimental group) proved to be 90% more empathetic than the ones who didn't have the interaction (control group).
Besides that, the prototype contained the story of a Cape Verdean woman (Cláudia) and the test showed that among the 10 questions referring to this nationality, the experimental group showed more empathy in all of them.
What is "Dimension"?
"Dimension" is an interactive web documentary where users visit the immigrants who share a little of their story, culture, feelings, and opinions.
The set is a city in another dimension, where the user can visit immigrants who live in different countries of Europe. Each character (immigrant) has their own page, which corresponds to an episode in the documentary series.
On each character's page, the user navigates through the character's story and learns about different aspects of their life.
The page features quick but important interactions to keep the user's attention on the story told by the immigrant in each episode.
The project was developed to reach and stimulate empathy in the target audience.
The context
This project was developed as a master's thesis in the Interaction Design course at Universidade de Lisboa.
Methodology
User Centered Design
Project duration
6 months
My responsibilities
• UX research
Identify and understand the target audience.
• UX design
Analysis of similars, creating personas, empathy maps, product requirements, context scenarios, user journey map, site map, user flow.
• Ideation
Analyze the deliverables and generate solution concepts.
• Filmmaking
Lighting, capture, interview and editing.
• UI design
Develop wireframes, make graphic choices, develop the prototype.
• Conducting user tests
Thinking Aloud method followed by User Interview. Later, an empathy test based on the Empathy Quotient created by Simon Baron-Cohen was administered.
Publication
This research was adapted to a paper that was selected to be presented at HCI International 2022 Conference and published by Springer.
Discover
1. Context
2. Similars analysis
Define
3. Define the target audience
4. Questionnaire
5. Creation of personas
6. Empathy maps
7. User's goals /
business goals
8. Product requirements
Develop
9. Ideation
10. Context scenarios
11. User journey map
12. Site map
13. User flow
14. Documentary
15. Wireframes
16. Graphic choices
17. Prototype
Test
18. User test
19. Empathy test
(1/4)
Discover
1. Context
I read news and research on prejudice against immigrants at universities to understand the problem and those involved. Afterward, I carried out an extensive study on themes related to prejudice, immigrants and, also, on empathy and its role in reducing prejudice.
PREJUDICE
IMMIGRANTS
EMPATHY
2. Similars analysis
I found other projects that also had the direct or indirect goal of fostering empathy. These projects were evaluated for their pros and cons, as well as their form of presentation (digital, printed, exhibition, etc.) in order to know what is already being done, identify good practices (bringing inspiration for good ways to follow ) and identify the negative points (understanding what to avoid).
Define
(2/4)
3. Define the target audience
I defined the target audience based on the problem of prejudice in universities. The European public was chosen because Europe is one of the main immigration destinations in the world.
• European citizens
• Living in Europe
• Students
• 18 - 30 years old
4. User research
I developed a questionnaire that was answered by participants corresponding to the target audience in order to define their profile, enabling the development of a solution centered on the expected user. The questions in the questionnaire were divided into 11 groups, each with different objectives, important for knowing the target audience.
Part 1: Agreement
Part 2: Selection of participants
Part 3: Personality (priorities)
Part 4: Personality (self-awareness and emotional regulation)
Part 5: Contact with Others (Sociability)
Part 6: Contact with others (relationships)
Part 7: Contact with others
(interest in each other)
Part 8: Empathy
Part 9: Information sources
Part 10: Contact with Immigrants
Part 11: Demographic information
2 weeks
87 responses
5. Personas
With the results of the questionnaire, it was possible to divide the target audience into three age groups and the responses of each of these groups were analyzed based on most of their responses to each question. With the analysis and interpretation of responses from each age group, I developed three personas, each corresponding to one of the groups formed. The creation of personas was intended to ensure that the project decisions would be focused on the intended users, preventing personal beliefs from influencing the process.
Primary
Secondary
Secondary
6. Empathy maps
I developed an empathy map to highlight the important aspects of each person, enabling a greater understanding of each one of them, and consequently, increasing the level of designer-user empathy.
7. User's goals/Business goals
The business goals, even being focused on social objectives, were highlighted for a comparison with the users' goals, the latter now well defined. It was important to view this information to make sure that the next steps meet both of their goals.
Business goals
• Keep the user aware of the character's history;
.
• Awaken different feelings in the user towards the character;
.
• Encourage user-character empathy;
.
• Inform;
.
• Reduce prejudice against immigrants within European universities.
User's goals
• Be entertained;
.
• Show as an interesting person;
.
• Learn about immigrants;
.
• To be informed.
8. Product requirements
All the material collected and developed so far gave rise to the product requirements, which were important before starting the ideation of the solution, thus, the solution options would involve the aspects necessary to achieve the project goals.
MANDATORIES
• Integrate exhibition and interactive
elements;
.
• Humanize immigrants through narratives;
.
• Use different forms of narratives;
.
• Be funny;
.
• Be light (avoid possible personal suffering
caused by emotional empathy);
.
• Have short interactions (not requiring
prolonged attention).
DESIREBLE
• Inform data on the immigrant population;
.
• Share external content on the subject
(books, movies, etc.)
.
• Possible solution to be transported to the
physical world (interactive exhibition).
RESTRICTIONS
• Avoid possible personal suffering caused
by emotional empathy;
.
• Avoid possible discussions between
users;
.
• Avoid the possibility of offending
characters (immigrants).
Develop
(3/4)
9. Ideation
I have created two different solution concepts based on the material collected up to this point. Both were analyzed based on the product's requirements and the one which met more requirements was chosen.
10. Context scenarios
With the concept of a solution already defined, it was possible to create context scenarios, where each persona gained more life through a narrative that highlighted the routine of each one, their needs and their goals in relation to the product.
11. User journey map
With the context scenarios created, it was possible to specify the user's journey, defining how the user gets to know the site, how he uses it, what he does in addition to the main task and how he reacts to these interactions. With this, it was possible to define approach opportunities to be applied to the product. The approach opportunities applied to the project were those that fit within the user flow defined for the prototype.
12. Site map
I created the site map from a mind map, where I tried to relate the user's goals and the business goals with the concept of the website/webdocumentary. In the context of a fictional city, it was defined that the apartments would lead to the webdocumentary chapters (the character's page) and the public areas of the city would be destined to share information about immigration in Europe.
13. User flow
After defining everything that would be available on the site, I created a user flow, which defines the main user task within the site and which gave rise to wireframes, prototypes and tasks for the user test.
14. Documentary Making
Before filming the scenes/interview for the documentary, I defined (according to empathy studies) what reactions would be important for the user to have when watching the characters' stories. For each of these desired reactions, I created questions to ask the immigrants / characters that I thought would generate responses that, when presented in the documentary, would elicit those specific reactions in the user, increasing the likelihood of encouraging empathy.
I got in touch with 4 immigrants who live in Lisbon and the filming took place in their homes. I divided the filming process into 4 phases:
.
1. Assembling the light and capturing equipment;
.
2. Interview with the immigrant;
.
3. Recording of the immigrant teaching a typical recipe from his home country;
.
4. Recording of opening and closing scenes, as well as filming the interior of the house (context).
Wales
England
Brazil
Cape Verde
Interviews - Teaser
15. Wireframes
With the video material already captured, I was able to create the low and medium fidelity wireframes in order to define the ways in which the content would be presented and which interactions were present during the presentation of the immigrant's story in each chapter of the web documentary .
Low
Medium
High
16. Graphic choices
With this well-defined structure, I started choosing the visual characteristics of the webdocumentary /site according to the concept and characteristics of the target audience. The site's concept revolved around the idea of visiting a city located in another dimension or another planet,
so I decided to inspire graphic choices in 70s futurism, bringing a vintage, futuristic and slightly chaotic feel to the site. All of this with the aim of attracting the target audience's attention with irreverent visual communication, unlike the serious websites of NGOs or the like.
• Collage
• Metropolis
• 70's futurism
• Galaxy
• Pixelated
• Asymmetric
• Dark and contrasting tones
• Irreverence
• Space travel
Moodboard
17. Prototype
I applied the graphic choices to the high-fidelity wireframes, giving rise to the prototype (or high-fidelity wireframe), integrating animations and effects. To this step, I used Figma (in addition to illustrations and gifs made in Illustrator and Photoshop) and, as the software does not support audio and video, placeholders were used with images from one of the interviews. This prototype was used later on for the user test and improved after that, being used to the empathy test in its final form.
Test
(4/4)
Usability Test
Test 1
+
Empathy Test
Test 2
To find usability issues and validate the design.
To validate the project.
18. Usability test
I conducted a usability test using this prototype (without audio and video) with the objective, in short, to know if the site was easy and intuitive to use, if the chosen visual communication appealed to the participants and if the participants had difficulties with the interactions (as some of them were purposefully less common).
I conducted a usability test using this prototype (without audio and video) with the objective, in short, to know if the site was easy and intuitive to use, if the chosen visual communication appealed to the participants and if the participants had difficulties with the interactions (as some of them were purposefully less common).
The responses were generally positive, however, most participants, despite demonstrating enthusiasm for the challenge of discovering how to interact with the site, had difficulties with some of them. This led me to add pointers explaining how to perform some of the less usual interactions with users.
5 participants
Methodology:
Thinking Aloud + Open-ended Interview
Goals:
• Check if the user can complete the main task;
• Check how the user interacts with the prototype and if the interaction was as expected;
• Check the average time taken to perform the task;
• Identify problems;
• Identify possible problem solving opportunities;
• Improve the prototype;
• Improve user experience;
• Prepare the prototype for empathy testing.
Before the user test
Before the users were expected to explore the scenario. An arrow appeared for a few seconds pointing to the right side of the screen. It was expected that this indication would cause the user to try to explore the scenario to the right side, but that is not what happened in most cases. In some cases, the users didn't see the arrow, which disappeared too quickly, in other cases they didn't know how to move the screen sideways.
After the user test
After the user test, a quick explanation of how to use the touchpad to move the screen sideways was added. In addition, a bigger arrow was added to get more attention from users.
Another similar problem was with the indications that explained less common interactions. They appeared and disappeared too quickly, so most users didn't see this as they were looking at other parts of the screen.
For the final prototype, the indications were fixed on the screen until the user performed the intended interaction for the first time.
19. Empathy test
The changes and improvements identified in the user test were applied to the final prototype developed, partly in Figma and partly in HTML. At this stage I worked with the collaboration of a programmer who changed the character's page to HTML, including the videos and audios edited by me, which were not present in the prototype developed entirely in Figma by me.
The sample consisted of 30 participants. 15 participants were randomly assigned to the control group, which answered a questionnaire consisting of an Empathy Quotient Test [Baron-Cohen, S., & Wheelwright, S. (2004)] and questions developed by me (more focused on empathy for immigrants). The other 15 participants were randomly assigned to the experimental group, they had contact with the final prototype and then answered the same questionnaire.
Empathy test video call
30 participants
Methodology:
Empathy Quotient Test + Questionnaire
Goals:
To verify if the web documentary had a positive influence in the increase of empathy for immigrants.
Test result:
After analyzing the results, it was found that the experimental group proved to be more empathetic than the control group in 28 of these 31 questions (90%). The prototype contained the story of a Cape Verdean woman (Cláudia) and the empathy test showed that among the 10 questions referring to this nationality, the experimental group showed more empathy than the control group in all of them.
The results confirm that interaction with the web documentary provided a measurable influence in the increase of empathy for immigrants.
Final Prototype
LEARNINGS
What did you learn?
When developing this project I wanted to learn how to create interactive exhibits, but with the Covid crisis, I learned that the process can surprise us with new possibilities. I learned to think with the user's head and find the best way to approach the topic in accordance with the new reality that presented itself in the world. Furthermore, I learned to find ways to combine the “exposure” factor, with its contemplative characteristic, with the “interaction” factor, with its more active characteristic. It was a challenge not to overlap them.
Were there any insights from user research that surprised you?
During usability tests, most participants did not know how to move the screen laterally and this was not taught on the website, which resulted in an incomplete experience for these users. With this I could clearly see that designers may be too involved in the project and may not notice some possible problems in the product, highlighting the recurrent importance of testing.
What was the most challenging thing about this project?
There were many challenges during the project, but the most difficult was to apply the tests (usability and empathy) remotely, as not all participants had technological knowledge (to access and prepare the prototype correctly) or did not have the necessary software (such as Zoom or equivalent). But luckily the tests were successfully applied with a sufficient sample.
Can you show how you measured the success of the product?
The project's success was measured through an empathy test, which demonstrated that the objective of encouraging empathy for immigrants was achieved after the user contacted the documentary website/web, that is, the group that answered the empathy questionnaire after having contact with the product, demonstrated greater empathy for immigrants than the group that answered the questionnaire without using the product.