1

Mutual Aid Web Tool Report

By Name:

institutional Affiliation:

Professor

Course code:

Date:
 2

Table of Contents
Mutual Aid Web Tool Report...................................................................................................................1
List of figures...........................................................................................................................................3
Abstract...............................................................................................................................................4
What Was Done and How....................................................................................................................5
The Rationale for the Approach Taken................................................................................................6
References to Existing Research and Practice......................................................................................8
Supporting Diagrams and Images........................................................................................................9
Results and Evaluation.......................................................................................................................12
Evaluation of How Well the Product Meets the Task Description.....................................................12
Conclusions........................................................................................................................................15
Suggestions for Future Work.............................................................................................................15
Personal Reflection............................................................................................................................16
References.........................................................................................................................................17
 3

List of figures
Figure 1: Home page to the prototype......................................................................................................10
Figure 2: Users can post request or offers here.........................................................................................10
Figure 3: Users can view matched requests or offers her..........................................................................11
Figure 4:Users can view or write messages to one another after registration..........................................11
Figure 5:wireframes and links....................................................................................................................11
 4

Mutual Aid Web Tool Report

Abstract

The layout and creation of a web-based prototype intended to facilitate community

mutual help initiatives are presented in this study. To produce an easy-to-use medium, the effort

used a client-centered design strategy that included usability evaluation, adaptive development,

and consumer research. Individuals can utilize the application to look for possible help, request

and offer assistance, and receive notifications when a fit has been established. The Figma-created

prototype has a simple user experience that works well on both desktops and handheld gadgets.

A profile area was also added, which enables users to communicate with each other, improving

cooperation and interaction directly.

To comprehend community requirements along with challenges user research—which

included surveys and interviews—was conducted before the design process started. The

outcomes of the study informed the development of interactive models and wireframes, which

were further enhanced over many trial stages. An organized request-offer system, improved

navigation, and adaptive features resulted from heuristic assessments and performance testing

that pinpointed areas that needed work.

 5

The completed prototype's assessment showed how well it matched features and that the

straightforward user interface design promoted connection with the community. Nevertheless,

further advancements are required, such as language support, additional safety measures, and

artificial intelligence (AI) suggestions. The review procedure, the reasoning behind the design

decisions, and prospective future advancements to increase the platform's effect are all included

in this paper.

What Was Done and How

Description of the Work Done:

The web-based design was developed in stages, guaranteeing a methodical and

continuous process. First, a thorough data collection process that includes interviewing and

surveying potential consumers was used to determine user requirements (Bala Sundram et al.,

2023). These techniques helped develop the platform's architecture to accommodate a wide range

of consumers and provide insightful information about the difficulties people have when trying

to use complimentary services.

Diagrams and medium-fidelity versions were created using Figma after the research

phase. To increase efficiency and polish the interface's appearance, the design approach was

iterative, including input from consumers at different phases. The testing of important features

and interaction optimization were based on these ideas. Design contradictions and areas that
 6

required further attention were identified through the use of heuristic approaches in the

functionality study.

Integrating dynamic components to improve accessibility for users and expedite

important procedures was the next stage. The website was created to let users explore deals,

make help inquiries, and employ a sorting engine to narrow down outcomes of searches by

category, area, or immediacy. To ensure that users were able to quickly obtain the appropriate

data, the organized user interface was created to distinguish between offerings and inquiries

(Knox et al., 2017). To improve the speed of reaction and satisfaction with the service, an alert

mechanism was also included to notify users anytime an appropriate match transpired.

Additionally, a profile area was added, enabling participants to send each other messages directly

as well as create and oversee their own profiles. By making connections simple and safe, this

tool improves community interaction and collaboration.

The application's arrangement was created to take into account users with various degrees

of technological comprehension, and steps were implemented to improve clarity and simplicity

of use. During the entire creation process, availability, as well as accessibility, were still key

variables, and the undertaking's gradual design approach—bolstered by input from customers

and heuristic evaluation—finally produced a honed prototype that effectively encourages mutual

humanitarian efforts in the surrounding area.

The Rationale for the Approach Taken

 7

