Evaluate Report

Website: Leeds Food Aid Network — https://leedsfoodaidnetwork.co.uk/

Module: COMM1730 Interface Design

Student Number: 201968744 | Word Count: 2602

1. Introduction

Leeds Food Aid Network is a charity in Leeds focused on the coordination of food aid organizations and aid for those in food poverty. The Leeds Food Aid Network website serves as a resource to inform readers about where to find advice on emergency food support, and it provides resources for volunteers of partner groups (Leeds Food Aid Network, 2026).

One of the objectives of the network is to properly refer people to food resources, support rational food distribution in the city, and improve communication between partners. Websites serve as an information and networking tool for this project (Garrett, 2011).

The main target user groups of the website can be divided into two groups: front-line workers and volunteers, and common people who need food aid and those who want to help. Due to the varied needs of different user groups, the website should be user-friendly, easy to understand and use for every user group, including those with low computer skills (Norman, 2013). As Gube (2010) pointed out, “UX focuses on users’ feelings when using the system, while usability focuses on the usability and efficiency of the interface” — both dimensions will be considered in this evaluation.

2. Methods of Testing and Evaluation

In order to carry out an in-depth evaluation of the Leeds Food Aid Network website, the research utilized a combination of usability testing, heuristic evaluation and accessibility evaluation. The reason for combining these three methods can be analyzed from two aspects, that is, the user group perspective and the expert perspective, in order to make the evaluation results more comprehensive and reliable.

Usability Testing

Usability testing involves observing real users as they interact with the website, allowing researchers to identify problems. Five participants were selected and invited to take part in the research study, chosen from the main target users of the website: food aid seekers as well as volunteers. Participants were asked to complete a series of realistic tasks, such as finding the nearest food bank, obtaining donation information, and understanding the purpose of the organization (Dumas & Redish, 1993).

The test process adopted a think-aloud protocol to encourage participants to express their ideas during the operation, so as to gain an in-depth understanding of their cognitive processes, expectations and decision-making methods. All tests were completed on real devices such as laptops and mobile phones, and the test environment simulated users’ daily usage scenarios.

Heuristic Evaluation

This study is based on Nielsen's ten usability heuristic principles (Nielsen, 1994) for expert evaluation. The method identifies problems in the design, such as consistency, feedback mechanism and error prevention, by systematically comparing the interface with the established usability principle.

The reason for choosing this method is that it can efficiently find structural problems in interface design without the participation of a large number of users, which is especially suitable for early or systematic analysis. This assessment focuses on the following principles:

These principles provide a clear analytical framework for evaluating the overall usability of the website. In addition, this evaluation draws on the concept of “truck test” (Krug, 2006) to assess whether users can quickly locate on the website.

Accessibility Evaluation

Accessibility assessment is based on WCAG 2.1 (W3C, 2018) and combined with the WAVE Automated Testing Tool (WebAIM, 2024). The evaluation focuses include:

These standards are crucial to ensure that disabled users, such as those who use screen readers or rely only on keyboard operations, can access the website smoothly. The use of automated tools is combined with manual inspection to improve the accuracy and comprehensiveness of the evaluation.

Browser and Device Compatibility Testing

To comprehensively assess the website's technical robustness, functional testing was conducted across the following browser and device combinations:

Testing covered page rendering, interactive element functionality, responsive layout performance, and completion rates for core tasks.

3. Usability and User Experience

This section is structured with reference to the Usability Checklist (derived from workshop materials) and Nielsen's heuristic principles (Nielsen, 1994).

Navigation and Information Architecture

In general, the site structure is logical: different information can be found under “Food Aid,” “Donate,” and “Advice,” which is aligned with the mental models of users and corresponds to one of the heuristics, specifically “match between system and real world.” Still, it is quite inconvenient to use it on a mobile device.

Figure 1. Mobile hamburger menu showing unclear navigation structure and multiple interaction steps.

Nielsen's “flexibility and efficiency of use” heuristic principle emphasizes that the interface should meet the needs of both novice and expert users. The hamburger menu needs to be clicked three times or more to reach the donation information page, which fundamentally violates the experience principle of the most vulnerable users of the website — those who seek emergency food aid, because they are least likely to have the a priori experience of operating complex mobile menus (Norman, 2013).

This leads to a direct contradiction between the social mission of the website and its interface design. Considering that people seeking food aid often visit the website in stressful circumstances and may use mobile devices with unstable network connections, the 40% increase in mobile task completion time is particularly significant. The extension of the task completion time will not only reduce efficiency, but also cause users to completely abandon the operation — which is a failure that will have practical consequences for charity websites.

Figure 2. Task scenario showing how users navigate the homepage to locate food support information.

The think aloud protocol was applied on the test, asking users to say what they were thinking while working. The method is useful in discovering difficulties in actual use and provides a needed way to detect obstacles to user experience, which is not possible to find on expert assessments alone.

According to the Usability Checklist's “Navigation” dimension, the website exhibits the following deficiencies:

