Joe Lei Portfolio

Introduction

In Touch Foundation is a charity organisation founded for the support of homeless people in Yorkshire with services such as a mobile kitchen. Its official website was built mainly for volunteer applications, donations and communicating its vision of charity. Therefore, the website is aimed at users including homeless people, potential volunteers, donors and members of the public who want to learn more about the charity. The purpose of this report is to evaluate the usability, accessibility and technical robustness of the In Touch Foundation official website, in order to identify its strengths, weaknesses and areas for improvement that may inform a future redesign.

Methods of Testing and Evaluation

Heuristic Evaluation

A heuristic evaluation was conducted before the actual user testing as an individual inspection of the website interface, forming a judgment based on my own opinion (Nielsen and Molich, 1990). This method was chosen because it allowed the site to be reviewed against several usability principles, such as navigation clarity, consistency and visual hierarchy. However, heuristic evaluation can be subjective and may not identify all usability problems. In this case, it was used alongside other methods such as usability testing and journey mapping to provide a more balanced evaluation.

Usability Testing

To get an evaluation from real users, we asked three participants of different ages and backgrounds to test the website, using ‘Observation’ as our main research method. Observation refers to a systematic recording of phenomena or behaviour in a natural environment (Gorman et al., 2005). This method was appropriate because it allowed the researchers to observe how users interacted with the website throughout the testing process. More specifically, we used Participatory Observation which involves interactions and following the users during the process (Digital.gov, n.d.).

The participants are asked to complete a set of tasks, in particular, finding a page (event/donation page) or information (contact details). The success of these tasks is closely connected to whether the main purposes of the website (volunteer, donation and charity vision) can be fully presented. Overall, the Usability Testing aims to observe the whole process of users interacting with the website to find the usability issues, while the limitation lies in the small number of samples which cannot give a full conclusion of all users.

Journey Mapping

Similar to Usability Testing, Journey Mapping is an application of the Participatory Observation method where we recorded the steps participants took while completing a certain task in the Usability Testing (like finding the event page). The steps include first click, second click, confusion, give up/backtracking, outcome and pain points, which is useful for observing the journey of their task. In particular, the method is especially relevant for evaluating the navigation and content structure of the website because it can test whether the navigation is properly leading and whether the content is clear and organised for users to find. However, journey mapping mainly records the user path in relation to the website, so it does not explain the fundamental causes of a problem.

Focus Group

A focus group is an in-depth group interview that explores the views of participants through discussion and interaction within the group (Freitas et al., 1998). Freitas et al. (1998) found its usefulness lies in the fact that researchers can collect rich data in a flexible way and spontaneous interactions among participants are kept on purpose. In the testing, we invite five participants to form a focus group. The discussion focused on the clarity of the website, the visibility of key information and participants’ impressions of the design (e.g. colour combinations and schemes). However, some participants may be influenced by others when discussing the topic especially subjective ones, such as opinions about the website design.

Accessibility and Technical Testing

An accessibility test is essential for a website to maintain inclusivity for all users with different needs, for instance, a man with colour-blindness may need a design with distinctive colours. This test is based on Web Content Accessibility Guidelines (WCAG) 2, focusing on the general principles including Perceivable, Operable, Understandable and Robust.

The Technical Testing is conducted for the overall user experience for the website, which is beyond the simple visual appearance. This included browser and device compatibility, inspection of the code and consideration of basic Search Engine Optimisation (SEO) features such as the capability of browsing through multiple devices, especially on phones.

Usability and User Experience

This section evaluates the website with reference to the Usability Checklist (see Appendix II), focusing on navigation, information clarity, content structure and visual hierarchy. The methods introduced in the last section will be applied to support the analysis of usability and user experience.

Navigation

One of the main usability issues of the In Touch Foundation website is the inconsistency of navigation and task completion. According to the usability checklist, users should have access to essential functions and understand the mission of the website. However, data collected from the usability testing and journey mapping show that only some goals are achieved. For instance, the ‘Donation’ and ‘Contact Us’ pages were relatively easy to find, taking only around 5 to 10 seconds for participant 2 & 3, due to the high visibility on the front page and the navigation bar.

