TRUE project

Giving students a voice

Giving students a voice

Giving students a voice

about project

TRUE (Trustworthy news and Related content for a Unified writing Environment) is a platform designed to support the creation of school newspapers in Portuguese. Its goal is to revitalise writing by providing tools that evaluate the veracity of published news and contextualise newly produced content. This project is developed within the scope of a research grant.

Challenge

How long has it been since you read a paper newspaper? With so many news online it can be hard to know which are credible.

Solution

Free online school newspaper creation platform that helps with spell checking and credible news research.

TRUE User Guide

My RESPONSABILITIES

  • Applied usability standards and design guidelines to improve user experience;

  • Added new features for newspaper customization;

  • Created support materials such as explainer videos and user guides (students and teachers);

  • Prepared and conducted field testing.

Role

UX/UI designer

Year

2022-2023

DURATION

9 months

Tools

Figma

Featured

CISTI’23 (conference presentation)

Partnership

oUTPUTS

benchmarking

interviews with teachers

usability checklist

2 rounds of field tests

pitch new funcionalities

Context

How did schools create their school newspaper?

🌿

benchmarking and interviews with teachers

This project was part of PÚBLICO na Escola, a partnership between the PÚBLICO newspaper and the Ministry of Education, aimed at promoting media literacy and critical thinking among students.


We needed to design for two distinct audiences.

  • For students (5th to 12th grade), we used simple language and visuals, focusing on creating news articles, correcting spelling mistakes, and verifying sources.

  • For teachers, we adopted a more institutional approach, focusing on the creation and review of school newspapers.

“...we created and reviewed the students’ news articles in Word Online.…

Teacher who took part in our tests

💭

Insights

  • During interviews with teachers, we learned that some had abandoned the idea of running an online school newspaper;

  • Others only produced printed editions;

  • Some ran extracurricular workshops where they used WordPress for publishing and Word Online for collaborative article review.

IMPROVEMENTS to the existing platform

How can we improve the platform before testing it?

🌿

usability checklist

The newspaper's backoffice is desktop-only, but the newspaper (what is published) can be accessed on any device. Before conducting the tests, I focused on improving accessibility and navigation, applying design guidelines to key elements such as buttons, forms, touch areas, and navigation components. I consulted guidelines from several sources such: Carbon (IBM's open sourch design system) and NN group.

One example was moving the 'View Newspaper' button to a more noticeable spot, which improved the flow for accessing the published work.

The ‘View Newspaper’ button was designed to promote better flow

Usability and FIELD TESTs

What is the best way to get feedback?

🌿

prepare and conduct usability and field tests

Since the platform was already being implemented, we conducted usability tests (evaluations on the image timeline) to observe first-hand how users interacted with it. Students were asked to create a news article, while teachers were tasked with reviewing one.

The tests included students aged 10 to 18 and teachers were carried out in two rounds:

  • 1st Round (Torres Vedras): 11 authors (students);

  • 2nd Round (Esposende): 3 editors (teachers) and 7 authors (students).

We had a report page where suggestions and bug reports were collected (post-evaluation feedback) and maintained contact every two weeks. This guided iterative improvements and ensured a better user experience.

Indicative diagram of the temporal space and organization of the evaluation rounds

Context of the platform at the beginning of the Torres Vedras evaluation

With students, we aimed to understand whether all participants were able to use the TRUE project tools effectively (e.g., synonym search, spelling correction, etc.) and to identify any difficulties they might encounter during the process.

Example of our news creation editor (including Spelling, News Search, and Related News from Público

We had general help always available, which adapted depending on whether a student or teacher profile was logged in. This help also served as an onboarding tool to introduce the platform to new users.

Some general assistance that was effective during onboarding and while using the platform

💭

Insights

  • Realized that custom colors and brand imagery are very important for the identity of the school newspaper.

  • Younger students were afraid of making mistakes while writing (even with a spell checker). This may be because they approach it with a “test” mindset, even though we tried to make clear that we were actually looking for their questions and errors.

  • Younger students were more accustomed to navigating on tablets.

First round results

What can we improve for the second round?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

Key improvements after usability and field testing:

  • ✅ Fixed bugs;

  • 🎨 Enhanced customization (colors, logo and newspaper name);

  • 💾 Auto-save to prevent work loss;

  • 🆘 Added more help options;

  • 💬 Improved feedback in modals and fields;

  • 🔗 Clarified related news functionality.

Adapting the newspaper's colors

Newspaper color customization using a color picker

Newspaper color preview

💭

Insights

  • I pitched the idea of improved customization to the stakeholders before user testing, but it was initially considered a lower priority. However, after the first round of field trials, I managed to convince everyone. I learned that in projects like this, each partner has their own agenda. Timing and user feedback make all the difference.

Second and final round results

What can we still improve?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

  • Improvements after usability and field testing:

  • ✅ Fixed bugs;

  • ✂️ Made image cropping more clear;

  • 💡 Prepared suggestions for future improvements;

  • 📚 Organized documentation to assist future user.

Add new image and clearer cropping buttons

Add new image and clearer cropping buttons

💭

Insights

  • Sometimes it is difficult to manage the project timeframe and understand that some decisions involving changes to the database cannot be implemented in time.

Context

How did schools create their school newspaper?

🌿

benchmarking and interviews with teachers

This project was part of PÚBLICO na Escola, a partnership between the PÚBLICO newspaper and the Ministry of Education, aimed at promoting media literacy and critical thinking among students.


We needed to design for two distinct audiences.

  • For students (5th to 12th grade), we used simple language and visuals, focusing on creating news articles, correcting spelling mistakes, and verifying sources.

  • For teachers, we adopted a more institutional approach, focusing on the creation and review of school newspapers.

“...we created and reviewed the students’ news articles in Word Online.…

Teacher who took part in our tests

💭

Insights

  • During interviews with teachers, we learned that some had abandoned the idea of running an online school newspaper;

  • Others only produced printed editions;

  • Some ran extracurricular workshops where they used WordPress for publishing and Word Online for collaborative article review.

IMPROVEMENTS to the existing platform

How can we improve the platform before testing it?

🌿

usability checklist

The newspaper's backoffice is desktop-only, but the newspaper (what is published) can be accessed on any device. Before conducting the tests, I focused on improving accessibility and navigation, applying design guidelines to key elements such as buttons, forms, touch areas, and navigation components. I consulted guidelines from several sources such: Carbon (IBM's open sourch design system) and NN group.

