Project 3
1.0 Storyboards
1.1 Task 1: Checking the Bus Schedules
Scene 1
The user wants to go to his faculty to attend a lecture so he decides to wait for a bus.Scene 2
The user ended up waiting for the bus for a very long time.Scene 3
The user has a dilemma as the bus is taking too long and is contemplating just walking to class but theweather is hot and the distance is far.
Scene 4
The user opens the application to determine how long it will take for a bus to arrive at his stop.Scene 5
The user searches for the bus route and arrival time of the bus.Scene 6
The user determined the exact current location of the bus.Scene 7
The bus has arrived and the user boards it.Scene 8
The user finds the app super helpful and is relieved he will not have to wait with uncertainty ever again with this application in his hands.
1.2 Task 2: Checking the Availability of Parking Lots Around or Specific Spot
Scene 1
The user is driving and heading to the faculty to find his parents to have lunch together.Scene 2
The user cannot find a parking slot after finding 20 minutes.Scene 3
Some of the parking slots are empty, but the user cannot park there due to that slot is reserved for the staff only.Scene 4
The user opens the application to find whether there is any parking space nearby instead of the parking space he is currently at.Scene 5
The map inside the application shows there is another parking space that has a parking slot available.Scene 6
The user feels that the application is very useful and user-friendly.
1.3 Task 3: Make a Report of the Faulty Streetlights
Scene 1
The user is driving on campus at night.
Scene 2
The user enters an area where the streetlights are not functioning.
Scene 3
Suddenly, an animal crosses the road and the user nearly hits the animal.
Scene 4
The user opens the application to create a report about this issue.
Scene 5
In the report, the user is required to fill in some necessary information.
Scene 6
The technician received instructions and proceeded to repair the faulty streetlights.
2.0 Alternative Designs
2.1 Muhammad Iman Danial
Screen 1
This page is the main page of our UTM White Hats app. The user can choose the function they want to use on this page like scan, financial, attendance, bus, parking and also report. Meanwhile, the profile picture and short information of the user will be shown here.
Screen 2
This page is one of the pages for the bus page. When the user opens the app, then the app will auto- locate the place where the user is. The system will show the estimated arrival time for each bus and the status of the spaces in the bus. So, this page is shown that the user is waiting for the bus at the centre point station, which is the hub for all the bus routes. Besides that, the P211 bus, which is the bus to fetch the students in or out from UTM, also will know the ETAs in our app.
Screen 3
This is the page that shows the bus around students’ resident college. The bus page will be updating the page from one point to one point, which can give a better experience for our users.
Screen 4
This page is showing that the user is driving his car and plan to park in its college block area. So, he opens the app, the app will be in the parking lots near him, like some residential block or office area. The sequence for the parking lots that are shown will be arranged from nearest to farthest from the location point.
Screen 5
Besides the auto location, the user also can search the parking spaces that are still available at their destination. Once a keyword is input in the search bar, the area that started from the specific keyword will be shown, to let the user know the parking spaces in his input.
Screen 6
This page is the page where the user clicks on the report icon on the main page of the UTM White Hats app. This page will be shown the user clicks the “Create a new report”, and then the user can file the report when the user is noticing the failure streetlight around the UTM campus. The user is required to fill up their personal details, date, time and the location of the failed streetlight. The user was also urged to upload the photo as proof of report.
Screen 7
This page shows that the report is submitted successfully, and the report number will be given to the reporter for future progress updating purposes.
Screen 8
This page is the main page for the report function. The report that was made by the user will be shown here with the current status like “Submitted”, “In Progress”, or “Closed”. Then, the user also allows making a new report.
2.2 Jeevaa A/L Velasamy
Screen 1
This page shows the default start-up page of the application which is the sign-in page. On this page, there are three main parts, which are the sign-in, sign up and continue as a guest, where sign-in is for the existing user to log in, sign-up is for the new user registration and then continue as the guest is used for the user who just wants to use the application temporarily.
Screen 2
This page isthe main page or the home page of the application which contains four main functions which will bring the user to the respective page such as bus, parking space, report and setting. There is also a profile icon at the top right corner which users can click to see their profile.
Screen 3
This page is the profile page of the users once they registered and log into their accounts. There will be showing the details of the user such as the profile picture of the user, username, matric number, phone number and addresses. There is also a sign-out button which allows users to log out of their accounts.
Screen 4
This page is the page where users can find the bus schedule. The main point of this page is that users can highlight a specific bus schedule so that it will reduce the time cost to find the bus schedule which is often searched by the user and users do not have to waste their time to find the bus schedule among all of the bus schedules.
Screen 5
This is the page where the application will display the types of bus schedules that the user would like to
search for. In our case, there will be two main categories of the bus schedule: the UTM bus and the P211 bus provided by the Johor government. By clicking the respective category, the application will bring the user to the page that consists of the bus schedule respectively.
Screen 6
This page is the page for finding parking space. The application will be showing the list of the parking space searched by the keyword and the table will show the parking slot available in the parking space respectively. There is also a clear button for the user to clear the keyword searched and back to the page which consists of all of the parking spaces nearby.
Screen 7
This is the page the user wants to make a report about an issue. On this page, there will have some
information that requires the user to insert such as the name, matric number, phone number, and issue that the user wants to report. There is also a button where the user can take a photo as proof of the issue.
Screen 8
This page is the setting page of the application. In this page, it consists of three main functions which are the edit profile where the application allows the user to edit their profile, the language button which will be more user-friendly considering that there might be foreign visitors who do not read both English and Malay well and the frequently asked questions (FAQs), which the function consist of some commonly asked questions and the respective answers.
This page shows the default start-up page of the application which is the sign-in page. On this page, there are three main parts, which are the sign-in, sign up and continue as a guest, where sign-in is for the existing user to log in, sign-up is for the new user registration and then continue as the guest is used for the user who just wants to use the application temporarily.
Screen 2
This page isthe main page or the home page of the application which contains four main functions which will bring the user to the respective page such as bus, parking space, report and setting. There is also a profile icon at the top right corner which users can click to see their profile.
Screen 3
This page is the profile page of the users once they registered and log into their accounts. There will be showing the details of the user such as the profile picture of the user, username, matric number, phone number and addresses. There is also a sign-out button which allows users to log out of their accounts.
Screen 4
This page is the page where users can find the bus schedule. The main point of this page is that users can highlight a specific bus schedule so that it will reduce the time cost to find the bus schedule which is often searched by the user and users do not have to waste their time to find the bus schedule among all of the bus schedules.
Screen 5
This is the page where the application will display the types of bus schedules that the user would like to
search for. In our case, there will be two main categories of the bus schedule: the UTM bus and the P211 bus provided by the Johor government. By clicking the respective category, the application will bring the user to the page that consists of the bus schedule respectively.
Screen 6
This page is the page for finding parking space. The application will be showing the list of the parking space searched by the keyword and the table will show the parking slot available in the parking space respectively. There is also a clear button for the user to clear the keyword searched and back to the page which consists of all of the parking spaces nearby.
Screen 7
This is the page the user wants to make a report about an issue. On this page, there will have some
information that requires the user to insert such as the name, matric number, phone number, and issue that the user wants to report. There is also a button where the user can take a photo as proof of the issue.
Screen 8
This page is the setting page of the application. In this page, it consists of three main functions which are the edit profile where the application allows the user to edit their profile, the language button which will be more user-friendly considering that there might be foreign visitors who do not read both English and Malay well and the frequently asked questions (FAQs), which the function consist of some commonly asked questions and the respective answers.
2.3 Nielesh A/L Selvam
Screen 1
This login page allows the user to access other applications by entering their username and password for authentication purposes. When entering the username in the “Account” row, users are allowed to click the cross sign to delete the username quickly in the case of committing a typing error. For passwords, the user can click to view all the passwords for checking purposes. If the users don’t have an account, they can click on “Register now” to create an account for this application or by selecting a guest to continue using it. Once the username and the password have been keyed in, users are required to click on the "login" button to enter the application.
Screen 2
This page is used to show the profile of the user by displaying the account name, matric number, telephone number, and address as well as the profile picture that has been set by the user every time the user enters the application. By clicking the "Continue" button, the user will be directed to the main menu screen.
Screen 3
The screen of the main menu displays some functions provided in this application. Users can click on the icon or the text to be directed to the services functions. The first icon is the bus scheduling service. Thesecond icon is for the available parking spaces. The third icon is for the user to make a report on the issues that happened. For the fourth icon is the history button.
Screen 4
If the user clicks on the bus icon or the text beside the icon, the user will enter the bus services page. This page was used to track the bus route and get the estimated time of the certain bus. Besides that, this
application will try to show the current location in which the user is located to make sure the location is
correct and not skewed by any uncontrollable factors.
Screen 5
For the parking space page, the user is allowed to enter the location that they want to go, and then the
application will display all the nearly available parking spaces around the location to provide alternative
choices to the user. Not only that, but it will also show the number of parking spaces that are still available for that place.
Screen 6
For the report page, when the user wants to report any issues, the user will be asked for entering the name, matric number, phone number, problem, and justification which is a picture as proof to show that the reality of this report, and the date and the time when realizing this problem, then user need to click done to submit the report successfully.
Screen 7
For the history page, the user can view the record based on the functions provided respectively. It will show the “bus services”, “parking space”, and the “report” tab. Once the tab has been clicked on, then it will display the information of the record that the user searched and clicked previously.
Screen 8
At the end of this page, it will display all the services again for the user to make the process convenient
because the user does not need to click back and back to reach the main menu page. The “Help” button at the bottom of this page is used for the user to get the information regarding how to set up according to their preferences and understand the details of the functions and it allows the user to get the information regarding this application in case they are not familiar with this application on how to use it. The “Log out” button at the bottom is for a user to quit the account and exit the application.
This login page allows the user to access other applications by entering their username and password for authentication purposes. When entering the username in the “Account” row, users are allowed to click the cross sign to delete the username quickly in the case of committing a typing error. For passwords, the user can click to view all the passwords for checking purposes. If the users don’t have an account, they can click on “Register now” to create an account for this application or by selecting a guest to continue using it. Once the username and the password have been keyed in, users are required to click on the "login" button to enter the application.
Screen 2
This page is used to show the profile of the user by displaying the account name, matric number, telephone number, and address as well as the profile picture that has been set by the user every time the user enters the application. By clicking the "Continue" button, the user will be directed to the main menu screen.
Screen 3
The screen of the main menu displays some functions provided in this application. Users can click on the icon or the text to be directed to the services functions. The first icon is the bus scheduling service. Thesecond icon is for the available parking spaces. The third icon is for the user to make a report on the issues that happened. For the fourth icon is the history button.
Screen 4
If the user clicks on the bus icon or the text beside the icon, the user will enter the bus services page. This page was used to track the bus route and get the estimated time of the certain bus. Besides that, this
application will try to show the current location in which the user is located to make sure the location is
correct and not skewed by any uncontrollable factors.
Screen 5
For the parking space page, the user is allowed to enter the location that they want to go, and then the
application will display all the nearly available parking spaces around the location to provide alternative
choices to the user. Not only that, but it will also show the number of parking spaces that are still available for that place.
Screen 6
For the report page, when the user wants to report any issues, the user will be asked for entering the name, matric number, phone number, problem, and justification which is a picture as proof to show that the reality of this report, and the date and the time when realizing this problem, then user need to click done to submit the report successfully.
Screen 7
For the history page, the user can view the record based on the functions provided respectively. It will show the “bus services”, “parking space”, and the “report” tab. Once the tab has been clicked on, then it will display the information of the record that the user searched and clicked previously.
Screen 8
At the end of this page, it will display all the services again for the user to make the process convenient
because the user does not need to click back and back to reach the main menu page. The “Help” button at the bottom of this page is used for the user to get the information regarding how to set up according to their preferences and understand the details of the functions and it allows the user to get the information regarding this application in case they are not familiar with this application on how to use it. The “Log out” button at the bottom is for a user to quit the account and exit the application.
2.4 Krysten Teh Yet Han
Screen 1
The intended home screen or primary landing page of the mobile application is displayed. There are actually six main functions that we have already included in the main page to further improve user usability. Users can access that particular area with just one click, eliminating the need to navigate to other panels or selections. The functions and buttons have been arranged in an orderly manner on this front page. In addition, the menu segments list the four primary functions utilized by the students—QR Scan, Internet Usage, Results, and Attendance—so they can easily access all of these features with a single click.
Screen 2
It displays the amount of bus stops that are close to the user's current location as well as the distance of thebus stops that are away from them. Additionally, it features a function that allows users to track the bus schedule for the particular bus stop while also looking for additional bus stops that have been assigned and distributed across campus. In addition, by selecting the location option, students can also find out where the bus stops are. This will take them to a map that shows the precise locations of the bus stops.
Screen 3
At that particular bus stop, the timetable or schedule for bus services is displayed clearly on Screen 3. It also prominently displays the estimated time of arrival (ETA) for that specific bus shuttle as well as the precise number of bus shuttles that are still operating and scheduled to stop at that particular bus stop.
Screen 4
Users in this parking section have the freedom to move around the area at will and select where they want to look for parking. When users are certain of the precise place they are headed, they can instantly search for it in addition to tracking the parking, for example, at the administrative office, sports facility, hostel, faculty, etc.
Screen 5
A list of the hostels that are located around the KTDI area, for example, will appear if the students chose a hostel and the hostel area is found nearby. Also, each hostel will have a display showing the precise number of parking spaces still available in that particular block or hostel, allowing users to receive real-time notifications about the availability of parking spots in that particular hostel. The hostel numbers and block numbers will be arranged in a systematic manner.
Screen 6
Users can file reports about problems or incidents that are happening around them or that are requiring further assistance in this report-maker section. For example, the system will ask the user for his/her name, matric/staff number, and email address of the user. It will also enable users to mark their location directly by using the GPS function, and to specify the issues they are facing along with the date and
time. Users will also have to submit images as proof.
Screen 7
The system will display a successful notification to users letting them know that their report has been
successfully lodged, provided the user has successfully submitted the report with all the accurate and
required information. In order to report additional incidents or problems, they will also be able to file another report.
Screen 8
In addition, the reporting system will include a history of all the reports that the user have submitted. Users will also be able to submit more reports, and arrange or format them according to the settings functions.
Screen 4
Users in this parking section have the freedom to move around the area at will and select where they want to look for parking. When users are certain of the precise place they are headed, they can instantly search for it in addition to tracking the parking, for example, at the administrative office, sports facility, hostel, faculty, etc.
Screen 5
A list of the hostels that are located around the KTDI area, for example, will appear if the students chose a hostel and the hostel area is found nearby. Also, each hostel will have a display showing the precise number of parking spaces still available in that particular block or hostel, allowing users to receive real-time notifications about the availability of parking spots in that particular hostel. The hostel numbers and block numbers will be arranged in a systematic manner.
Screen 6
Users can file reports about problems or incidents that are happening around them or that are requiring further assistance in this report-maker section. For example, the system will ask the user for his/her name, matric/staff number, and email address of the user. It will also enable users to mark their location directly by using the GPS function, and to specify the issues they are facing along with the date and
time. Users will also have to submit images as proof.
Screen 7
The system will display a successful notification to users letting them know that their report has been
successfully lodged, provided the user has successfully submitted the report with all the accurate and
required information. In order to report additional incidents or problems, they will also be able to file another report.
Screen 8
In addition, the reporting system will include a history of all the reports that the user have submitted. Users will also be able to submit more reports, and arrange or format them according to the settings functions.
2.5 Scan of Voted Design Layouts
1. MUHAMMAD IMAN DANIAL – voted for everyone.
Reason: He wants the good things of everyone’s design be combined together and become a better
interface.
2. JEEVA A/L A.VELASAMY – voted for Muhammad Iman.
Reason: His design is very detailed and oriented to the problems we have discovered and discussed in
Part 2. His design has solved the problems we discovered very detail.
3. NIELESH SELVAM voted for Muhammad Iman and Jeeva.
Reason: Their design is a very detailed and complete design. It achieves the goal of communicating
important information to users and is very user friendly for the non tech savvy users.
4. KRYSTEN TEH YET HAN – voted for everyone.
Reason: He wants the good things of everyone’s design to be combined together and become a better
interface.
Results : We all decided to use Muhammad Iman’s design as a basic. Then, we enhanced
it by combining all the good parts of everyone’s designs.
In our system, we implemented four Gestalt principles, throughout the whole design, which are
Similarity, Proximity, Continuation and Figure & Ground. For here, we will only pick some interfaces to show the Gestalt principles.
For similarity, we can see it on our main page after the login page. For every app, we use the same shape and design for the app icon. Then, in the design of apps, we use icon design that most the people recognize and prefer, like the parking icon that can be found in our daily lives for the parking button. We can also see Proximity in the main interface. We group the function icons in two rows, and then we put the information which is the student or staff name, matric or staff number at the top center of the main page. Besides, we can also see the Continuation on the main page of our app. We use the original function that has in the UTM Smart app which are scan, attendance and financial status, users still can use the function in UTM Smart in our app, no need to install both apps at the same time. Finally, Figure and Ground are shown in our app too.
Besides that, our app has shown some principles which are from Shneiderman’s 8 Golden Principles. The principles are to Strive for Consistency and reduce short-term memory load, in which we are utilizing the familiar icons and colours in our app. As an example, the bus and parking icon is used in our app, and the users can know the icon refers to what function that provided in our app. Next, we also enable frequent users to use shortcuts in our app, which the users can just click the home icon to return to the homepage in our app and process the task that wishes to.
Other than that, the UTM White Hats app also offers informative feedback to the users. When the users are filling the report column with inappropriate information, our app will be shown the line of the filled part in red colour to notify the user that the information that is keyed in might be wrong. The design dialogue to yield closure principle also contains in our app, the user will be received the report number with “Thank You” after they submit the report in our app.
Lastly, the users permit easy reversal of actions, in which the users can click the home icon to return to the homepage, even if they are having multiple steps in the app, then just a click can return to the homepage for logging out or processing other functions. In the UTM White Hats app, the users support the internal locus of control, which means the users are given full control of the apps without any restrictions by the designer or developer.
Clock in Menu Bar
it by combining all the good parts of everyone’s designs.
3.0 Wireframes
3.1 Task 1: Checking the Bus Schedules
3.2 Task 2: Checking the Availability of Parking Lots Around or Specific Spot
3.3 Task 3: Make a Report of the Faulty Streetlights
3.4 Justification of Design
In our system, we implemented four Gestalt principles, throughout the whole design, which are
Similarity, Proximity, Continuation and Figure & Ground. For here, we will only pick some interfaces to show the Gestalt principles.
For similarity, we can see it on our main page after the login page. For every app, we use the same shape and design for the app icon. Then, in the design of apps, we use icon design that most the people recognize and prefer, like the parking icon that can be found in our daily lives for the parking button. We can also see Proximity in the main interface. We group the function icons in two rows, and then we put the information which is the student or staff name, matric or staff number at the top center of the main page. Besides, we can also see the Continuation on the main page of our app. We use the original function that has in the UTM Smart app which are scan, attendance and financial status, users still can use the function in UTM Smart in our app, no need to install both apps at the same time. Finally, Figure and Ground are shown in our app too.
Besides that, our app has shown some principles which are from Shneiderman’s 8 Golden Principles. The principles are to Strive for Consistency and reduce short-term memory load, in which we are utilizing the familiar icons and colours in our app. As an example, the bus and parking icon is used in our app, and the users can know the icon refers to what function that provided in our app. Next, we also enable frequent users to use shortcuts in our app, which the users can just click the home icon to return to the homepage in our app and process the task that wishes to.
Other than that, the UTM White Hats app also offers informative feedback to the users. When the users are filling the report column with inappropriate information, our app will be shown the line of the filled part in red colour to notify the user that the information that is keyed in might be wrong. The design dialogue to yield closure principle also contains in our app, the user will be received the report number with “Thank You” after they submit the report in our app.
Lastly, the users permit easy reversal of actions, in which the users can click the home icon to return to the homepage, even if they are having multiple steps in the app, then just a click can return to the homepage for logging out or processing other functions. In the UTM White Hats app, the users support the internal locus of control, which means the users are given full control of the apps without any restrictions by the designer or developer.
4.0 Description & Justification of Metaphors
Clock in Menu Bar
Functions : To showcase the timetable of the bus schedule according to the bus stops that have been
selected.
Home
Functions : To redirect the users back to the homepage of the mobile application.
Bookmark
Bookmark
Functions : Enable users to bookmark and save their favourite bus stops, and make the users more convenient in searching for their all-time favourite bus stops.
Bus
Bus
Functions : Direct and channel users to the bus shuttle schedule segments.
Parking
Parking
Functions : Direct and channel users to a smart parking system where the users can freely navigate the
number of parking spaces surrounding them.
Report
Functions : To direct users to the report section that allows them to lodge issues or incidents via the report system.
Maps
number of parking spaces surrounding them.
Report
Maps
Functions : To let users check on the bus route map regarding bus P211 and also the shuttle bus in UTM.
Info
Search
Functions : To enable users to click on the icon and directly search for the specific location that they wished to navigate the number of parking slots available in that specific area.
Location
unctions : To allow users to search for the nearby location available for parking with their GPS being
activated.
Faculty
Functions : To allow users to search for respective faculties parking slots, as we metaphorized book
as faculty because faculty is the place where students studied.
College
Functions : To allow users to search for respective colleges parking slots, as we metaphorized home as college because college is the place where students reside throughout the semester.
Location
activated.
Faculty
as faculty because faculty is the place where students studied.
College
Comments
Post a Comment