EXPRESS BUS INFORMATION KIOSK

ANAS AZNUR BIN HAIRUDDIN

MOHAMMAD FIRDAUS SHAH BIN BADREN SHAH

HAMSYALEKHA RAJENDRAN

GROUP : ASCII MONOLITH

ABSTRACT

In this paper, we describe the process of designing a kiosk application to assist with finding information on the express bus service at bus stations – bus timing, ETA, ticket pricing, and platform details. This is an overview of how we made design choices, implemented those choices in various stages of prototyping, and evaluated the usability of the application at each step on the process.

Author Keywords

HCI; Human Computer Interaction; Express bus information; kiosk application

ACM Classification Keywords

INTRODUCTION

The Express Bus Information kiosk application was designed to make the task of finding information about the express buses easy. An individual can stop by the kiosk to find out details on the number of buses which goes to his/her specified destination, choose one and find out the bus timings, ETA and ticket pricings. The person can find out about the platform details of a specified bus in case he has lost his way. The kiosk doesn’t support ticket purchasing, only displays information about the ticket pricings and bus details.

PROBLEM

One of the main problem with the bus stations nowadays is that it is always crowded and people often don’t know where to look for the correct information of the buses they need to take. Often, by the time people wait in the line to purchase tickets for buses, the tickets are sold out or doesn’t meet the need of the customers. On the other hand, some people also struggle of not being able to budget their trip properly, and end up with no enough cash while purchasing tickets at the counter which is very inconvenient as they had to rush to withdraw money and stand in the line once again. Sometimes, they might miss the earliest bus due to this reason. One more problem which people usually have at the bus stations are that they are lost and doesn’t know where their platforms are. Users also might struggle on finding the location of the ticket counters of the specified express bus of their choice and often goes around the entire station asking round for the tickets to their specified destination and budget convenience. We wanted to design an application that addressed these various problems and made the process of finding out information about the express buses a more convenient and efficient one.

USERS

Our target audience for this application was anyone who comes to the express bus station and wants to better manage their travel timing and budget. Our primary targets are students who are in rush to go back in the weekends or during semester breaks and also people who struggle to wait in long lines like pregnant ladies, elderly people or those physically disabled. Our personas ranged between from age 20 to 60, but our most accessible audience was university students, since we have plenty of those on our UTM campus available for user testing at any time.

TASKS

There were many tasks that we thought would be useful for this application, but there were a handful of essential tasks that were absolutely necessary. First was to check bus fare, because it is important to calculate the bus fare before purchasing the tickets. This required a calculation method which takes in details of travel such as destination, available buses with their timings, and number of passengers and in return calculates the bus fare for the selection. Once the application displays the bus fare, it will show where to go to purchase the tickets and the ticket availability. So customers can know where to purchase the selected bus tickets. Second task is to check bus timetable. This task helps those who doesn’t know the bus schedule for the specified destination and the estimated time of arrival (ETA). So, they can plan their trip on what time they need to be at the station, the bus availability based on their free time, and also what time they will reach their destination approximately. The third task is to check bus platform. This task helps people especially those who could not find their way to the platform of their bus. This page will have the details of where each bus of each company will stop and a map to navigate people to the respective platform easily. All these tasks will be prompted from a kiosk screen in the bus station, where these tasks will be displayed in the main screen of the kiosk and customer can select any of the three tasks. They can easily navigate out of the task screen to the main screen and also change languages between Malay and English according to their convenience. There will be one last task of help screen which will display the manual of how to use the kiosk and a helpline in case there is any issue with the information kiosk.

DESIGN

Our design went through several stages but the following discussion will emphasize our original design sketches and how they evolved into the final design. Initially our design just had a main screen which displays the three main tasks which users can touch and select from.

After performing our low fidelity user testing, we found out few flaws in our design which confused the users. So we updated our system design according to the feedbacks. One of it being the menu in the check bus fare as initially our design was to choose bus coach before selecting the destination. This troubled the user as sometimes there are no available buses for the destination for the selected coaches. So, we had to redesign it to prompt user to choose destination before selecting the bus coach.

The main screen will display our logo and the application name, surrounded by smaller tabs which will display the tasks. There will be a navigation pane on all the screen which will enable user to switch languages between Malay and English, a home icon to go back to the main screen, and a help icon which displays the manual on how to use the kiosk as well as a helpline.

Figure 1 : The initial design of the main page

Figure 2 : The final design of our main page

