Conceptual & Physical Design

STORYBOARDS

Task 1: Make a one-time donation (min. RM3.50) for a community

Scene 1

The user, engrossed in studies at a cafeteria, takes a break. He opens the ShareEats app on his phone, eyes filled with determination. 

Scene 2

The app's interface showcases various causes worldwide. The user scrolls through, searching with intent. 

Scene 3

The user tapped on the "Emergency Aid in Palestine" cause. 

Scene 4

A pop-up confirms his choice. He selects "1 meal" and sets the donation to RM3.50 with assurance. 

Scene 5

Moving to payment, the user selects "debit card".

Scene 6

The screen brightens with confirmation details, signifying a successful donation. The user smiles with satisfaction. 

Scene 7

The user back on the university campus, smiling and feeling fulfilled.

Scene 8

The user back in the university environment, walks contentedly, observing the campus and feeing fulfilled after his impactful action. Inspired to spread the cause further, he eagerly decides to share the app with a  friend in his class

Task 2: Generate a report/details of the user's donation

Scene 1

The user walks through the streets. He's seen engaging with people, showcasing his passion for humanitarian activities through interactions and volunteer work.

Scene 2
The user sits in his office and decides to track his contribution to the society with ShareEats.

Scene 3
A close-up of the user's face shows determination and eagerness as he navigates through the app.

Scene 4
The screen displays a list of the user's past contributions, showcasing various donations made through the ShareEats app. The user is seen scrolling through the list, looking at the donation details with a thoughtful expression.

Scene 5
The user finds the "Generate Report" button and presses it.

Scene 6
The screen displays a progress indicator, symbolizing the app processing and compiling Jun Boon's donation history into a detailed report.

Scene 7
The screen displays the report.

Scene 8
The user smiles with satisfaction, feeling empowered by the app's user-friendly experience that aligns perfectly with his commitment.

Task 3: Set notification to update donation alerts and engagement reminders

Scene 1

As a compassionate AIESEC member in Sabah, Ze Min introduces the 'ShareEats' app to his fellow members, sharing his vision of using technology to amplify their collective impact on global issues such as poverty and hunger.

Scene 2
Navigating the 'ShareEats' app, Ze Min highlights the efficient "Reminders and notifications" feature to his AIESEC peers, explaining its potential to streamline their efforts in addressing charitable causes.

Scene 3
In a focused moment, Ze Min actively engages with the 'ShareEats' app, toggling both "Donation Alerts" and "Engagement Reminders," aligning the app with his commitment to staying informed and enhancing collective engagement.

Scene 4
As Ze Min continues his philanthropic work, notifications efficiently pop up on his phone, showcasing the seamless function of "Donation Alerts" and "Engagement Reminders" and keeping him and his fellow AIESEC members informed in real-time.

Scene 5

Inspired by Ze Min's demonstration and the effectiveness of the 'ShareEats' app, other AIESEC members begin adopting the app, creating a synchronized digital platform that unifies their efforts and magnifies their impact on global hunger relief.

ALTERNATIVE DESIGN

Alternative Design 1 - JANE NG JING YING

Alternative Design 2 - KHAIRUNNISA BINTI ROSLAN

Alternative Design 3 - ONG JIA YU

Alternative Design 4 - SIOW XIN YA

Alternative Design 5 - TOO JUN XUN

VOTED DESIGN ELEMENTS/LAYOUTS

— JANE NG JING YING

— KHAIRUNNISA

— ONG JIA YU

— SIOW XIN YA

— TOO JUN XUN

WIREFRAMES

Wireframes for Task 1 -  Make a one-time donation (min. RM3.50) for a community

Task 1 (Make a one-time donation (min. RM3.50) for a community) design effectively applied several of Shneiderman's Golden Rules and some necessary usability and user experience goals. In terms of Shneiderman’s Golden Rules :

Rule 1 - Consistency

The interface maintains a consistent layout and visual style across donation screens. To ensure a consistent color scheme, typography, and button styles across all donation screens, we mainly apply a soft color scheme throughout the whole application interface design which is blue and light green. Besides, we used the same terminology and visual elements consistently. For instance, we always have the donation amount displayed prominently in a specific location.

The consistency ensures users can easily recognize and understand the donation process and enhances usability and user experience.

Rule 3 - Informative Feedback

During the donation process, the mobile application system will display real-time feedback. For example, a progress indicator and confirmation messages will be shown to users as they perform actions and also real-time feedback during the donation process. When users enter the donation amount, a dynamically updated total will shown. After confirming the donation, a confirmation message with details and perhaps a celebratory animation to acknowledge the contribution also will be shown. The informative feedback keeps users informed about the status of their donation at the same time reducing uncertainty and providing a positive experience.

Rule 8 - Reduce Short-Term Memory Load