User Testing Results Summary

Table 1: Usability Testing Results
User ID Task Category Task Description Problem User Feedback / Observation
P1 Navigation Locating donation information on mobile Hamburger menu depth too deep, requires multiple clicks “I didn't know which one to click, tried several times.”
P2 Navigation Locating donation information on mobile Menu items not prioritized “Where is donation? I thought it was under ‘Support Us’.”
P3 Navigation Locating donation information on mobile Hesitation, incorrect clicks “I clicked wrong, went back and tried again.”
P4 Feedback Submitting contact form No confirmation message “I submitted but didn't get any feedback, not sure if it worked.”
P5 Feedback Submitting contact form No confirmation message Same as P4, expressed uncertainty.
All Navigation Locating donation information on mobile Average completion time 40% longer than desktop Observed across all participants.

Visual Design and Consistency

The website generally performs well, but it violates the “Consistency and Standards” feature of the Usability Checklist through inconsistent visual design across pages: varying colour palettes, typography, and layout. Furthermore, some pages lack proper information structure, and the content is presented as a dense text block.

The website fails to meet the “Scanability” criterion of the Usability Checklist, as its pages lack headings, lists, and clear visual hierarchy — an omission that increases cognitive load and undermines usability, especially for users with limited technical experience.

Feedback and System Visibility

The website offers minimal feedback as a user experience. For instance, there is not any confirmation information after the form submission, and the loading status is equally vague. This goes against the “visibility of system status” principle.

In the usability evaluation, there were two respondents who were unsure whether or not the forms were submitted successfully. Their lack of confidence in further usage was associated with that. Except the problem of causing the failure of missing form confirmation, this absence has a deeper user experience dimension in Gube’s (2010) sense: users who are seeking emergency food aid — when the system fails to provide any peace of mind, may feel anxious and distrustful. In this circumstance, the emotional cost of uncertainty is much higher than that of ordinary commercial websites, so feedback is not only about solving usability problems, but also about the dignity of users.

Error Prevention and User Control

The website does not implement enough measures targeted at preventing user mistakes. If the user encounters a mistake, there is no clear sign of coming back. Moreover, it is contradictory to the principles of “error prevention” as well as “user control and freedom.” For example, when giving the donation form, the system will have prompts that if the required field is empty but the page will refresh before the user sees the error message, thus confusing the users.

4. Accessibility

This section is structured with reference to the Accessibility Checklist and WCAG 2.1 standards (W3C, 2018).

Accessibility Overview

As shown in Figure 3, the WAVE evaluation (WebAIM, 2024) highlights several accessibility issues, including structural warnings and missing semantic elements. Although the number of critical errors is relatively low, the presence of alerts indicates underlying problems in content structure and accessibility compliance.

Figure 3. WAVE accessibility evaluation overview showing multiple detected issues and structural warnings.

However, automated tools like WAVE may not be able to detect all accessibility issues, which highlights the importance of combining tool-based evaluation with manual inspection.

Colour Contrast

Although most of the text meets the contrast requirements, some elements in the home page chart do not meet the 4.5:1 standard required by WCAG 2.1 AA (W3C, 2018). As shown in Figure 4, this will reduce the reading experience of visually impaired users.

Figure 4. Contrast checker results showing insufficient colour contrast that fails WCAG 2.1 standards.

Keyboard Navigation

The website supports basic keyboard operation, but the focus indicator is not clear and inconsistent. When testing only with the keyboard, it is difficult for users to determine the current focus position. This violates the WCAG 2.4.7 (W3C, 2018) standard and affects the browsing experience of keyboard users.

Heading Structure and Semantic Markup

The website has a problem with the title structure, including multiple H1 elements and inconsistent hierarchy. This will affect the ability of assistive technology to analyse the page structure. In addition, semantic HTML elements such as <nav>, <main> and <aside> are not fully utilized, and ARIA attributes are largely missing. According to the “semantic markup” dimension in the accessibility list, it is difficult for auxiliary technology users to understand the page structure.

5. Technical Robustness and Professionalism

HTML and CSS Validation

Using the W3C tag verification service (W3C, 2018), it was found that there were many HTML errors and warnings on the homepage of the Leeds Food Aid Network, including abandoned HTML attributes, improperly nested elements, and missing language attributes. Although some of these errors may not cause obvious rendering problems in modern browsers, they indicate that the maintenance of the code base does not meet the current standards. This may lead to rendering problems on old browsers and pose risks to future maintenance.

Cross-Device Functionality

On desktop browsers (Chrome, Safari, Windows browsers), the core functions of the website run normally. However, some key interactive elements rely on mouse hover interaction, which touch devices do not support. Most notably, there is an interactive data chart on the home page, which effectively shows the coverage of the website, but relies entirely on mouse hover interaction. Therefore, touch screen and keyboard users cannot access the chart. Mobile tests confirm that the chart cannot be triggered on both iOS and Android devices.

