Part 4: Prototype

 

PROTOTYPE

INTRODUCTION

In this phase 4, we were instructed to create a high-fidelity prototype by using any relevant prototyping app that could create an interactive design. This prototype will then be tested and evaluated by a few users. The evaluation session will then be observed and analyzed to acknowledge the strength and weaknesses of the prototype. We believe that in this phase we get to learn more about different points of view of users as they are conducting the evaluation session and acknowledge how we could further improve the interface in the future.

PROTOTYPE

1. NUTRITION VALUE & DIET CALCULATOR MODULE

     

Nutrition Value Module 

          

Diet Calculator Module

2. PUSH NOTIFICATION SYSTEM

      

Push Notifications 

3. FEATURES FOR RIDER & VENDOR

 

    

'Join as Rider' Module

      

       

'Join as Vendor' Module

 PROTOTYPE LINK

 https://rehnumatahsin648917.invisionapp.com/console/share/8X7HEVG5TMQ

BRIEFING NOTES

Briefing Note - prepared by Rahim Rehnuma Tahsin:

This project is proposed by group ‘Optimus’ from section 05 of the course SECV2113 Human Computer Interaction to develop a mobile application interface that aims for improving the current Foodpanda Food Delivery App and promote usability.

A link that provides access to the prototype interface would be shared with the users. Users would be prompted to implement the following 3 tasks in the prototype interface, which are:

• Identify the nutrition value of  user's orders and calculate the total nutrition value

• Try out the push notification system

• Register as either "Rider" or "Vendor"

If users fail to complete a particular task, users are required to say the term "Terminate" to inform the facilitator about the problem of implementing the task. Users would then be prompted to proceed with the next task.

After testing the prototype, users would be asked the following questions and their responses would be recorded for further analysis and improvement of the prototype.

Post-testing Interview Questions:

1. What was easy while testing the prototype?

2. What was difficult?

3. What would you suggest to improve the interaction flow?

4. Would you use/not use the system in real life? Please give a brief reason.

TESTING WITH USERS

Testing Video with Customer 1:

Testing Video with Customer 2:

Testing Video with Rider 1

Testing Video with Rider 2

Testing Video with Vendor

OBSERVATIONS

Observation on Task 1 - prepared by Irfan Mubin Bin Shukri:

According to the video of usability testing of user 1 and user 2 which consist of the customers of the app, they have managed to execute the desired task successfully without facing any difficulties. The users showed no hesitation to perform the task by clicking on the correct button. Next, based on the observation of user 3 and user 4, who are riders, user 4 managed to get the desired task completed with ease. However, user 3, and lastly, user 5, who is a vendor, have done some misclicks when trying to execute the first task. The misclicks happened in the search bar of the nutritional value list. User 3 and user 5 have successfully completed the task on their second try. We have observed that 3 out of 5 users have finished task 1 quite fast, thus we conclude that the interface for doing the first task is efficient and easy for the user to navigate.

Observation on Task 2 - prepared by Afifa Jumana:

For task 2, the first customer, out of the two, did the task very smoothly and said that the task was a little bit difficult for her and added that she did not find the feature practical but also mentioned at the end that it is a good idea as well. While testing with the second Customer, she got confused at first and found it hard to execute. In her opinion, she found it quite odd having to press a widget to execute a push notification. Since it is a prototype, she did not really like it. Both the Riders did the task very easily and mentioned the enhanced system would be very helpful. The Vendor did the task smoothly as well and mentioned that this feature would help him to reduce bad reviews from the users. So, we have observed that 3 out of 5 users have finished task 2 smoothly and 4 of them had positive opinions about the feature. Therefore, we can conclude that the interface for doing the second task is efficient and easy for the user to navigate as well.

Observation on Task 3 - prepared by Lai Kin Yong:

Based on the videos, all 5 users have successfully implemented task 3. The users are able to identify the relevant buttons which are designed for the registration as "Rider" and "Vendor". Even though the input feature is not available in the prototype due to the limitation of Invision platform, the users seem to be able to understand what kind of information is required for each input field in the registration interface. Most of the users have suggested that the interfaces for task 3 are simplistic and easy to use. Users also manage to return to the homepage after completing the registration process. In short, it could be concluded that the interfaces of task 3 have relatively good usability and obtain positive opinions from the users which justify its significance in this prototype.

Summary of Interview Result - prepared by Lai Kin Yong:

To sum up, based on the result of the interviews that have been conducted in all the usability testing videos, it could be claimed that our prototype has successfully fulfilled its main objectives. The three tasks that have been assigned to the users have been implemented without any serious issue or doubt. Since no user requests to terminate the implementation of the three tasks, it shows that each of the tasks is clearly comprehensible and accessible by them. By allowing users to express their feelings and opinion regarding our prototype, we manage to collect meaningful feedbacks from them. These feedbacks help us to gain more insights regarding the usability design that we have applied within our prototype. Certainly, we also could not deny the fact that the users have made some minor mistakes while implementing the particular task when testing our prototype. Therefore, we analyse the feedback to propose a couple of improvements to the prototype in order to further promote usability. In short, the entire event of testing could be considered successful as we manage to achieve the aim of having this testing – to find out the potential flaw of the prototype and design a solution for the problem.

FINDINGS

Issues and Solutions found through Jakob Neilsen's Usability Heuristics Testing - prepared by Afifa Jumana, Lai Kin Yong:

Usability Heuristics	Problem	Solution
H8 - Aesthetic and Minimalist Design	The interface design is not coherent and consistent SEVERITY RATING: 2	The interfaces should be designed based on a similar design theme. The consistent design theme could improve the users’ impression of the system as it implies the professionalism and prime quality of the designers. The consistent design allow improve the users’ familiarity with the system so the users could quickly learn how to use the new modules in the future
H2 - Match between System and the Real World	Only English language is supported   SEVERITY RATING: 3	The system should incorporate other languages such as Bahasa Melayu which is highly prominent in Malaysia. Language localization is one of the vital components in usability because it facilitate the usage of system by the users in one specific region whose native language is not English. Language localization in the system could reduce the cost of learning for new users, which in turn increases the chances of attracting more new users.
H6 - Recognition Rather Than Recall	The nutrition value could only be viewed at a specific interface. Users before have to memorize the nutrition value before navigating to the nutrition calculator to calculate the total nutrition value. SEVERITY RATING: 3	The nutrition list should be made accessible at the interface of the nutrition calculator. The nutrition value of the particular food should also be displayed when holding onto the food profile. These approaches would allow users to view the nutrition value more freely and do not need to memorize the numbers.
H1 - Visibility of System Status	Text size in the Nutrition chart is very small. SEVERITY RATING: 3	Increase the text size of the numbers in the nutrition chart.

Read More

Part 3: Conceptual and Physical Design

 

Conceptual & Physical Design

STORYBOARD

GOAL 1: ADD NUTRITION VALUE TO THE FOOD DESCRIPTION

GOAL 2: ADD PUSH NOTIFICATION TO THE APPLICATION

GOAL 3: FEATURES FOR RIDER AND VENDOR

METAPHOR

GOAL 1: ADD NUTRITION VALUE TO THE FOOD DESCRIPTION

a)     a) Nutrition Value Icon

 

This food value icon represents healthy eating in the improvised application. The assessment of a well-balanced ratio of the key elements carbs, fat, protein, minerals, and vitamins in items of food or diet in relation to the nutrient requirements of its consumer is known as nutritional value or nutritive value. To rate the food in terms of nutritional value, several nutritional rating systems and nutrition data labels have been developed. By this icon, customers can see the food value they are ordering.

 

 

b)     b) Diet Calculator Icon

                                        