To reduce the short-term memory load of users, before final confirmation, the interface will display a summary of the donation details which include the chosen amount and selected community. This ensures that users have a clear and immediate understanding of their contribution without relying on short-term memory. It also reduces short-term memory load and ensures users have a clear understanding of their donation details hence preventing confusion.

Wireframes for Task 2 - Generate a report/details of the user's donation

Task 2 implements Shneiderman’s Golden Rule and Gestalt Principles in the design to enhance the user experience while using the “SHARE EATS” application.

For Shneiderman’s Golden Rule:

Rule 3- Offers informative feedback. 

This application will display feedback immediately to the user after they click the button to download the donation receipt. For example, when the user clicks the button, the page will turn into another page showing the progress where the receipt is generated. This informative feedback offers a sense of security to the user where they can ensure that the donation has been made successfully.

Rule 6 -Permits easy reversal of actions. 

From the design, it can be seen that there is a return arrow on the left corner of each page where the user is carrying out a particular task. This arrow can make the user feel less anxious and more willing to explore the options since the user knows that there is an easy way to solve the problem by clicking the arrow button.

Rule 7- Supports internal locus of control. 

This feature gives control and freedom to users so that they can feel that they are in control of the system themselves. Cite an example, in frame 1, the user can choose whether to generate the receipt or not. Not only that, in frame 3, the user can also choose to download the receipt in PDF version or not by clicking the download button at the right corner. By doing this, this application is giving freedom to the users and making them like they have control over what they will receive.

Wireframes for Task 3 - Set notification to update donation alerts and engagement reminders

Task 3 incorporates Shneiderman's Golden Rule into the design to improve the user experience when using the ‘ShareEats’ application.

Shneiderman's Golden Rule 1 - Consistency

Reminder and notification designs that are consistent improve user predictability, lessen uncertainty, and create a more seamless and joyful user experience. Toggle icons, for instance, allow users to turn on or off reminders that they are acquainted with and understand how to use. Additionally, as the color green denotes an impending event, it also indicates that the notice has already begun to function.

 

Shneiderman's Golden Rule 7 - Support internal locus of control

Reminder and notification functions allow users to change the settings according to their liking anytime.  This feature allows for scheduling or preference modifications, making the experience more user-friendly. Users may manage their reminders and foster a sense of control better by implementing these features, which also lessens the possibility of dissatisfaction related to irreversible acts.

Shneiderman's Golden Rule 8 -  Reduce Short-Term Memory Load

This design will alert the user by giving notifications and reminders regularly. In reminder and notification design, reducing short-term memory burden entails providing information in a simple and easily understandable manner. This approach seeks to reduce the cognitive effort required for users to grasp and act on the presented information. Users are more likely to remember details and take the necessary actions if notifications are clear and plain. The user can keep the content of notifications focused on key information and prioritize the most critical aspects.

INTERACTION METAPHORS

Metaphor 1 -  Sliding feature

(Figure from Wireframe Task 1)

The sliding love button is designed to imitate a sliding window,  where users can slide the heart-shaped object to decide the amount of donations. When users slide to the right, the amount of donations increases while sliding to the left will reduce the amount of donations. This feature allows users need not to input the amount of the donations by themselves. Besides, it eases the donation process.

Metaphor 2 - Color Psychology 

(Figure from Wireframe Task 1)

Color is one of the most important and influential tools a designer has. Hence, we use colors that are soft and refreshing, which are green and light blue colors as the theme colors of our design. It is because soft colors are clearer to read and inspiring. Blue is calming, deep, mysterious, and clean and at the same time, green is a very down–to–earth color. It can represent new beginnings and growth. The combination of these colors will provide a good usage experience for the users.

Metaphor 3- Download icon

(Figure from Wireframe Task 2)

This download button acts like pressing a physical button to activate a mechanism. When a user clicks this button, it will initiate the retrieval of digital content. This metaphor aligns with the concept of taking an intentional action to obtain something, which is a common and intuitive interaction in digital environments.

Metaphor 4- Receipt Metaphor

(Figure from Wireframe Task 2)

This interface is like a real deposit receipt that a donor will receive after a donation is made.It provides a customizable receipt design to enhance the personal touch. Users may have the option to customize the appearance of their digital receipt later on. They can choose colors, add emojis, or even include a personalized thank-you message to make the experience more intimate.

Metaphor 5- Notification icon

(Figure from Wireframe Task 3)

The bell icon has become widely recognized as a symbol for notification and is associated with the bell as a real-life alerting device. As a result, when the user sees the icon, they will immediately recognize that there is a notification or reminder. This metaphor is fairly simple across various platforms and applications, making it more user-friendly.

Gathering Requirements - User Analysis

Proposed Tasks