The collaborative support platform was developed with the fundamental ideas of

effectiveness, convenience, and usefulness in mind. It was crucial to create an interface that

people with different degrees of technical understanding could simply understand and use, as

mutual aid groups frequently serve diverse groups (Issa & Isaias, 2022). By embracing feedback

from customers at every level to better the application's capability and accessibility, the

incremental design technique guarantees continual progress.

By pinpointing the main issues that various demographics experienced, the customer

persona creation process made it possible to customize the layout to meet their needs. The

platform's emphasis on principles of user-focused design guarantees that organizers planning

initiatives, contributors providing support, and those in need of aid can all easily traverse the

entire platform. This perspective coincides with present HCI studies, which stress building

diversity and usability in digital technologies.

Because of its versatility in producing dynamic schematics and enabling quick iterations

that utilize input from users, Figma was chosen for experimentation (Figma, 2025). This made it

possible to identify usability problems immediately and make sure that changes were done

before the entire deployment. With the goal of reducing cognitive burden and guaranteeing

people would easily and rapidly locate pertinent information, the routing design was created. To

improve clarity and usefulness, inquiries and solutions were purposefully divided into separate

but related areas.

 8

Since mutual aid solutions need to accommodate individuals with distinct skills and

degrees of computer literacy, being accessible was a top goal. Appropriate color intensity ratios,

legible font, and simple behavior patterns were all part of the design. The Web Content

Accessibility Guidelines (WCAG) and industry recommendations for UI/UX design are

following these adaptive elements (Isa et al., 2016).An additional significant aspect of the overall

layout was the inclusion of security and confidence measures. It was crucial to include security

elements since mutual aid exchanges entail people interacting with peers. Within the application

messaging, alerting capabilities, and authenticity choices guarantee that conversations stay

confidential and protected. Additional identity confirmation techniques might be added in the

future to boost community confidence.

The initiative also considered previous studies on community-based digital channels.

Research on websites like Timebanks and Nextdoor revealed recurring problems, which include

control problems, accessibility obstacles, and involvement sustainability. To improve

effectiveness and dependability, these findings guided the creation of features including alert

infrastructure, sorting choices, and a hierarchical request/offer classification.

The application guarantees an ideal user journey while promoting important relationships

within regional mutual assistance networks by coordinating design decisions with well-

established studies regarding HCI, its usefulness, and the online development of communities.

References to Existing Research and Practice

 9

 Knowledge of interaction between humans and computers, accessibility

intuition, and standards for excellence in community-driven online environments all

influenced the design strategy (Isa et al., 2016). To maximize platform functioning,

research on consumer satisfaction in virtual mutual assistance networks was also taken

into account.

 Current Mutual Aid Platforms: Evaluation of Facebook groups,

Timebanks, and Nextdoor, highlighting their advantages and disadvantages (Nextdoor,

2025).

 Examining case examples that demonstrate the use of digital mutual help

in emergency relief initiatives.

 Using Human-Computer Interaction (HCI) concepts to improve digital

infrastructures' friendliness and involvement is known as the study of HCI.

Supporting Diagrams and Images

To demonstrate the creation procedure, the report contains images of wireframes, Figma

designs, and activity drawings. Key design choices and usability improvements achieved during

the project are shown in these images. Every picture, table, and figure has a brief description and

is properly cited in the text.

The following image depicts the first page of the Mutual Aid interface
 10

Figure 1: Home page to the prototype

Below is a screenshot showing the designed page for users to place a request or an offer

in the prototype.

Figure 2: Users can post request or offers here

There is also a page where the users are notified about all the available offers and

requests available on the platform.

 11

Figure 3: Users can view matched requests or offers her.

The profile section specifies where users can create a profile, login and interact with each

other.

Figure 4:Users can view or write messages to one another after registration.

Below is a diagram showing all the wireframes and links.

Figure 5:wireframes and links

 12

Results and Evaluation

Final Product Overview

The finished idea is an online digital tool that allows users to engage easily and facilitates

attempts at sharing assistance. People may make queries for aid or convey aid depending upon

their capabilities as well as accessibility thanks to its user-friendly layout. The framework's