This icon symbolizes a calculator that will help the customer to estimate the foods he or she is ordering. Moreover, this will help to keep a record of the nutrition values throughout the whole week and month. Customers who are suffering from various diseases like obesity, diabetes, cholesterol can calculate the nutrition value and keep a personal record.

 

 

GOAL 2: ADD PUSH NOTIFICATION TO THE APPLICATION

 a)      Notification Icon     

This is a notification icon. In Foodpanda app, customers don’t get any notification if their order is canceled. If they want to order again, this takes a lot of time. So, if there is a notification icon and that will send reminders to the customer by default, will save the time of the consumer and become more users friendly.

                        

b)     Tracking Icon

      

In the existing system, there is no way to track the delivery. It just shows that how much time will be needed to deliver the order. But in this tracking feature, customers can locate the rider and can see the exact spot where the rider is currently at. This will save the time and effort of the buyer.

 

GOAL 3: FEATURES FOR RIDER AND VENDOR

 
a)     “Join as Rider” Icon
 

Join as Rider

 

This icon symbolizes a Foodpanda rider. In the current system, if someone wants to join as a rider, he or she has to go through many hassles. After installing the application, if there is an option like “Join as a Rider” will be much easier and user-friendly. They can register or login with their specific identity.
 
 
b)     “Join as Vendor” Icon

 

Join as Vendor

In this icon, it shows a restaurant and the owner of it which implies as a vendor. In Foodpanda there is no option to join as a vendor. This icon will help the vendors to get registered or login as a vendor in the application which is much easier than the current system is.

OVERALL DESIGN

1. Interface Design: Menu

Menu Panel with Nutrition Value Button

List of Nutritional Values

Nutritional value button is put on the top of the menu to allow user to easily see the icon. It will redirect the user to the list of nutritional value based on the vendor that the customer is currently choosing the food from. This will enable the customer to be aware about the amount if nutrients that is available on each and every food that is served. It also help users that wanted to monitor his calorie intake by observing the amount of calorie that is in each food choices.

Diet Calculator Icon

Diet Calculator

Diet Calculator is available at the side bar of menu in order to save some space in the main menu. It will redirect the user to the diet calculator which can be used by the user to calculate the total amount of nutrients or calories based on the food that the user bought.

2. Interface Design: Push Notifications

 

Push notifications are one of the most effective ways for eCommerce marketers to make their services more user-friendly and efficient. Perfectly-timed and personalized push notifications help customers to keep a track of their orders without having to keep the app open at all times until the delivery is made. The new push notification system will be able to update the food delivery progress for any time interval that could be determined by the users. This feature will significantly promote the application's usability since users could now easily keep track of their orders without having to open the application. The customizable time interval will provide flexibility for the users as they could decide on their own when they should check for the phone for the latest progress of the delivery. The customer will also be notified about order cancellation through both push notification and in-app notification for better time management and efficiency.

3. Interface Design: Registration as Rider or Vendor

 Login Panel

Instead of searching inside the "Help center", users who want to register as Foodpanda Rider or Vendor could now directly access the feature from the side panel of the homepage. The registration buttons would be placed at the bottom of the side panel together with their icons. This arrangement is believed to facilitate the users' recognition on the existences and functions of these two buttons. After clicking on any of these two buttons, users would be directed to another interface in which they could partake the registration process.

Rider Registration Interface

Vendor Registration Interface

After clicking onto the "Join as Rider" or "Join as Vendor" button, users would be directed to the respective registration interface. Similar as any ordinary registration page, users have to fill in the relevant personal information to complete the  registration process. It should be noted that these interfaces are created based on the web page versions which are still being used in the current system. Since we consider that the original registration interfaces have provided a good usability, we decided to keep the interface design in our prototype. However, our prototype could further increase the usability since the users would no longer need to use external application as all the operations would be done in-app. We believe this prototype would significantly ease up the rider and the vendor registration process.

 

Read More