Our proposed tasks will include the enhancement of the "Share The Meal" applications for each task that we discussed on design requirements. This enhancement will increase the user experience while using this application. 

Task 1 - Make a one-time donation for a community 

This feature enhancement can expand the payment options available to users by incorporating secure alternatives such as online banking. By recognizing the importance of user security, this design requirement ensures that individuals can choose from a diverse set of payment methods, including the more secure option of online banking. This expansion aims to accommodate varying user preferences and instill confidence in the donation process.

Task 2 - Generate a report/details of the user's donation

This feature can streamline the report generation process by incorporating direct links or buttons within the interface. This design requirement ensures that users engaged in Task 2 can access specific donation details directly from the report generation interface. By reducing unnecessary steps, this enhancement promotes a more intuitive and user-friendly workflow, enhancing the overall user experience when generating donation reports.

Task 3-  Set notification to update donation alerts and engagement reminders

This task is proposed to explore alternative groupings within the app, such as "Donation Alerts" and "Engagement Reminders," to provide users with a clearer context. This design can optimize the organization of information, offering users a more intuitive and efficient way to navigate through alerts and reminders related to their engagement with the Share The Meal app. The user can have notifications based on their needs, for example, some users only wish to receive notifications for donations instead of other events. By introducing alternative groupings, the app can enhance user comprehension and engagement with notifications, ultimately improving the user experience.

Persona

Persona 1: Chuah Kee Yong

Chuah Kee Yong is a 20-year-old software engineering student studying at the University of Technology Malaysia. He comes from the Perak. Chuah Kee Yong is driven by a passion for technology and social consciousness, seeking ways to use his skills for positive change. Currently immersed in his studies, he navigates the challenges of university life to pursue a degree that will equip him to make a lasting impact in the tech university. Balancing his monthly budget, Kee Yong yearns for opportunities to contribute to meaningful causes without financial strain.

The ‘Share The Meal’ app aligns perfectly with his values, offering an accessible platform that allows him to engage in philanthropy seamlessly. As a tech-savvy individual, Kee Yong appreciates the app’s development, making his charitable contributions not just impactful but also enjoyable. ‘Share The Meal’ becomes Kee Yong's go-to solution for making a difference in the world, reflecting his commitment to leveraging technology for social good.

Persona 2: Goh Jun Boon

Introducing Jun Boon, a 21-year-old from Johor, Malaysia, who is passionate about humanitarian activities. Driven by a profound sense of social responsibility, he actively engages in volunteer work and community initiatives. Jun Boon’s passion for sustainable living and global welfare led him to join various charity activities and campaigns organized by environmental and charity organizations. To encourage more people involved in these activities, he sees technology as a powerful tool for driving change and envisions a world where everyone has access to basic necessities.

The ‘Share The Meal’ app aligns with Jun Boon’s values, providing a platform for him to contribute to global hunger relief. Through this application, Jun Boon can connect with like-minded individuals and organizations, fostering a community that collectively works towards a hunger-free world.

Persona 3: Nipuhawanj Lai Ze Min

Nipuhawanj Lai Ze Min, is a 20-year-old compassionate individual from the vibrant state of Sabah, Malaysia. Ze Min is an active member of AIESEC, a charity club that has fueled his passion for making a positive impact on the world. While pursuing a degree, Ze Min thrives on engaging with diverse communities and has a keen interest in addressing global challenges, particularly in the realm of poverty and hunger. As a dedicated member of AIESEC, he seeks ways to leverage his skills and network to contribute meaningfully to charitable causes.

The ‘Share The Meal’ app perfectly complements Ze Min’s commitment to social responsibility, providing him with an accessible platform to support global hunger relief. Ze Min sees the app not only as a tool for personal contribution but also as a potential resource for AIESEC to mobilize its members and amplify their collective impact on pressing global issues.

Scenario

Scenario 1: Make a one-time donation (min. RM3.50) for a community

Persona: Chuah Kee Yong, a 20-year-old software engineering student at the University of Technology Malaysia, driven by a passion for technology and social consciousness, seeks opportunities to contribute to meaningful causes without financial strain.

User Goal: Make a one-time donation (min. RM3.50) for emergency aid in Palestine using the ShareEats app.

Tasks: 

• Open the ShareEats app on the mobile device.
• Navigate through the app to select emergency aid in Palestine as the cause.
• Choose to donate 1 meal with a contribution amount of RM3.50.
• Confirm the donation amount within the app's interface.
• Navigate through the payment process.
• Select the option to pay using an online banking method.
• Provide the necessary details within the banking sites.
• Complete the transaction.