In contrast, the ‘Events’ page was much harder to find for users. Data collected from Usability Testing showed that it took more than one minute on average for participants to find the actual event page. In the journey mapping, the journey indicates that the participants were struggling to find the correct ‘Event’ page, starting from a common mistake (clicking the ‘Upcoming Event’ button) to other secondary menus under the main navigation bar. However, after repeated confusion and backtracking, most of the participants failed to find the correct page. In this case, the website achieves some usability goals more effectively than others, resulting in an uneven and sometimes frustrating experience for the users. Surprisingly, when I was doing the heuristic evaluation, I found the events were located in the ‘Volunteer’ page where users can sign up for any events. This further shows the poor navigation of the website which misleads and makes users frustrated. For a charity website, this is a serious issue because finding events and identifying the mission are key functions for potential donors and volunteers to get involved and understand the charity. In order to improve usability, the website can remove the ‘Upcoming Event’ button as the ‘Volunteer’ button has already fully functioned with all the events.

Visual Hierarchy

Another usability issue of the In Touch Foundation website is the weak visual hierarchy. According to the usability checklist, important content should be visually prominent, easy to scan and clearly grouped, so that users can quickly identify what matters most on the page. However, the available testing data suggests that this is not always achieved on the website. Focus group feedback described the site as “confusing and messy but gets to the point”, while the overall impression of the website was clear in some places but confusing in others. In addition, complaints about font and text size, as well as overall colour scheme, indicate that the visual presentation is not fully consistent across the site. Moreover, the Heuristic Evaluation Test showed the same inconsistency in a tiny detail. On the front page, the designer used both ‘X Follow’ and ‘Twitter bird icon’ for the same platform. This could make users confused about which one is the actual ‘X’ at present. In this case, the usability is weakened because users may need to decide what to focus on first and struggle to understand the overall structure of the page. As a result, the website may reduce scanning efficiency and create unnecessary effort during browsing.

To improve the usability, I recommend that the redesign focus on adjustments on the front page, such as replacing the rotating banner with a static hero image (simplify visual arrangement), and prioritise key functions like donation and volunteering buttons alongside the mission description on the hero image. Moreover, the website can also replace the ‘Twitter bird icon’ with the newest ‘X’ icon at the bottom of the front page and change the overall colour scheme (avoid using repeated green colour).

Accessibility

This section evaluates the accessibility of the In Touch Foundation website with reference to the Accessibility Checklist (see Appendix III), focusing on images, page structure and content presentation. According to the checklist, pages should use clear headings, meaningful link text and legible text with simple, accessible language. However, the User Research Data (see Appendix I) indicates that only some standards are achieved. In the usability testing, participant 3 described the site as “very difficult to navigate” because of poor contrast, while the observation of participant behaviour also suggests that some text was hard to read. This concern was strengthened by the focus group, which identified problems with colour combinations and a variety of fonts and text sizes across the site. In addition, journey mapping recorded that a deaf user could not understand the ‘About Us’ page because there was only one video without subtitles. This suggests that the website does not fully support users with different needs, which reduces accessibility since key information is hard to perceive and understand. To improve accessibility, the redesign should strengthen text readability, such as using a unified font and text size or breaking up content into shorter sections. Moreover, website can provide better support for alternative access features such as subtitles for all video content.

Technical Robustness and Professionalism

This section will evaluate the In Touch Foundation website from a technical perspective, including code validation, browser and device compatibility and Search Engine Optimisation (SEO).

I used the W3C HTML Validator to test the accessibility of the HTML code from the website. The validator identifies a set of repeated markup errors on the homepage. These errors have two categories: one is invalid id values on script elements and the other is invalid http-equiv values on meta elements. Although these errors may not immediately prevent the website from functioning, they indicate that the code does not fully follow the HTML accessibility standard. The markup errors reduce the technical quality of the website and possibly make future maintenance very difficult.

The website shows limited compatibility in different browsers and devices. The usability testing data indicate that the website performed less reliably on older mobile devices and under limited data conditions. In one case, general navigation became extremely difficult on an older mobile phone with restricted data, while another participant reported that the navigation bar would not load properly on 4G. These findings show that the website cannot run smoothly across every network condition, especially on mobile phones. For a charity website, this is a significant technical issue because potential users, like homeless people, may not always have access to high-speed Wi-Fi or the newest smartphones. If the website is being considered for redesign, the site should be optimised for loading on phones and tested across multiple network conditions.