effective corresponding mechanism ensures an easier connection to communal help by

connecting participants by considering their geography and wants. To improve reaction

effectiveness the program also includes immediate warnings that notify participants whenever an

alignment has been identified. By enabling immediate contact among individuals, the recently

added profile area improves user engagement even further and promotes improved communal

relationships and interaction.

The end-user encounter continues to be enhanced with a filtering mechanism that enables

scans by type, degree of immediateness, and physical closeness. Individuals may connect

immediately avoiding the use of third-party programs thanks to the platform's instantaneous

messaging functionality, which encourages secure conversations. A comprehensive assistance

section is also provided, offering information on why to utilize the site successfully.

Evaluation of How Well the Product Meets the Task Description

The platform was intended to be usable by people with different levels of technological

expertise. The interface's simple layout and obvious separation of offerings and inquiries lessen
 13

the intellectual burden and facilitate quick access. Furthermore, amenities like sorting choices

and alert notifications add to its overall usability. In order to accommodate a variety of audience

segments, especially those who are visually impaired, the universal design assessment made

certain that brightness ratios, font visibility, and adaptability to mobile devices were maximized.

Both the searching and pairing functionalities performed well concerning system

productivity. The immediate alerting tool greatly increased user participation and individuals had

the opportunity to find pertinent inquiries and offers minus undue latency. According to

comments gathered from early usability studies, people valued the organized design and the

capability of filtering query outcomes according to closeness and immediacy.

The assessment also took reliability and confidentiality into account. The messaging

within the application feature allows users to communicate securely while restricting the

disclosure of confidential details, but more safety measures, like authentication procedures and

community conveying functions, are needed to maintain faith and inhibit misconduct.

Strengths

Individuals with low levels of computer literacy can effortlessly operate the application

thanks to its well-organized and unambiguous user interface. The system efficiently connects

offers and requests, guaranteeing that users may locate pertinent volunteer or help possibilities

promptly. Users may interact with the online environment from any location thanks to its

responsive design, which also enables smooth accessibility among numerous devices. By

allowing users to narrow down their results according to particular requirements or readily
 14

accessible resources, the incorporated filtering mechanism improves the accuracy of searches.

Additionally, the texting function guarantees safe interpersonal interaction, enabling straight user

interaction while protecting confidentiality.

Limitations

The design has several drawbacks despite its advantages. Due to the incomplete

implementation of anticipated functionalities like AI-based comparing, the present edition misses

comprehensive engagement. Confidentiality is still an issue as security measures and user

authentication need to be improved to stop abuse. Furthermore, the infrastructure has to be

expanded for wider usage due to its restricted capacity. The lack of language assistance, which

would be crucial for connecting with varied populations, is another noteworthy drawback.

Lastly, the absence of integration with outside assistance agencies offers a chance for future

cooperation, since alliances with foundations and humanitarian organizations may increase the

platform's overall influence.

Results and Evaluation

The collaborative support platform's finished model offers an online resource that is

organized and easy to utilize for promoting community-driven support. Utilizing a

straightforward interface, individuals may explore existing requests and offers, post needs for

helping hands, and give aid. To improve search functionality, the platform has a filtering feature

that lets users narrow down results by type, region, or immediacy. To maximize reaction speeds

and audience participation, an alert mechanism also notifies people when an alignment happens.

The platform's efficacy in achieving the main project goals was shown by the assessment.

One of its strengths is its well-organized and unambiguous user interface, which makes it simple
 15

to use even for those with different degrees of computer literacy. Usability is improved by the

application's responsive structure, and searching effectiveness is increased by a streamlined

filtering mechanism. Interactions between users are protected by secure channels of

communication including in-app chatting.

But there are still restrictions. AI-driven matches were one of the anticipated features that

was not completely realized in the concept. To avoid abuse, security issues, such as

authentication of users, need to be further developed. Additionally, the platform does not allow

many languages, which restricts accessibility for non-native English users. These restrictions

should be changed in future updates to increase inclusiveness and productivity.

Conclusions

An operational version of a mutual aid framework with an emphasis on effectiveness,