Chuah Kee Yong, a 20-year-old software engineering student at the University of Technology Malaysia, is deeply committed to making a positive impact in the world. Inspired by his social consciousness, Kee Yong opens the ShareEats app on his mobile device during a study break. As he navigates through the app, he decides to make a one-time donation to support a community in need. Kee Yong selects the cause of emergency aid in Palestine, aligning with his values and the global impact he aspires to contribute. With the goal of making a meaningful donation without straining his budget, Kee Yong chooses to contribute a minimum of RM3.50.

Amidst his hectic schedule at the University of Technology Malaysia, Kee Yong finds a moment to open the ShareEats app on his smartphone. Intrigued by the opportunity to support emergency aid efforts in Palestine, he decided to make a one-time donation. In the app's user-friendly interface, Kee Yong effortlessly selects the cause that resonates with him, opting to contribute 1 meal worth RM3.50. Steering clear of any technical jargon, he navigates through the seamless process, confirming his donation amount and proceeding to the payment section. Being mindful of his budget as a student, Kee Yong opts to pay using online banking, ensuring that his contribution to the community aligns with both his values and financial capacity. The ShareEats app empowers Kee Yong, a tech-savvy student, to effortlessly weave philanthropy into his daily life, reflecting his commitment to leveraging technology for social good.

Scenario 2: Generate a report/details of the user's donation

Persona: Jun Boon, a 21-year-old global citizen from Johor, Malaysia, who is passionate about humanitarian activities, actively engages in volunteer work, and envisions a world where everyone has access to basic necessities. Jun Boon uses the ShareEats app to contribute to global hunger relief and connect with like-minded individuals and organizations.

User Goal: Generate a report of Jun Boon's donation history using the ShareEats app to track and share his contributions, fostering transparency and accountability in charitable efforts.

Tasks:

• Access the ShareEats app.
• Navigate to the "Me" section within the application.
• Select "Donation History" to view the complete log of donations.
• Choose "See All" to access detailed donation information.
• Locate and tap the "Generate Report" button at the top right corner of the screen.
• View the generated report in the app.

Jun Boon, the passionate global citizen, regularly utilizes the ShareEats app to contribute to global hunger relief. One day, he decides to generate a report of his donations to track and share his impact with others. Jun Boon opens the app and navigates to the "Me" section, where he selects "Donation History" to access a comprehensive log of his contributions. Within the detailed donation history, he effortlessly locates the "See All" option, allowing him to view the specifics of each donation.

Focusing on his goal to generate a report, Jun Boon taps the prominently placed "Generate Report" button situated at the top right corner of the screen. Within moments, the app compiles a detailed report summarizing his impactful contributions, providing a seamless and user-friendly experience that aligns with his commitment to making a positive global impact.

Scenario 3: Set notification to update donation alerts and engagement reminders

Persona: Nipuhawanj Lai Ze Min, a 20-year-old compassionate AIESEC member from Sabah, Malaysia, is dedicated to making a positive impact on global challenges, particularly in poverty and hunger. As an active participant in charitable causes, Ze Min seeks effective ways to contribute and mobilize his AIESEC community.

User Goal: Set notifications to receive updates on reminders or push notifications using the ShareEats app.

Tasks:

• Open the ShareEats app.
• Press the "Settings" icon.
• Click on "Reminders and notifications."
• Turn on notifications for "Donation Alerts" and "Engagement Reminders."

In the vibrant state of Sabah, Malaysia, Nipuhawanj Lai Ze Min, a compassionate 20-year-old and active member of AIESEC, immerses himself in the pursuit of positive global impact. Engaging with diverse communities while pursuing his degree, Ze Min dedicates his time and skills to addressing challenges such as poverty and hunger. As a devoted member of AIESEC, Ze Min envisions leveraging technology to mobilize fellow members and enhance their collective efforts toward charitable causes.

With this vision, Ze Min turns to the 'ShareEats' app as a powerful tool that aligns seamlessly with his social responsibility. One day, during his philanthropic endeavors, Ze Min opens the app and clicks on the “Reminders and notifications” section, presented with two choices for receiving notifications. Recognizing the importance of staying informed, Ze Min diligently turns on notifications for both "Donation Alerts" and "Engagement Reminders." In this digital journey, the 'ShareEats' app transforms into not just a personal contribution platform but a dynamic resource for AIESEC, allowing Ze Min and his fellow members to synchronize their efforts and amplify their impact on global hunger relief.

Gathering Requirements - Task Analysis

Introduction

Welcome to the innovative world of Ergocarft, where we are dedicated to enhancing user experience through the thoughtful application of Human-Computer Interaction(HCI) principles. Our proposal focuses on the ‘Share The Meal’ app, which is a platform dedicated to fighting global hunger by allowing users to easily contribute to feeding those in need.

Logo of ‘Share The Meal’ Application