For the SEO category, the website also shows weaknesses. The homepage title, “HOME | intouchfoundationuk”, is functional but not very descriptive. This means it does not communicate the main purpose of the organisation as clearly as it could for search engines or search users. To improve professionalism, the redesign should obtain a clear title for the front page to strengthen searchability on search engines.

Conclusion

In conclusion, the In Touch Foundation website is functional in some aspects otherwise has significant weaknesses. The report identifies several significant weaknesses in usability, accessibility, and technical robustness. The most serious usability issues relate to unclear navigation, weak content clarity and inconsistent visual hierarchy, especially for the event and mission page of the website. In addition, accessibility is reduced by poor readability and inconsistent text presentation while technical weaknesses are notable in limited mobile performance, HTML markup errors and a lack of descriptive titles for SEO. These problems are essential because they may influence the willingness to engage in the charity activity and also make sure anyone can get help regardless of conditions. Therefore, the redesign should prioritise a clear homepage structure, stronger main function visibility, improved readability and subtitle support, and more reliable performance on mobile devices. In this way, the website could communicate the vision of In Touch Foundation and support all the potential users effectively.

Action plan

References

Digital.gov. n.d. [Online]. [Accessed 29 March 2026]. Available from: https://digital.gov/guides/hcd/discovery-operations/observation-methods#content-start

Freitas, H., Oliveira, M., Jenkins, M. and Popjoy, O. 1998. The Focus Group, a qualitative research method. Journal of Education. [online]. 1(1), pp.1–22. [Accessed 29 March 2026].

Gorman, G.E., Clayton, P.R., Shep, S.J. and Clayton, A. 2005. Qualitative research for the information professional: A practical handbook. Facet Publishing.

Nielsen, J. and Molich, R. 1990. Heuristic evaluation of user interfaces. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Seattle, Washington, USA. Association for Computing Machinery, pp.249–256.

Appendix

Appendix I: User Research Data

Kai, Jack, Darcy, Joe, Mingyang

16/3/26

Usability Testing

https://www.intouchfoundation.co.uk

Participant 1

Age / background: 34 - Homeless

Device used: Old mobile phone with limited data

Task 1 - Find how to volunteer: Success Y - Time taken: - 5m Notes:

Task 2 - Make a donation: Success N - Time taken: - x Notes:

Task 3 - Find mobile kitchen times/location: Success N - Time taken: - x Notes:

Task 4 - Find contact info: Success N - Time taken: - x Notes:

Task 5 - General navigation, what does the charity do: Success Y - Time taken: 15m - Notes: Gen navigation was impossible due to the lack of data that our subject had. General navigation didn’t even work with a 4g network let alone someone with limited data.

Overall observations: On a mobile device while colourblind

Quotes: v

Participant 2

Age / background: 19 - Lewis - Uni student on 4G

Device used: old 4g phone

Task 1 - Find the events page: Success Y - Time taken: 2m:45s - Notes:

Task 2 - Find the champion: Success N - Time taken: 40s - Notes:

Task 3 - Find the donation page: Success Y - Time taken: 10s - Notes:

Task 4 - Find contact info: Success Y - Time taken: 5s - Notes:

Task 5 - General navigation, what does the charity do: Success N - Time taken: 2m - Notes:

Overall observations: Website Navigation bar wouldn’t load on 4g hence missing most nearly all

Quotes: "Quite slow! Events page was very hard to navigate."

Participant 3

Age / background: 19 - Cody - Uni student emulating colour blindness

Device used: normal phone on wifi

Task 1 - Find the events page: Success Y - Time taken: 54s - Notes:

Task 2 - Find the champion: Success Y - Time taken: 40s - Notes:

Task 3 - Find the donation page: Success Y - Time taken: 10s - Notes:

Task 4 - Find contact info: Success Y - Time taken: 5s - Notes:

Task 5 - General navigation, what does the charity do: Success Y - Time taken: 1m - Notes:

Overall observations: General website contrast causes difficulty for the user. Hard to read text.

Quotes: "Very difficult to navigate, poor contrast."

Journey Mapping

User 1 journey - finding what their mission is (What is our mission)

First click: About us page

Second click: Contact us

Where they got confused: After clicking the about us page

Where they gave up or backtracked: After searching after 10m

Final outcome: Couldn’t find it

Pain points: Web page was hidden behind 4+ links hence not being able to find the page.

User 1 journey - finding events page

First click: menu - upcoming events

Second click: donate arrow

Where they got confused: when upcoming events button didn’t work

Where they gave up or backtracked: after trying the events button multiple times and even tried the donation page but unable to find it.

Final outcome: Could not find it

Pain points: Upcoming events page didn’t work

User 1 journey - find how to be a sponsor

First click: Donate

Second click: Donate Today

Where they got confused: N/A

Where they gave up or backtracked: N/A

Final outcome: Found the page quite easily

Pain points: N/A

User 2 journey - finding what their mission is

First click: Intouch food kitchen

Second click: How can you get involved

Where they got confused: there was no clear button for that page.

Where they gave up or backtracked: After trying to find it for 5 mins

Final outcome: Couldn’t find it

Pain points: Angry, confused, what is this about, misleading, would give up on donating

User 2 journey - finding events page 2m30s

First click: menu - upcoming events

Second click: How can you get involved

Where they got confused: upcoming events button didn’t work

Where they gave up or backtracked:

Final outcome:

Pain points:

User 2 journey - find how to be a sponsor

First click: Events page

Second click: Fundraise for us

Where they got confused: No clear button/option to sponsor - have to go through many different pages to find.

Where they gave up or backtracked: When they tried to donate and contacted them but it wasn’t mentioned there

Final outcome: Found after 5m

Pain points:

One arm, one finger, one eye, and one limb

User 3 journey - finding what their mission is

First click: About us

Second click: The team

Where they got confused: When it wasn’t on the about us page (I am deaf and there were no subtitles so I couldn’t understand what they were talking about)

Where they gave up or backtracked:

Final outcome: Couldn’t find it

Pain points:

User 3 journey - finding events page

First click: Upcoming events

Rage baited after second task

One star

Focus Group

Number of participants: 5

Task given to group: Fill out questionnaire for a group who didn’t have data

How group worked together: Asked good questions about the website and helped them

Key things people said: What was easiest to spot on the website and what was hardest to find. General colour combinations and schemes

Common complaints: Font and text size changes, some buttons dont work as theyre supposed to.

Things people liked: How easy the website got to the point with the first 5 buttons.

Quotes: “This website is confusing and messy but gets to the point”

Overall impression of the site: Extremely clear at points but otherwise messy and confusing.

Appendix II: Usability Checklist

Homepage

Is the site identity and mission clear?

Does the page offer an overview of the site hierarchy? Is the search function prominently displayed?

Does the page entice the user into the site?

Does the page feature content that is regularly updated? Are shortcuts offered to the most frequently used content?

Visual Hierarchy

• Is there a clear visual hierarchy on the page? Is the content easy to scan?

• Is the first reasonable option an appropriate one? Are the more important features more prominent?

• Are things that are related logically also related visually?

Naming Conventions

• Are widely recognised names used on the page? Does the page have a clear name?

• Is the name related visually to the content unique to the page?

Clearly Defined Areas

• Is the page divided into clearly defined areas? Are elements ‘nested’ visually?

Obviously Clickable

• Are the interactive elements on the page obviously clickable?

Minimize Noise

• Are different elements on the page clamouring for attention?

• Are there unnecessary elements on the page causing background noise?

Navigation

• Does the page have persistent navigation?

• Does the site structure have clearly defined levels?

• Does the persistent navigation contain the five elements you need to have on hand?

• The site branding?

• A way home?

• A way to search?

• The sections of the site (primary navigation)?

• Utilities (such as Help, Site Map, Shopping Cart etc)?

Needless Words

• Can any of the text be eliminated?

• Does the page contain unnecessary ‘happy talk’? Can any instructions be eliminated or replaced?

Appendix III: Accessibility Checklist