The first task screen will be activated once the user touches the first tab, or the coin icon which represents the task of calculating bus fare. In this screen there will be a dropdown menu to select destination and bus coaches. The selection will be set on the textbox. User need to choose the number of passenger from a numerical keyboard under the menu of number of passengers. After all this selection, user can touch on the CALCULATE button which will display the fare need to be paid by the user for the selections and where they can go to purchase the tickets.

Figure 3 : The initial design for Calculate Fare process page

Figure 4 : Final design of Check bus Fare page; this case in Mandarin (also available in Malay and English)

The second task screen will be activated user touches the second tab in the main screen, on the schedule icon which represents the task of check bus timetable. This screen will also have dropdown menu to select destination, and bus coaches. The information of the schedule will be displayed in a table.

Figure 5 : The initial design for the Check Bus Timetable process page

Figure 6 : Final design of the Check Bus Timetable process page in Malay (also available in English and Mandarin)

The third task screen will be activated when user touches the third tab in the main screen, on the platform icon which represents the task of check bus platform. This screen will display a simple map of where the location of the platform for each bus coach. It will be represented by different colors, mostly the color of the real buses and numberings of the platforms.

Figure 7 : The final design of the check bus platform process page

We were using red and black as the background of the design and using yellow font color initially. However due to the weakness in the color contrast, we had to change it to red background with green and yellow buttons. The font is changed to black too, to help distinguish between the buttons and functions. The displayed information will appear in bright colored pages too – green and yellow.

There will be a home button throughout the screens where user can navigate back to the main screen from any screen. The language icon will ask the user if they want to view the screen in either Malay, English or Chinese language indicated through flags.

The help and information button will be available on the main screen and be indicated through icons.

IMPLEMENTATION

We had chosen to use VB.Net to implement our system into a working model. This software is non-web based drag and drop development environment which also uses Visual Basic language coding to assign functions to any object created. It supports continues live testing of the system we were building so we could check for any possible errors at runtime time-to-time. Although it was easy to interact within different pages while building the system using this app, we still had to static pause our system each time we need to run the system.

Our system would start up with a main page which will allow users to prompt/access into few functions. The three main tasks would be Check Bus Fare, Check Bus Timetable, and Check Platform. The secondary tasks include Help, Information, and Translator (English, Malay and Chinese). We were able to map this ideas into our design using VB.Net but overlaying images between each other was an issue as it is not allowed in VB.Net, which is why our final design differs from the initial design for the main page.

Other than that, VB.Net came in handy when it comes to the placing the design ideas into place as the drag and drop for buttons, labels, and pictures are essentially easy. We used buttons which users can click on to prompt any functions from the main page as well as the task pages. We used dropdown style menu to choose bus coaches, destinations, departure city and arrival city. We used radio buttons to help users choose between round-trip or one-way trip. We used the calendar and numerical keyboard option for the date and number of passenger function respectively.

Figure 8 : Our template for the page we were building on VB.Net

Figure 9 : Inserting image into our page using VB.Net

Figure 10 : Drag and Drop function that we implemented in VB.Net to build the our main page

Figure 11 : Creating forms such as the Help page in VB.Net

We used Visual Basic coding to set the functionality of each elements in our kiosk interface. We used our prior knowledge of VB programming to code this system, and that wasn’t much of a hassle.

Figure 12 : The coding we had done to set the functionality of the page elements, using VB language.

Figure 13 : The localization of our page

EVALUATION

As a team conducted user testing and evaluations separately on students who go to class 2SCSJ. Because of the small amount of resources, we felt this was the only way that we could fully test users on the product.

We designed sample steps for these users to complete, having them working through it on their own. Once they did the sample steps, we provided them with a survey sheet for each task, with questionnaires regarding the usability of our system. We even interviewed them personally after the demonstration on whether they would prefer to use our system in daily life and recorded the outcomes in the survey sheet.

Both forms of feedbacks were used for us to determine what fix in the final product that will make our Express Bus Information Kiosk much more reliable and easy-to-use.

USERS

As mentioned before, our users were anyone from public who comes to the local bus stations. However, since we have a varying age groups, we asked these survey questions that could help us find out issues for all age groups and people with different level of disabilities, which we go into later.

It is important that we mention, that we want this application to be used by different age groups for different reasons; hence we tested different aspects that would be used by different people during user testing. A college student may use this application because they are rushing to get the quickest bus with the most reasonable pricing and flexible timing so they could use our system to check on the information of all the buses available en route. An elderly man might find our system useful because he does not need to walk far looking for available buses when he could do it right at one kiosk machine. We designed prototype users based on all these different needs.

EARLY STAGE TESTING