‘Share The Meal’ is a mobile application developed by the United Nations World Food Programme (WFP), this app empowers individuals worldwide to contribute to the fight against hunger in a simple and tangible way. The core mission of ‘Share The Meal’ is to leverage the power of technology to provide nutritious meals to those in need, one small donation at a time. By fostering a global community of compassionate individuals, the app transforms the act of sharing a meal into a collective effort to combat hunger and improve lives.

In this proposal, 3 target users were chosen to ensure that this application performs properly by conducting user testing. During testing, each user will carry out tasks, which are making a donation, generating a report of the donation, and setting notifications for reminders respectively.

Derivation of HTA

HTA for Task 1 - Make a one-time donation (min. RM3.50) for a community that they would like to help 

User 1: University Student

Video Link of User 1 doing Task 1: 
https://drive.google.com/file/d/1vpLhCGzoQRPd_Af7V0sFcykzfvJ6EGQM/view?usp=sharing 
User 1, a university student, opened the Share The Meal app on their mobile device and proceeded to select emergency aid in Palestine for their donation. After choosing the cause, user 1 decided to donate 1 meal and inputted RM3.50 as the donation amount within the app's interface, indicating the contribution to support emergency aid efforts. Upon confirming the donation amount, user 1 navigated through the payment process and chose to pay using a debit card. Then he provided the necessary debit card details within the app and pressed the confirm button to complete the transaction.

Textual Representation:

0. Make a one-time donation

1. Open Share The Meal App

2 . Search for interested community to donate

    2.1 Press donate now

3.0 Select the amount of donation

    3.1 Donate based on the amount of meals

    3.2 Press continue

4.0 Add payment method

    4.1 Add debit card as first choice payment method

    4.2 Enter debit card details by user input himself

5.0 Press Button Pay

Plan 0: do 1-2-2.1-3-3.1-3.2-4-4.1-4.2-5

If the user already added a payment method, do plan 1 and plan 2

Plan 1: do 1-2-2.1-3-3.1-3.2-5

Plan 2: do 1-2-2.1-3-3.2-5

User 2: Global Citizen

Video Link of User 2 doing Task 1: 
https://drive.google.com/file/d/12sPia3GyXUUWkj_8vkP9eyE2YRwSuofW/view?usp=sharing 

User 2, identified as a global citizen, accessed the Share The Meal app and registered an account first before making any donation. After he registered an account, he specifically chose to contribute RM3.50 towards emergency aid in Palestine. Upon selecting the donation amount, user 2 proceeded to the payment section within the app's interface. He opted to use a debit card for payment hence user 2 entered the debit card details as required by the app to process the donation.

Textual Representation: 0. Make a one-time donation 1. Open Share The Meal App

    1.1 Register an Account 2 . Search for interested community to donate 2.1 Press donate now 3.0 Select the amount of donation 3.1 Donate based on the amount of money 3.2 Press continue 4.0 Add payment method 4.1 Add debit card as first choice payment method 4.2 Enter debit card details by user input himself 5.0 Press Button Pay

Plan 0: do 1-2-2.1-3-3.1-3.2-4-4.1-4.2-5

If the user already has not registered an account, perform plan 1 Plan 1: do 1, do 1.1

When users have an existing payment method,execute plan 2 Plan 2: do 1-2-2.1-3-3.1-3.2-5

User 3: Charity Organization Representative

Video Link of User 3 doing Task 1: 
https://drive.google.com/file/d/1vw8vPcbR6LBF6m1B971CDRJLVrxtjbsa/view?usp=drive_link
User 3, representing a charitable organization, engaged with the Share The Meal app. First, he investigated all the communities on the homepage before deciding on one community that he was interested in. After discovering the community that he was interested in, he then chose to donate one meal to the needy in Palestine and selected RM3.50 as the donation amount for emergency aid in Palestine. User 3 then progressed to the payment phase within the app's interface. Since User 3 chose to pay using a debit card, user 3 provided the necessary debit card details to complete the transaction by scanning his bank card.

Textual Representation: 0. Make a one-time donation 1. Open Share The Meal App 2 . Search for interested community to donate 2.1 Press donate now 3.0 Select the amount of donation 3.1 Donate based on the amount of meals 3.2 Press continue 4.0 Add payment method 4.1 Add debit card as first choice payment method 4.2 Enter debit card details by scanning the card 5.0 Press Button Pay Plan 0: do 1-2-2.1-3-3.1-3.2-4-4.1-4.2-5

When users have an existing payment method, execute plan 1 and plan 2 Plan 1: do 1-2-2.1-3-3.1-3.2-5 Plan 2: do 1-2-2.1-3-3.2-5

Findings from the HTAs for Task 1

In task 1, three of the target users are using the same application for the same tasks. However, I am surprised that their actions are different and they had their very own specific ways of performing task 1 which is to make a one-time donation (min. RM3.50) for a community that they would like to help even though they are all using a similar mobile application.

