Prototyping & Evaluation

Introduction

In a world where compassion meets technology, we proudly present ShareEats, a groundbreaking platform designed to elevate the experience of giving back through the 'Share The Meal' application. This innovative prototype goes beyond traditional charitable contributions, providing users with an enhanced and user-friendly interface to make a tangible difference in the fight against global hunger. At ShareEats, our dedication to creating a user-friendly and impactful experience is rooted in practical user testing conducted by our dedicated team. Each team member played a crucial role in making sure the prototype aligned seamlessly with the diverse needs and preferences of our users. Let's dive into the practical user testing conducted by our team:

Testing for User 1 - Handled by Too Jun Xun
Testing for User 2 - Handled by Ong Jia Yu
Testing for User 3 - Handled by Siow Xin Ya, Khairunnisa

Screenshot of the Prototype

Figure 1: Login Page

Figure 2: Home Page

Figure 3: Donate Page

Figure 4: Payment Page

Figure 5: Profile Page

Figure 6: Donation History Page

Figure 7: Notification Page

Briefing Notes - Prepared by Jane Ng & Too Jun Xun 

Welcome to the usability testing of ShareEats, a mobile donation application designed to simplify charitable giving. Your feedback is crucial to improving the user experience. Here's a brief overview:

ShareEats is a user-friendly mobile donation application dedicated to make charitable giving simple, secure, and accessible to everyone. ShareEats also has personalization features that enable users to track their donation history, set up notifications, and receive real-time updates on the impact of their support. ShareEats also aims to create a community of compassionate individuals, fostering positive change through simple, impactful, and accessible giving.

Before we proceed, may I have your verbal consent to record your screen and audio during the testing session?

Now, please use the prototype to do the first task, make a one-time donation to a community. Take your time and let me know if you encounter any difficulties or if you’re unable to complete the task. Remember, if needed, you can loudly say “terminate” to move on to the next task. As you perform each task, please think aloud and share your observations. We’ll be recording your screen and audio to better understand your interaction with the app. Next, generate a  report or view details of your donation. Explore the relevant features and provide feedback on the ease of use. Lastly, set up notifications to receive donation alerts and engagement reminders related to your donation. Let me know your thoughts on this process.

Great job on completing the task!

Now, I would like to hear about your experience. Can you share what aspects were easy or challenging during the tasks? Is there anything specific you wish the system did differently or included?

Finally, the usability testing comes to an end. Thank you for your participation. Your feedback is invaluable. 

Testing with Users

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

Video Link of User 1 doing Task 1: 

Video Link of User 2 doing Task 1: 

Video of User 3 doing Task 1: 

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

Video of User 1 doing Task 2: 

Video of User 2 doing Task 2: 

Video of User 3 doing Task 2: 

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

Video of User 1 doing Task 3: 

Video of User 2 doing Task 3: 

Video of User 3 doing Task 3: 

Observations - Prepared by Ong Jia Yu, Too Jun Xun, Siow Xin Ya

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

User 1 (University Student)

In Task 1, the user embarked on the ShareEats usability testing journey by navigating through the login process. After login, the user entered the main page. Upon reaching the main page, the user engaged in a thorough examination of the app's interface by scrolling through the homepage to explore its contents. Then, the user chose to provide a donation to Palestine. Next, the user chooses a predefined donation amount (RM3.50) seamlessly progresses through the payment process, and pays by debit card. The choice of a predefined amount highlights the app's commitment to simplicity and accessibility hence ensuring a smooth and hassle-free donation experience for the user. 

User 2 (Global Citizen)

In Task 1, the user began the ShareEats usability testing by navigating through the login process, emphasizing the significance of a secure and user-friendly entry into the application. The user's choice to support emergency aid in Palestine showcased the app's diverse donation options, and their exploration of the current situation in Palestine highlighted the importance of providing contextual information to users. The straightforward selection of a predefined donation amount (RM3.50) and smooth navigation through the payment process demonstrated the app's commitment to simplicity and accessibility. The appearance of a donation summary page after completing the task served as a crucial visual confirmation of the successful donation, ensuring a positive and reassuring user experience.