Performance and SEO

We used PageSpeed Insights (Google, 2021) to evaluate the performance of the website. The score of the mobile version is about 65 points (out of 100). The problems found include unoptimised pictures and unused JavaScript resources. Although basic performance is acceptable, there remains room for improvement.

Search engine optimization (SEO) analysis reveals the following shortcomings:

These factors collectively affect the website's search engine performance and may reduce reach among potential users.

6. Conclusion

The evaluation of the Leeds Food Aid Network website shows that the website has largely achieved its core information sharing goals, but has not met the best practice standards in several important areas.

In terms of usability, the overall navigation structure is reasonable, the homepage action entrance is clear, and users can locate key services relatively easily. However, the complex hamburger menu, the lack of user feedback mechanism, the visual inconsistency of the colour scheme and page layout seriously limit the mobile experience, which will weaken the user's sense of trust and readability. The homepage interaction chart is conceptually an effective communication tool, but its dependence on hover interaction makes it unusable for touch screen and keyboard users.

Accessibility is the most urgent area to pay attention to. Alternative text for image is generally missing, the title structure is inconsistent, and the keyboard focus indicator is insufficient, resulting in the inability to meet many WCAG 2.1 A and AA standards. These problems are particularly serious for an organization that serves socially disadvantaged groups, such as the elderly and disabled, and should be addressed as a priority.

From a technical point of view, the core functions of the website are mostly functional, but there are HTML validation errors. There is room for improvement in the speed of mobile pages. Relying on hover interaction makes it unable to work properly on touch screen devices. The SEO foundation is weak, and the heading structure and alt text problems weaken the search optimization effect.

Overall, the Leeds Food Aid website will benefit from a series of targeted accessibility improvements, mobile optimization and code review procedures. The following improvement measures are sorted according to the severity of the problem, giving priority to solving key problems affecting the completion of core user tasks, and following the WCAG 2.1 compliance priority (A-level issues take priority over level AA). The action plan summarizes the main improvement measures proposed based on the assessment results.

Action Plan

Table 2: Action Plan
Category Description
Accessibility
  • Add descriptive alt text to all pictures with information transmission functions, including logos and partner pictures.
  • Improve the keyboard focus indicator of all pages to meet the requirements of WCAG 2.4.7.
  • Fix the colour contrast in the home page chart to ensure that the minimum contrast reaches 4.5:1.
UX/UI
  • Redesign mobile navigation to simplify the drop-down menu operation on the touch screen.
  • Add confirmation feedback after submission to the contact form.
  • Unify the visual style of each page, including colour and font typesetting.
Technical
  • Fix all HTML errors found by W3C markup verification service.
  • Optimize pictures and scripts to improve the loading speed of mobile pages. The target PageSpeed score is more than 70.
  • Replace the interactive chart that only relies on hover with an alternative that supports touch, such as clickable cards.
Content
  • Restructure the title hierarchy: ensure that there is only one H1 per page, and match it with a reasonable H2/H3 subtitle.
  • Split a large number of continuous text in the inner page, add subtitles and a list of key points, and improve readability.
  • Supplement the meta description and page title keywords, and add alternative text to all functional pictures.

Reference List

Dumas, J. S. and Redish, J. C. (1993) A Practical Guide to Usability Testing. Revised edition. Exeter: Intellect Books.

Garrett, J. J. (2011) The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd edition. Berkeley: New Riders.

Google (2021) ‘Page experience update and more: Google Search ranking’, Google Search Central Blog. [Online]. Available at: https://developers.google.com/search/blog/2021/04/more-details-page-experience (Accessed: 15 March 2026).

Gube, J. (2010) ‘What is user experience design? Overview, tools and resources’, Smashing Magazine. [Online]. Available at: https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/ (Accessed: 30 March 2026).

Krug, S. (2006) Don’t Make Me Think!: A Common Sense Approach to Web Usability. 2nd edn. Berkeley: New Riders.

Leeds Food Aid Network (2026) Home. [Online]. Available at: https://leedsfoodaidnetwork.co.uk/ (Accessed: 6 March 2026).

Nielsen, J. (1994) ‘Enhancing the explanatory power of usability heuristics’, in Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 152–158. [Online]. Available at: https://doi.org/10.1145/191666.191729 (Accessed: 28 March 2026).

Norman, D. A. (2013) The Design of Everyday Things. Revised and expanded edition. New York: Basic Books.

W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1. [Online]. Available at: https://www.w3.org/TR/WCAG21/ (Accessed: 12 March 2026).

W3C (2024) Markup Validation Service. [Online]. Available at: https://validator.w3.org/ (Accessed: 30 March 2026).

WebAIM (2024) WAVE Web Accessibility Evaluation Tool. [Online]. Available at: https://wave.webaim.org/ (Accessed: 13 March 2026).

Appendix

Appendix A: Usability Testing Tasks

Appendix B: Key Observations

Appendix C: Tools Used