At first, all users demonstrate a consistent starting point. They initiate the task by opening the Share The Meal app. To my surprise, all three of the users selected emergency aid in Palestine as the community they want to support, indicating a shared choice of cause. Next, User 1 (University Student) swiftly navigates through the app without investigating too much of the application. He directly chose the community he wished to donate inputted the donation amount and proceeded to payment, reflecting a straightforward interaction style. User 2 (Global Citizen) registers an account before making a donation, introducing an additional step compared to User 1. User 3 (Charity Organization Representative) explores multiple communities before deciding on a specific one indicating that he is interested in the application's functionability hence showcasing a more in-depth engagement with the app's content.

Besides, regarding the donation amount, User 1 and User 3 donate based on the number of meals they wished to share and donate and specify the donation amount based on the number of meals, introducing a different approach to determining the contribution. Meanwhile, User 2 donated based on the amount of money that he wished to donate and directly input RM3.50 as the donation amount, conforming to the minimum requirement. In the payment method, all users opt to pay using a debit card, indicating a common preference for this payment method. It indicated debit card details are consistently provided as part of the payment process for each user. User 1 and User 2 tend to add a payment method by user inputs while User 3 add a payment method by scanning the bank debit card.

In short, the different roles (University Student, Global Citizen, Charity Organization Representative) influence the depth of engagement with the app and the approach to selecting a community. The findings from the HTAs highlight both commonalities and variations in the way users interact with the Share The Meal app to make a one-time donation. Understanding these is crucial for optimizing the user experience and addressing specific needs or preferences based on user roles and interactions.

HTA for Task 2 - Generate a report of the user’s donation 

User 1: University Student

Video Link of User 1 doing Task 2: 
https://drive.google.com/file/d/1vpvSmCd0J7LHXvBSZAgBsnYTU0VRSMu/view?usp=sharing
The university student initiates the process by opening the Share The Meal app and proceeding to the "You" section. From there, they navigate to "Donation History" and select the option to view all past donations. Once the list appears, they locate the "Generate Report" button situated in the upper right corner of the screen. After clicking the button, they're prompted to input their first and last name to personalize the report. Subsequently, upon confirming the details, the report is sent to their email address for access and reference.

Textual Representation:

0. Generate Donation Report 

1. Open Share The Meal App

2. Navigate to "You" Section

2.1 Access "Donation History"

2.1.1 Select "View All Past Donations"

2.1.1.1 Locate "Generate Report" Button

2.1.1.1.1 Input First and Last Name

2.1.1.1.1.1 Confirm Details

3. Receive Report via Email

Plan 0: Perform steps 1, 2, and 3.

            When required, execute step 3.

Plan 2: Do 2.1, 2.1.1, 2.1.1.1, 2.1.1.1.1, 2.1.1.1.1.1

Diagram Representation:

User 2: Global Citizen

Video Link of User 2 doing Task 2: 
https://drive.google.com/file/d/1WqLWrp5EKuZ_EsK33kR198J1lSzbXLeP/view?usp=sharing

User 2, identified as a Global Citizen, accesses the Share The Meal app and navigates directly to the "You" section within the application. From this section, user 2 proceeds to "Donation History" to access the entire log of donations by selecting "See All." Upon viewing the complete donation history and donation details, user 2 locates and taps the "Generate Report" button situated at the top right corner of the screen. Subsequently, user 2 inputs their first and last name as required, confirming the details to initiate the report generation process. Ultimately, the generated report is dispatched to their email for further examination and review.

Textual Representation:

0. Generate Donation Report 

1. Open Share The Meal App

2. Navigate to "You" Section

2.1 Access "Donation History"

2.1.1 Select "View All Past Donations"

        2.1.1.1 View Donation Details

2.1.1.1.1 Locate "Generate Report" Button

2.1.1.1.1.1 Input First and Last Name

2.1.1.1.1.1.1 Confirm Details

3. Receive Report via Email

Plan 0: Perform steps 1, 2, and 3.

            When required, execute step 3.

Plan 2: Do 2.1, 2.1.1, 2.1.1.1, 2.1.1.1.1, 2.1.1.1.1.1, 2.1.1.1.1.1.1

Diagram Representation:

User 3: Charity Organization Representative

Video Link of User 3 doing Task 2: 
https://drive.google.com/file/d/1w4JLbnQafe3EzFtQ7DROMc9JrestVXFK/view?usp=sharing
The charity organization representative accesses the Share The Meal app and proceeds to the "You" section of the interface. Within this section, they navigate to "Donation History" and select "See All" to access the comprehensive list of donations made. Spotting the "Generate Report" button in the upper right part of the screen, they click on it. Before generating the report, they additionally press within the donation history to view the details of specific donations. Afterward, they input their first and last name to personalize the report, initiating the report generation process. The finalized report is then sent to their email for record-keeping and analysis.

