Skip to main content

Project 4 - Prototyping and Evaluation


Introduction  

In project part 4, we conducted our prototyping and evaluation of the TakeNGo app. TakeNGo revolutionizes the shopping experience by allowing customers to effortlessly grab items and walk out of the store, with payments seamlessly handled through an in-store mobile app linked to their e-wallets. The three main tasks users need to perform are:
  1. Scan  QR code
  2. Select items 
  3. Make payment
We created high-fidelity prototypes using Figma, incorporating the wireframes and design ideas from project part 3. Each team member was assigned different features of the TakeNGo app to complete the prototypes on time, allowing us to move to the next process: user testing and evaluation.

In the testing and evaluation process, we prepared briefing notes for our 3 targeted users, which consists of Lee, the busy professional. Joseline, the inventory manager with her sister, Jacqueline and Emma, the disability person. Then, we asked the users to use the app in a grocery store to buy the items and assisted them if they faced any difficulties. Lastly, we noted our observations, user feedbacks and the problems users faced to provide solutions.

Testing for User 1 (busy professional)  was handled by Tan Yi Ya.
Testing for User 2 (inventory manager) was handled by Lam Yoke Yu & Goe Jie Ying.
Testing for User 3 (disabled person) was handled by Teh Ru Qian & Goe Jie Ying.

Screenshot of Prototype

Link to Prototype: 

Sign In for User & Sign Up for New User

Main Page

Scan QR code pages

Menu Frame (Included All Features)

Navigate Pages (Start Navigate & Item Not Found)

Navigate Pages (Navigate Successful)

Empty Cart After QR Code scanned

Cart After Selecting Item and Adding to Cart

Payment Successful Prompt after User leave the store 

Receipt to be checked after payment

Spending History

View All Previous Spending History

Check the Previous Receipt

User Profile & Family Member Profile Added

Add New Users

Payment Method

Top Up Pages

Payment Method After Topping Up

Settings



Briefing Notes


Testing with Users

User Briefing 

Video link: https://youtu.be/HMGxZV1Csq8

Task 1: Scan QR code

Video link: https://youtu.be/Srxb_LixyW8


Task 2: Select item

Video link: https://youtu.be/Rf7LXWW_jog

Video link: https://youtu.be/Xc-kx98ojrM

Task 3: Make payment
Video link: https://youtu.be/pK-O5HSHnUE

Video link: https://youtu.be/u4qZZpR_Cxs


Short Interview

Observations

User 1 (Busy Professional) - prepared by Tan Yi Ya
Observation 
The busy professional has minimal problems while completing his tasks. He quickly learned to use the system due to its ease and hassle-free design. Although he could not find the preferred item at first, because there was no stock in store, he successfully navigated himself to the next item he wanted. Preferring efficiency, he swiftly finished all tasks during testing. 

Result of Interview
The busy professionist gave 9/10 on the experience of the app and how easy it was to complete all the tasks given. In his opinion, unlike traditional checkout counters or self checkout machines, this system requires no queues and no delays between processes. He then mentioned the benefit of an automated process of product added into cart, and how it was very convenient to have the feature. He also gave some suggestions on how to further develop the app so it will be even more convenient for the user which is to add a shopping list function.

User 2 (Inventory Manager) - prepared by Lam Yoke Yu
Observation
The inventory manager was amazed by the seamless checkout process. Since we would like the inventory manager to start as a first time user, we would need her to sign up herself. Since our application allows several people sharing the same account, she invites her sister to join her. After that, she top-up the wallet with little money before she enters the store. During the shopping process, the system identifies insufficient balance in the e-wallet, and the inventory manager would need to top up the e-wallet.

Results of the Interview
The inventory manager gave a perfect 10 out of 10 for the system. She concluded that the app would be very convenient as a user would only need to scan the QR code at the beginning and there is nothing much to care about later. The only thing is that the user would need to ensure that there is sufficient balance in the e-wallet. However, the user thinks that the sign up process and the top up process may sometimes be tedious. The user is also concerned about the ease of the implementation of the system as it involves various technologies.

User 3 (Disabled Person) - prepared by Teh Ru Qian
Observation
The disabled person navigated the system smoothly while completing three tasks. However, she encountered a problem when trying to click the menu icon in the upper right corner. The icon was difficult for her to click because it was too small and positioned too far away, making it challenging to reach and select. 

Results of the Interview
The disabled person rated the system 9/10, finding it easy to use and navigating it effortlessly on her first attempt. However, she suggested that the UI could be improved for the future. Overall, she believes it is a good idea that can be promoted to stores worldwide.

Findings

User 1 (Busy Professional) - prepared by Tan Yi Ya
Usability Problem 
During the testing process, the busy professionist wanted to find a certain product but it was not available in store, either it was out of stock or the product was simply not available.

Solution
Shopping list function is added into the prototype of the app, where users can create a shopping list before they go into a store. The shopping list can be general, e.g. the type of product, or very specific such as mentioning the brand of the product. If a user typed in a general name of the product, the app will suggest items that they could buy for them to choose from. The user can also choose between different branches to see how many stocks are left for each product in a specific branch and get notified if stocks are running low on certain products that they want. 

User 2 (Inventory Manager) - prepared by Lam Yoke Yu
Usability Problem
The user may find the initial signup and setting processes cumbersome, which may deter new users from adopting the system. 

Solution
Improve the and simplify the signup process and make it user-friendly. Besides, implement automatic top-up options or notifications as they enter the store to ensure that the users are aware of their e-wallet balance before shopping.

User 3 (Disabled Person) - prepared by Teh Ru Qian
Usability Problem
The usability problem identified is the difficulty in accessing the menu icon due to its small size and distant placement. This issue highlights the need for better accessibility features within the UI design, particularly for users with disabilities.

Solution
By enlarging the icon and positioning it in a more accessible location, the system's overall usability can be significantly improved, ensuring a more inclusive experience for all users.



Comments

Popular posts from this blog

Project 3 - Conceptual & Physical Design

Storyboard Task 1: Select items and Task 2: Scan barcode In our proposal, the action of selecting items and scanning barcodes are done simultaneously. When a user selects an item and puts it inside his shopping basket or bag, the item is automatically added to the virtual cart in our application and the user does not have to scan the barcode. Task 3: Make Payment Alternative Designs (Crazy 8) We are applying the Crazy 8 method to our interface design project in order to generate ideas fast. Each of us has eight minutes to create eight alternative interface sketches in this quick and enjoyable activity. It encourages creative thinking and the generation of as many different ideas as possible without being overly concerned with details. At the end of the activity, we discuss and choose the best idea for each concept by voting. This ...

Project 2a - Task Analysis and User Observation

Introduction During the shopping process at the mall, stakeholders including busy professionals, inventory managers, and seniors or disabled people utilise self-checkout technology for seamless transactions. They begin with selecting items, browsing through the store's aisles to find their desired products efficiently. Next, they effortlessly scan barcodes using either barcode scanner or manual entry options provided by the self-checkout system. Finally, making payments is a breeze, with a variety of options available, including contactless payments for speed and convenience. This streamlined process ensures a smooth shopping experience for all stakeholders, catering to their diverse needs and preferences. Hierarchical Task Analysis Derivation Task 1 - Select Items Busy Professionals Video link :  https://youtu.be/nvLW_7PVioo ...