User 3 (Charity Organization Representative)

In task 1, the user starts using the apps by navigating through the login page. After logging into the application, the user reaches the homepage. While navigating through the campaign found on the homepage, she seems like facing some difficulties in entering the donation page as she failed to enter the particular campaign at the first attempt by clicking the banner of the particular campaign. On the second attempt, she enters the donation page successfully by clicking the arrow shown under the campaign. The user reads carefully the description of “Emergency Aid in Palestine” before donation. After entering the donation page, the user chooses to donate RM3.50 to the victims. The user navigates through the interface smoothly without facing difficulties in choosing the payment method and making the donation.

Overall, the user's journey in Task 1 reflected a positive and user-friendly experience, with seamless navigation and task completion. The app's intuitive design contributed to the ease of use, and the donation summary page successfully communicated the outcome of the user's action. While the user did not explicitly mention personalization features, the app's capability to track donation history aligns with the user's need for transparency and impact awareness. The completion of the task and positive feedback on the donation summary page indicate user satisfaction, with potential areas for enhancement focusing on the visibility of personalization features to ensure users fully utilize the app's capabilities.

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

User 1 (University Student)

After performing task 1, user 1 continues his journey on the ShareEats app to generate a comprehensive report detailing his donation history within the application. First of all he press the profile button at the bottom navigation bar and is directed to the profile page. Next, he entered the donation history section and the summary of his previous donations is readily visible and easily accessible. Next, he press the view section, and directs to the details of his donation and successfully downloads his donation report. Overall, User 1 effortlessly located the donation summary report without encountering any navigational challenges.

User 2 (Global Citizen)

During the usability testing for Task 2, the user encountered a minor navigational challenge in locating the donation summary report. Initially, there was a momentary pause as the user explored the profile page, entered the donation history section, and then accessed the report. While this could be considered a minor delay, it sheds light on the importance of intuitive navigation and the potential to enhance the visibility of the report feature.

User 3  (Charity Organization Representative)

Moving to Task 2, the user presses the profile button to check out the donation history. However, the user faced some difficulties in finding the exact location of the donation history. In the first attempt, the user tried to check out the “My Profile” session to have the donation history, but she ended up clicking the back button to find the “Donation” button. After checking out the “Donation” session, the user finds out the donation summary successfully. The user also downloads the donation summary after she realizes the occurrence of the button at the right corner. The user feels satisfied after clicking the download button and receiving the final receipt of the donation.

In summary, the user successfully located the donation summary report within the profile and donation history sections. The process, while not entirely seamless, was completed without significant issues. This indicates that the overall structure of accessing the report is functional but suggests an opportunity for refinement in terms of user guidance or interface design to streamline the path to the report feature.

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

User 1 (University Student)

In the ShareEats usability testing for Task 3, User 1 illuminated a superb user experience when setting up notifications for donation alerts and engagement reminders. The user effortlessly executed the task within a short period of time. First, User 1 enters the settings page by pressing the ‘setting’ button. Under the reminder and notification section, User 1 clicked in and was directed to the selected page. Next, he opened both the donation alerts and engagement reminders and finally back to the home page.

 

User 2 (Global Citizen)

The user expressed ease and simplicity in executing Task 3, emphasizing the straightforward process of accessing the settings and enabling donation alerts and engagement reminders within the ShareEats app. The user found the application's layout and the placement of the donation-related features to be intuitive, contributing to a positive user experience. Additionally, the user highlighted the application's simplicity as a notable strength, enabling them to easily identify countries in need and initiate the donation process.

User 3  (Charity Organization Representative)