Textual Representation:

0. Generate Donation Report 

1. Open Share The Meal App

2. Navigate to "You" Section

2.1 Access "Donation History"

2.1.1 Select "View All Past Donations"

        2.1.1.1 View Donation Details

2.1.1.1.1 Locate "Generate Report" Button

2.1.1.1.1.1 Input First and Last Name

2.1.1.1.1.1.1 Confirm Details

3. Receive Report via Email

Plan 0: Perform steps 1, 2, and 3.

            When required, execute step 3.

Plan 2: Do 2.1, 2.1.1, 2.1.1.1, 2.1.1.1.1, 2.1.1.1.1.1, 2.1.1.1.1.1.1

Diagram Representation:

Findings from the HTAs for Task 2

The Hierarchical Task Analysis (HTAs) derived from observing users generating donation reports using the Share The Meal app unveiled significant insights. Users consistently executed the task by navigating through the app's functionalities, including accessing donation history, reviewing specific donation details (observed in both user 2 and user 3), and initiating the report generation by tapping the designated button.

Additionally, the users' thought processes aligned remarkably well. Each user exhibited a systematic approach and a clear understanding of how to navigate the app effectively to generate their donation reports. This coherence indicated a shared comprehension of the app's interface and functionalities among the users.

Upon closer inspection of the HTAs, it was apparent that both user 2 and user 3 engaged in a similar step of viewing specific donation details within the donation history before proceeding to generate the report. This alignment underscored the importance of providing direct access to relevant details within the report generation interface for users who require this information.

Comparing the HTAs reiterated the potential enhancement in the process for users by integrating the option to view specific donation details directly within the report generation interface. Streamlining the process would simplify the user journey, eliminating the need for additional steps to access crucial information, and fostering a more seamless experience.

Therefore, the derived design requirements emphasize the significance of maintaining a unified interface while optimizing the report generation process. Integrating functionalities to view specific donation details directly within the report generation interface aligns with users' actions and thoughts, significantly enhancing the user experience within the Share The Meal app. This emphasis on direct access to relevant information stands as a key insight to consider for refining the app's functionalities based on user interaction observations.

HTA for Task 3 - Set notification to update on reminder or push notifications

User 1: University Student

Video Link of User 1 doing Task 3:
https://drive.google.com/file/d/1vsu1FIJR92pwdvrFNK65_bV3CxAYrDne/view?usp=sharing 
User 1 initiates the Share The Meal app and accesses the account page. They proceed to the settings by selecting the icon on the right side. Within the "Reminders and Notifications" section, User 1 encounters three subsections: "Reminder," "Emails," and "Notifications." Opting for customization, the user activates the "Reminder" option and then returns to the main page. Subsequently, User 1 enters the "Emails" section to enable all available notifications. In this way, User 1 tailors their preferences for reminders and email notifications in the Share The Meal app. 

Textual Representation: 0. Set notification to update on reminder or push notifications 1. Open Share The Meal App 2. Click the setting icon         2.1 Click the "Reminders and notifications" button         2.2 View "Reminder" , "Emails" and "Notifications" 3. Select "Reminder"         3.1 Enable notification for "Reminder"         3.2 Select "Emails" 4. Enable the notification Plan 0 : do 1-2-2.1-2.2-3-3.1-3.2-4 Plan 1 : do 1-2-2.1-2.2-3-4 Plan 2 : do 1-2-2.1-2.2-3-3.2-4

User 2: Global Citizen

Video Link for User 2 doing Task 3:
https://drive.google.com/file/d/16DSvpUWWzd45Jo8ohtm_bXmNBptKtB2i/view?usp=sharing
User 2 starts by launching the app and immediately goes to the "You" section. They then access the settings by clicking the corresponding button, directing them to the "Reminders and Notifications" segment. Within this section, User 2 finds three reminder categories: "Reminder," "Emails," and "Notifications." Opting to customize their settings, User 2 turns on the reminder feature for "Reminder." Following this, they go back to the main page and navigate to the "Notifications" section to activate notifications specifically for "Fundraising goals."

Textual Representation:

0. Set notification to update on reminder or push notifications

1. Open Share The Meal App

2. Click the setting icon

        2.1 Click the "Reminders and notifications" button

        2.2 View "Reminder" , "Emails" and "Notifications"

3. Select "Reminder" 

        3.1 Enable notification for "Reminder"

        3.2 Select "Push notifications"

        3.3 Select "Fundraising goals"

4. Enable the notification

Plan 0 : do 1-2-2.1-2.2-3-3.1-3.2-3.3-4

Plan 1 : do 1-2-2.1-2.2-3-4

Plan 2 : do 1-2-2.1-2.2-3.2-3.3-4

User 3: Charity Organization Representative

