Group Project of Human Computer Interaction (HCI)

Improved Paper Prototype

Some of the scenario tasks that we are decided to be executed by the users are:

Task 1 – Convert one note of RM50 to five notes of RM10 (big to small)

Task 2 – Convert five notes of RM10 to one note of RM50 (small to big)

Task 3 – Buy a RM50 worth of mobile top-up prepaid (top up mobile prepaid plan)

Our XCHG Machine Storyboard Video :

https://youtu.be/ddmygrUvRpo

Video of our user personas:

https://www.youtube.com/watch?v=euoPBe4v0Cs

Video of our 3 users doing 3 tasks of our machine :

https://www.youtube.com/watch?v=MSN21XW8R4I&t=6s

1.0 Abstract

In the group project 3, we move on to the next stages of interaction design process which is to develop alternative designs that meet those requirements. Two sub-activities executed and required in this particular project are developing conceptual design and developing physical design. For conceptual design, we attempt to come up with interaction metaphors for our prototype system. The design activity then continues by exploring the physical design options for the interfaces. We attempt to achieve this by expanding the tasks into metaphors and laying plus sketching out all of the possible interface design for the prototype machine for our project which is XCHG money converter. At the end of this group project, by referring to our mock prototype project based mainly with cardboard and paper, we are able to manage to get the interface metaphor necessary and suited for our main interface function of the project. We are also able to manage to design the early sketches of our main followed by its subsequent interface and next improved it to match the standard set by our lecturer through her constructive criticism and feedback.

2.0 Introduction

To build the interface metaphors for our machine, we have to do some research for the suitable analogy given to every function that going to be executed by our prototype machine. As our machine mainly depends on dialogue based interface it was a little bit of challenge to get the right allegory, analogy or metaphor that actually relates to the real life scenario and the users or people that going to use our machine. Despite of that, through some researches and findings, we read on about the early documentation of Automated Teller Machine (ATM) and the conceptual model thesis around the machine itself to get better understanding around the creation, theory, idea and the implementation of Human Computer Interaction on the design of the main interface of the machine. With this idea and understanding around it, we manage to create and build the perfect allegory for our machine’s functions so the users can use our machine confidently and with ease. For the behind the scene of the design of the main interface of the machine, we only focused on creating the most simplistic and functional interface as possible as we believe more accessible our machine are to our demographics, the more users will decided to use our machine. That was the justification of our simplistic nature of our main interface design as we want it to be easy to use for kids, adult and older people in our society. We want to target the broadest demographic of users as possible to maximize the whole potential of our machine and at the same time visualizing the commercial impact and value to the society that it can possibly create if it eventually got materialized in the future.

3.0 Interaction Metaphors

Metaphors:

Task 1 (Converting big notes to small notes of money / coins)

Task 2 (Converting small notes / coins to big notes of money)

Task 3 (Mobile top-up prepaid plan feature)

1. Dialogue - This metaphor was choose as like the Automated Teller Machine or any basic software application they will prompt a number of boxes for the users to pick that generally known as dialogue. The dialogue is used throughout our machine for all the tasks that it provided. This is a good metaphor because when users used a machine, they actually communicated with the machine to use its features. So, the dialogue metaphor shows that the users communicate with the machine through its dialogue prompt.

2. Event-driven - This is where to move forward onto something, someone or something must be done or said to driven or for the event to happen itself. Else nothing happened.

3. Top-up chooser - Like in the real mobile phone shop, you will need to choose your own choice of the type of the mobile top-up telecommunication and the amount of mobile top-up you wish to buy.

4. Collect the pin number - Collect your top-up pin number generated for you exactly like when you buy the top-up pin number at a convenience store.

4.0 Interfaces Design

4.1 Layout Screen Design-Sketching

Welcome interface in English and Malay version

Interface that provided to the users to choose their preference language

Interface that provided to the users for the 3 tasks options

Task 1: Convert big notes to small notes / coins

Description: The machine will prompt the users initially with two options of language either Malay or English language can be choose by the users. Next, it will ask the users to choose the options regarding to the tasks of our machine. The users will need to enter an amount of money in a certain time-frame and with the exact amount of money as the capped number or the limit of money they can choose, the users then can choose a number type of money notes matching with the amount of money they inserted earlier. The machine will then disperse the money to the users and the users can choose whether to print the receipt the transaction that they just made.

Task 1 Interfaces

Task 2: Convert small notes / coins to big notes

Description: The machine will prompt the users initially with two options of language either Malay or English language can be chosen by the users. Next, it will ask the users to choose the options regarding to the tasks of our machine. The users will need to enter an amount of money in a certain time-frame and with the exact amount of money as the capped number or the limit of money they can choose, the users then can choose a number type of money notes matching with the amount of money they inserted earlier. The machine will then disperse the money to the users and the users can choose whether to print the receipt the transaction that they just made.

Task 2 Interfaces

Task 3: Top up for prepaid plan

Description: The machine will prompt the users initially with two options of language either Malay or English language can be chosen by the users. Next, it will ask the users to choose the options regarding to the tasks of our machine. The users will need to choose the type of mobile phone telecommunication that they wish to top-up the credit to and choose the exact amount of mobile phone top-up ranging from RM5 to RM100.Then, they need to insert the allocated amount of money accordingly and need to wait for a while for the pin number to generate by the machine. Next, they can collect the freshly generated pin number.

Task 3 Interfaces

4.2 Lecturer’s Feedback

Our lecturer gave us some constructive criticism to our main interface for us to improve our design to achieve exactly their functional design and uses. The feedback will be state together with the user’s feedback in our report of group project 4.

4.3 Physical Prototype

Our prototype is built by simple cardboard and the interfaces are printed out and pasted on our cardboard prototype.

5.0 References

1. https://www.researchgate.net/publication/317174448_Developing_an_ATM_Interface_Using_User-Centered_Design_Techniques; Last surveyed on 30^th April 2019.

2. https://slideplayer.com/slide/5082445/; Last surveyed on 30^th April 2019.