During the ShareEats usability testing for Task 3, the user demonstrated an excellent user experience while configuring notifications for donation alerts and engagement reminders. The user can complete it in a very short time. To initiate the process, the user accessed the settings page by selecting the 'settings' button. At the reminder and notification section, the user clicked through and seamlessly navigated to the designated page. Subsequently, they effortlessly accessed both the donation alerts and engagement reminders before returning to the home page. At the end of this task, the user gets a bit confused about whether she needs to log out after setting the notifications.

In conclusion, the user provided positive feedback on the usability of the ShareEats app, emphasizing its simplicity and user-friendly interface. The straightforward navigation was a key highlight, with the user expressing satisfaction in locating essential features such as donation alerts and engagement reminders within the settings. The user's suggestion to add more features indicates an interest in further functionalities, suggesting potential areas for app improvement and expansion. Overall, the positive user experience, coupled with constructive feedback, positions ShareEats as an accessible and effective platform for charitable giving.

Findings - Prepared by Jane Ng, Ong Jia Yu, Too Jun Xun

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

User 1 (University Student)

Usability Testing:

• Limited Choice of donation, not diverse enough

Solutions:

• Addition of a broader range of donation options directly on the main page
• Implement a categorization system for donations and group them based on various types or categories

User 2 (Global Citizen)

Usability Testing:

• Complexity in the sign-up process with the requirement to provide an email and password before entering the app.
• Limited engagement with personalization features like tracking donation history and receiving real-time updates.
• Potential confusion in the donation amount selection, especially for manually entering amounts.

Solutions:

• Simplify the onboarding process for a more intuitive user experience.
• Implement prominent feature highlights or introductory sections to increase awareness of personalization features.
• Provide clearer instructions or visual cues for manually entering donation amounts.

User 3  (Charity Organization Representative)

Usability Testing:

• The emergence of the campaign banner has introduced a moment of uncertainty for users, causing a degree of confusion regarding the seamless pathway to access the dedicated donation platform.
• The user encounters a limitation in the ability to personally specify the desired donation amount, hindering the autonomy to contribute in a customized manner.

Solutions:

• Enhance user clarity by expanding the donation page interface, providing a more spacious and inviting area for seamless contribution. This adjustment ensures a more intuitive pleasing donation process, fostering a positive and engaging user experience.
• Empower the user with the flexibility to input their preferred donation amount manually, enhancing the donation experience and allowing a more personalized and tailored contribution process.

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

User 2 (Global Citizen)

Usability Testing:

• The user faced a minor navigational challenge in locating the donation summary report.
• The user had to go through the profile page and enter the donation history section to find the report.

Solutions:

• Implement a direct link or button to the report on the profile page or main dashboard.
• Provide clearer in-app guidance, such as tooltips or tutorial prompts, for navigating to the report.

User 3  (Charity Organization Representative)

Usability Testing:

• The user is experiencing a moment of uncertainty regarding the precise location of their donation history, leading to a  potential navigational challenge.

Solutions:

• Facilitate user clarity and ease of navigation by implementing a clear and intuitively accessible location for the donation history.

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

User 1 (University Student)

Usability Testing:

• Requires too much action to set the notification button to update donation alerts

Solutions:

• Set the notification open by default, users can turn off themselves

User 2 (Global Citizen)

Usability Testing:

• The user found the ShareEats app simple and easy to use.
• The user suggested that the app could benefit from additional features.

Solutions:

• Introduce new features based on user surveys or feedback sessions.
• Implement a well-designed onboarding process or tutorial for seamless discovery and understanding of new features.

User 3  (Charity Organization Representative)

Usability Testing:

• The user encounters no difficulty in effortlessly accessing the notification settings, ensuring a smooth and user-friendly experience.
• The presence of the “Log Out” button positioned at the right bottom has created uncertainty for the user, causing confusion regarding the necessity of logging out after each action.

Solutions:

• Resolve user confusion by strategically relocating the “Log Out” button to a more intuitive placement or providing clear contextual information.

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.