Video Link for User 3 doing Task 3:
https://drive.google.com/file/d/1vyM0haztsDm2S70SrM8LsknGem4HlUXB/view?usp=sharing
User 3 opens the app and goes to the setting in the “You” page. User 3 clicks the “Reminders and notifications” section and sees 3 choices on receiving notifications. User 3 chose “Reminders” and turned on the toggle. Then, set the frequency and also time of the day according to the preference. Next, User 3 goes back and turns all the notifications for “Email” and “Push notifications” one by one.

Textual Representation:

0. Set notification to update on reminder or push notifications

1. Open Share The Meal App

2. Click the setting icon

        2.1 Click the "Reminders and notifications" button

        2.2 View "Reminder" , "Emails" and "Notifications"

3. Select "Reminder" 

        3.1 Enable notification for "Reminder"

        3.2 Set the "Frequency" and "Time of day"

        3.3 Select "Emails"

        3.4 Enable notification for "Emails"

        3.5 Select "Push notifications"

4. Enable the notification

Plan 0 : do 1-2-2.1-2.2-3-3.1-3.2-3.3-3.4-3.5-5

Plan 1 : do 1-2-2.1-2.2-3-3.2-4

Plan 2 : do 1-2-2.1-2.2-3.3-4

Plan 3 : 1-2-2.1-2.2-3.5-4

Findings from the HTAs for Task 3

From Task 3 that has been conducted, we can perceive that User 1, User 2, and User 3 are using different approaches in setting notifications to update on reminder or push notifications. All users start off in the same way by opening the app and click the setting icon at the "You" page.

The Share The Meal app interaction of User 1 consists of a series of actions targeted at configuring reminders and email notifications. The procedure stars with the launch of the app and the access to the account page. The user then accesses the settings by clicking on the icon on the right side of the display. User 1 encounter three unique subsections inside the "Reminders" and "Push notifications" section of the settings: "Reminder", "Emails" and "Push notifications". When the user chooses personalization, he selects the "Reminder" option and configures the frequency and time preferences before returning to the main page. Following that, User 1 further customizes their experience by going to the "Emails" area and enabling all accessible email notifications. In this manner, the customer gradually customizes their preferences.

User 2's engagement with the app involves a step-by-step process of customizing reminders and notifications. They commence by launching the app and swiftly navigating to the "You" section, indicating a direct entry into their personalized area. Subsequently, User 2 proceeds to the app's settings by clicking the corresponding button, leading them to the "Reminders" and "Push notification" segment. Within this section, three distinct categories- "Reminder", "Emails", and "Push notifications"- are identified. Opting for a personalized experience, User 2 activates the reminder feature under "Reminder" and efficiently returns to the main page. Continuing their customization efforts, User 2 then accesses the "Push notifications" section, where they specifically enable notifications related to "Fundraising goals". This methodical approach ensures that User 2 tailors their preferences for reminders and notifications, focusing on personal reminders and updates related to fundraising initiatives.

User 3's engagement with the app involves a sequential customization of notification settings. Initiating the process by the settings within the "You" page, they specifically navigate to the "Reminders" and "Push notifications" section, revealing multiple notifications choices. Opting for a focused approach, User 3 first configures the "Reminders" category by turning on the toggle and specifying the frequency and preferred time of day for receiving reminders. Demonstrating an attention to detail, they then navigate back to the main settings page to individually activate notifications for both "Email" and "Push notifications". This systematic progression ensures a finely tuned app experience for User 3, aligning notification preferences with their specific requirements and creating a personalized environment within the app.

Design requirements

Following the series of interviews, we have identified essential requirements and potential improvements that could significantly enhance the ongoing development of this ‘Share The Meal’ application. These modifications and enhancements can elevate the current system to new levels of functionality and user experience.

After testing Task 1 which is making donations through ‘Share The Meal’ applications, we found out that the system can be enhanced by increasing the payment method diversity. This is because the current system only support credit or debit card transactions which give limited option for user to donate. Introducing diverse options for adding payment methods can enhance the flexibility of the payment method addition process, accommodating various user preferences and creating a more inclusive payment experience.

Besides that, for Task 2 which is generating a report after donation. We found out that the current system will generate a report for donation but the report can only be sent through e-mail. Therefore, to further enhance the system, we will design a system with a streamlined report generation process. We hope that the system could have minimized unnecessary steps to view donation details. The improvement can increase the efficiency of workflow for users to engage in generating donation reports.

Last but not least, for Task 3 which is setting notifications for reminders, the current system pushes reminders and notifications by separating the reminders, emails and push notifications into three different categories. We found out that the categorization of settings might seem logical, but it could potentially create an unnecessary separation for users who simply want to manage alerts related to donations and fundraising. Therefore, an alternative grouping can be enhanced to make the instructions clearer.