Just to recap on what we have covered before user testing, we wanted to show you the some of the results of the paper prototyping and computer prototyping so you have an idea where this left us.

The paper prototype was a successful way for us hone in one of the true issues that our application had. This was the first time anyone out of the team was seeing a piece of our system, so we have to be precise and detailed on what exactly of what we were showing them. From this prototype, we could identify our system flow, our main page design, improved design layout and made some slight cosmetic changes to the flow of the system.

Computer prototyping came with a heuristic evaluation from our team mates. These evaluations both complimented and suggested new ideas for the developing application. We had suggestions to add in the home button in every page, the bilingual translator at a visible level at the top of the page and various suggestions that in the end led to the system to what you see now.

USER TESTING TASKS

We started by briefing every user on what they will be doing and will be expecting to see. We introduced our system and its functions to them, before asking them to participating in the user testing. Once we briefed the user on what they will be doing, and they agreed to participate, we set them in front of our presentation prototype and asked them to do three certain tasks for us:

i. Check bus schedule

ii. Check bus fare

iii. Check bus platform and location map

These three tasks were given to each user in order. They were to explore each task on their own, without much hints from us. We would see how long it takes them to complete the tasks, and after each task we asked them what their suggestions would be in making the system easier to use.

Once they had completed all three tasks, they were asked to take a brief survey. This survey was done by passing them a survey sheet in the form of questionnaire. They were to answer this survey in private from the team members to avoid any skewing of data from occurring. Once this survey was done, the user was thanked and sent on their way, nothing else was asked.

FIXING

With our user testing, many fixes and ideas came forward which we could use to improvise our system design as well as the tasks’ usability. Some were minor things such as when user chose a different bus, a different bus would be selected instead. Some large fixings that needed to be done was that the system could not be used in bilingual option and the help page was not ready yet.

Most of the cosmetic issues were fixed, but the actual display size was not the smaller one we showed the users so it didn’t exactly look like a kiosk application, but rather like an online computer screen display.

The user testing yielded many results that we were proud of. Most of the scenarios will be highlighted in the surveys below, but can also be seen in the countless idea poured into the application.

SURVEYING

Because of some different usages, the survey was only taken by 7 people. All the users showed great support and agreed to participate in the user testing and did the survey afterwards. These are the survey results as shown below:

REFLECTION

Through our entire project we ran into various issues. Upon reflection, it became obvious that some of these issues could be detected earlier, while others were just limitations of our prototyping tools. These are the some of the issues we ran into, and what we would do differently in future projects in order to make the process design easier and successful.

The first issue we had to encounter was that design of the kiosk which needed to represent an actual kiosk using the prototyping tools. The tool we decided to use at last was JustInMind, which also gave us some issues such as we could not set the calculation method since we only had access to the trial version of the application. The trial version also limited some of the other functions. We also didn’t have enough knowledge on using this software and learning it by steps in limited time was a risk we didn’t intend on taking. So, we decided to use VB.Net.

VB.Net was much easier for us to use since setting functionality for our tasks were made easy through coding. It also allowed us to drag and drop the elements from an existing template so we just had to do some adjustments and placing according to our proposed design.

The bilingual translator and help page was a problem because our page was not ready for those two tasks during early stages of prototyping so user could not click on them.

The input method for number of passenger was supposed to be inserted from the traditional alphanumerical keyboard, which had to be changed when user had difficulties understanding that only numerical values are allowed as input. We changed it into a numerical keyboard.

Other than that, our design, fonts and colouring were all apt and suitable for all the users so that only needed some minor fixing.

Finally, we would code actually our prototype into a dynamic working model rather than a static one. This would let us avoid many issues that we encountered through mere prototyping.

CONCLUSION

The design process was extremely educational and brought us much experience. Not just did we learned some technical related things, but also the value of time management and team work. We learned how important Usability is to any system, trying to put ourselves in the user’s shoes. Through this project we found out that what as a developer we thought was essential to a system, was not actually what users wanted or needed. This showed us how

Important prototyping is because a company that dives into a project without actually taking the time to make a prototype may end up with

catastrophic sales if there is a certain feature that either is inconvenient to use, doesn't do what it is intended to, or isn't included at all.

ACKNOWLEDGEMENTS

All in all, it was a pleasure to be in this class, and

we learned a great deal of information regarding HCI. It is extremely valuable because many of us will be applying these concepts to our future lives and our technical fields. Thank you to Pn Nor Anita Fairos bt Ismail, for this valuable experience, and to our classmates who helped us along in this iterative process by providing feedback and input along the way.