One example was moving the 'View Newspaper' button to a more noticeable spot, which improved the flow for accessing the published work.

The ‘View Newspaper’ button was designed to promote better flow

Usability and FIELD TESTs

What is the best way to get feedback?

🌿

usability checklist

Since the platform was already being implemented, we conducted usability tests (evaluations on the image timeline) to observe first-hand how users interacted with it. Students were asked to create a news article, while teachers were tasked with reviewing one.

The tests included students aged 10 to 18 and teachers were carried out in two rounds:

  • 1st Round (Torres Vedras): 11 authors (students);

  • 2nd Round (Esposende): 3 editors (teachers) and 7 authors (students).

We had a report page where suggestions and bug reports were collected (post-evaluation feedback) and maintained contact every two weeks. This guided iterative improvements and ensured a better user experience.

With students, we aimed to understand whether all participants were able to use the TRUE project tools effectively (e.g., synonym search, spelling correction, etc.) and to identify any difficulties they might encounter during the process.

Indicative diagram of the temporal space and organization of the evaluation rounds

Context of the platform at the beginning of the Torres Vedras evaluation

The ‘View Newspaper’ button was designed to promote better flow

Some general assistance that was effective during onboarding and while using the platform

💭

Insights

  • Realized that custom colors and brand imagery are very important for the identity of the school newspaper.

  • Younger students were afraid of making mistakes while writing (even with a spell checker). This may be because they approach it with a “test” mindset, even though we tried to make clear that we were actually looking for their questions and errors.

  • Younger students were more accustomed to navigating on tablets.

Empathize

What is it like to share a house?

🌿

2 face-to-face interviews and 6 questionnaires

Questionnaires provided an easier way to collect both qualitative and quantitative feedback. However, we identified that combining them with more informal, easygoing interviews could offer deeper insights.

Objectives:

  • Understand how participants organise the division of montly payments;

  • Identify moments of friction or perceptions of unfairness in cost-sharing.

First round results

What can we improve for the second round?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

Key improvements after usability and field testing:

  • ✅ Fixed bugs;

  • 🎨 Enhanced customization (colors, logo and newspaper name);

  • 💾 Auto-save to prevent work loss;

  • 🆘 Added more help options;

  • 💬 Improved feedback in modals and fields;

  • 🔗 Clarified related news functionality.

Adapting the newspaper's colors

Newspaper color customization using a color picker

Newspaper color preview

💭

Insights

  • I pitched the idea of improved customization to the stakeholders before user testing, but it was initially considered a lower priority. However, after the first round of field trials, I managed to convince everyone. I learned that in projects like this, each partner has their own agenda. Timing and user feedback make all the difference.

Second and final round results

What can we still improve?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

  • Improvements after usability and field testing:

  • ✅ Fixed bugs;

  • ✂️ Made image cropping more clear;

  • 💡 Prepared suggestions for future improvements;

  • 📚 Organized documentation to assist future user.

Add new image and clearer cropping buttons

💭

Insights

  • Sometimes it is difficult to manage the project timeframe and understand that some decisions involving changes to the database cannot be implemented in time.

Final remarks

This project is still active and is currently implemented in over 100 schools. In this sense, it is a highly relevant project that contributes to improving the daily life of many schools. This was the first time I worked with such young participants, and it was particularly challenging due to privacy and security considerations, as well as the need to account for school holidays when conducting evaluations and collecting feedback.

🔑

Takeaways

  • Increased complexity due to two distinct user profiles: students and teachers;

  • It would be helpful to add syntactic corrections;

  • Getting the results of news searches and viewing related news from Público newspaper, should be better aligned with users' needs;

  • We could offer more flexible text formatting: e.g., centered and justified alignment (that was avoided due to lower readability, but it might still have been preferable to give users the choice);

  • For future work, being able to export newspapers as PDF for printing could be important;

  • Using Google Analytics data could have been a good aproach to complement the field testing.

This project was challenging because I had to adapt to a fairly advanced platform. However, it was also a valuable experience, as the platform was already well-developed and allowed testing with a fully functional prototype.

I hope you enjoyed it. This was a glimpse of my work, and I am open to any suggestions.