convenience, and availability was effectively developed by this endeavor. The application's

features were refined through an adaptive development process that included wireframing,

designing prototypes, user study, and user experience testing. Individuals may submit and

explore offers and requests, refine search outcomes, and get alerts when a match is found with

the finished product. Having access to a wide variety of users is guaranteed by the responsive

design and organized user interface.

Suggestions for Future Work

 16

The following areas should be the focus of subsequent enhancements to improve the

platform's efficacy and scalability:

 Putting into practice a completely interactive, high-fidelity prototype.

 Adding mobile apps to the infrastructure to increase accessibility.

 Adding AI-driven suggestions to the matching process to increase its

effectiveness.

 Creating a mechanism for user verification to improve security and trust.

 To better serve varied populations, assistance in various languages is

being added.

 Combining with already-existing nonprofits and mutual assistance

networks to increase effect.

 Carrying out extended user research to improve appeal and interaction

tactics.

Personal Reflection

This project offered insightful information on the prospects and difficulties of creating

digital solutions centered on community projects. Design iterations and user studies highlighted

how crucial accessibility along with usability are fueled by technology mutual-help programs.

Although the prototype effectively illustrates essential features, further work is required to

produce an adequately functional solution. All things considered, this project reaffirmed how

important designing with people in mind is to create comprehensive and successful supportive

community networks.
 17

References

Alsaadoun, O. A., & Lawati, B. A. (2019). Realizing user privacy and security issues in

edutainment E-solutions. Lecture Notes in Computer Science, 278-

287. https://doi.org/10.1007/978-3-030-22602-2_21

Bala Sundram, M., Kuppusamy, E., Yazid, F., & Rani, H. (2023). User requirement gathering

for online oral health education module development: Exploring parental

perspective. DIGITAL

HEALTH, 9. https://doi.org/10.1177/20552076231203949

Figma. (2025). Figma.

Figma. https://www.figma.com/design/EPYYq5kPbqBtdRFn3Osrjn/Marion

project?node-id=21-10&t=f8C4KqRTzK2LNKNm-0
 18

Fu, Z., & Li, J. (2025). Digital transformation and future HCI. Digital Futures in Human-

Computer Interaction, 3-29. https://doi.org/10.1201/9781032693606-2

Isa, W. A., Suhaimi, A. I., Ariffrn, N., Ishak, N. F., & Ralim, N. M. (2016). Accessibility

evaluation using web content accessibility guidelines (WCAG) 2.0. 2016 4th

International Conference on User Science and Engineering (i-

USEr). https://doi.org/10.1109/iuser.2016.7857924

Issa, T., & Isaias, P. (2022). Usability and human–computer interaction (HCI). Sustainable

Design, 23-40. https://doi.org/10.1007/978-1-4471-7513-1_2

Knox, B. J., Lugo, R. G., Jøsok, Ø., Helkala, K., & Sütterlin, S. (2017). Towards a cognitive

agility index: The role of metacognition in human computer

interaction. Communications in Computer and Information Science, 330-

338. https://doi.org/10.1007/978-3-319-58750-9_46

Lu, Z. (2025). Social HCI. Digital Futures in Human-Computer Interaction, 209-

223. https://doi.org/10.1201/9781032693606-17

Nextdoor. (2025). Join Nextdoor, an app for neighborhoods where you can get local tips, buy

and sell items, and more. nextdoor.com. https://nextdoor.com/news_feed

Self-help and mutual help. (n.d.). Land Reform in

Japan. https://doi.org/10.5040/9781472553492.ch-011

Silverman, P. R. (2011). Mutual help groups: What are they and what makes them

work? Oxford Handbooks

Online. https://doi.org/10.1093/oxfordhb/9780195394450.013.0028

Timebank. (2025). What is timebanking? | TimeBanks.Org. https://www.timebanks.org/

 19

Đorđević, N., Đorđević, V., & Čabarkapa, O. (2024). Interaction between humans and

computers: Key aspects and evolution. Vojnotehnicki glasnik, 72(1), 452-

481. https://doi.org/10.5937/vojtehg72-47701