27 MARCH 18 -
Hanif Rashid (0333455)
Usability and Mobile Applications I.
Week 1.
Important Notes :
There are different kinds of apps:
Native App Development
example : iOS, Android, Windows
Web App (mobile)
example : HTML, Javascript, CSS
Hybrid
Accompanied by Javascript framework. It will give us an api to work with.
example : ionic, PhoneGap, Sencha
Requirements:
JQuery Mobile
Adobe Dreamweaver
PhoneGap.
Week 2.
Lecture Notes :
UX - for effective and enjoyable use
We have learned that in order to design mobile apps. We need to consider
Elements of designing a mobile app:
For Good Apps our group choose.
GOOD -Food Panda.
The good points are :

The bad points are :
Week 3.
For this week class, Mr. Razif give us an exercise which is to understand the information architecture. We were given a sample ticket of AirAsia, the typical self-print ticket (A4 size) to re-design to make it more efficient. The only rules here is that we can't take out any of the information on the actual ticket.
The actual boarding pass that were given to us. Our 1st task is to find the important points to extract and after that rearrange the points according to the hierarchy. Here are some important points that we find from top to bottom :
Important points for the re-design boarding pass :
For our first few weeks, Mr. Shamsul toild us come up with the idea for our very own apps. He told us to create three apps with completely different topics and genres.
Idea for apps :
Further progress :
OTOpark
I decided to go with this parking app since parking around city area especially in Selangor is a big issue. After discuss with Mr.Sam, he give a suggestion to make my scope smaller and start my research by tackling public space parking that provided by the town of council first.
The reason why he ask me to start small is because parking space in shopping mall is too complicated to cover and beside, parking in shopping mall already provide a small solution which is work enough to combat the issue that i bring forward which is the physical ticket system, and the solution is by using the Touch and Go card.
He told me that my idea is already been developed but in a way that is close enough to combat the issue, which is MBSA (majlis perbandaran shah alam) is providing app for certain parking area called Flexi Parking. This app is used to replace the conventional ticket coupon system. But the big problem here is that this app is only effected to Shah Alam area only. And this app is not fully helpful to a certain degree such as notify the user that the digital ticket that the user key-in is about to expired. The second problem is user can't used this to other area in Selagor since it's from MBSA (Majlis perbandaran Shah Alam).
For the task that i need to do right now is :
App to top up parking fee now available in Shah Alam | from TheStarOnline
AFTER Sepang and Kuala Langat, motorists in Shah Alam will be able to pay their parking charges via their mobile devices using the Flexi Parking app introduced by the Shah Alam City Council (MBSA).Shah Alam mayor Datuk Ahmad Zaharin Mohd Saad said the app will be an additional mode of payment to the existing coupon and monthly parking payment system.He said motorists can download the app from Google Play and the Apple App Store.“Through the app, motorists can make parking payments online, enabling them to save time.“They also will not have to rush to their cars half-way through an appointment or meeting if their parking payment expires as they can top up the payment through their mobile devices,” he said, adding that the app would also trigger an alert 10 minutes prior to the expiry of the initial parking hour.Besides that, Ahmad Zaharin said motorists would not be faced with the situation where they would be required to walk long distances in search of parking coupons.He said the city council had received numerous complaints from the public on the difficulties faced in getting the parking coupons.Ahmad Zaharin said the system also contributed towards reduced paper usage, in line with its green technology policy.“We hope motorists will gradually turn to this system in line with the Smart Selangor policy,” he said
Research 2 :
Drivers In Petaling Jaya Will Soon Be Able To Pay For Parking With This New App | Says
Petaling Jaya City Council (MBPJ) said the app is meant to eliminate the hassle of looking for parking coupons as motorists will be able to buy and pay for parking digitally. The Smart Selangor Parking app will first be tested in Dataran Sunway, a high-density area known for its parking problems.
The system will greatly reduce problem issues in Dataran Sunway, which has the most number of commercial parking bays at 1,522, Petaling Jaya mayor Datuk Mohd Azizi Mohd Aziz told The Star Online. To get started, users are required to create an account and top up a minimum credit of RM10. Parking rates will remain unchanged at 60 sen per hour, RM5 per day, and RM100 per month. To make a payment, users only need to key in the street name where the car is parked and proceed to pay or top up from wherever they are.
The app also allows enforcement officers to issue summonses, which users can also pay and check via the app. Once the system is up and running, the pay-and-display machines will become obsolete, leaving users with the option of paying via the app or scratch coupons. MBPJ had terminated the services of parking concessionaire Godell Parking Sdn Bhd earlier this year and offered a scratch-and-display system while the app was being developed. The Smart Selangor Parking app will be available to download on iTunes and Google Playstore from 23 April 2018.
Similar Problem : Article here
Research 3 :
The evolution of parking system in Selangor. Article here.
In this article is where the process and evolution parking system in Selangor is seen.
Current App Solution :
A few apps (Android & Apple) is introduced to overcome the problem :
While JomParking have a confusing credit system that instead of using real currency, this app using token system. (100 token equal RM1).
While this 3 apps having a major problem in theirs app, the design, layout and features is the only part that standout :
Due to the app developed by companie that is Under to the City Council.
But the downside is :
My solution is create a new app which is created a new app that will improve on the current app by design, features and usability.
Short & Catchy name.
Oto Park is Car park in Turkish.
Breaking from the typical utility app design.
The Flowchart :
For more on the presentation : LINK
For the final project, we were required to continue our ideas and transfer to Adobe XD, which is a software to create a prototype only such as linking to next page or at least give a app feels. We do not required to do any programming for this semester and programming will continue for the next semester. Since i already created the prototype with the visual and final look during the 1st presentation, i just need to transfer the file to Adobe XD, and all i need to do is convert all the file to SVG format. Bellow are the image process :
Bellow are the clip recorded using Adobe XD to text out my prototype app :
And finally the prototype itself open using Adobe XD cloud base. This link will automatically open using browser.
Hanif Rashid (0333455)
Usability and Mobile Applications I.
Week 1.
Important Notes :
There are different kinds of apps:
Native App Development
example : iOS, Android, Windows
Web App (mobile)
example : HTML, Javascript, CSS
Hybrid
Accompanied by Javascript framework. It will give us an api to work with.
example : ionic, PhoneGap, Sencha
Requirements:
JQuery Mobile
Adobe Dreamweaver
PhoneGap.
Week 2.
Lecture Notes :
- Effectiveness - Goal of the user
- Efficiency - Amount of tasks
- Flexibility - Responsiveness of the app/website
- Learnability - Can easily learn and rapidly use
- Satisfaction
UX - for effective and enjoyable use
We have learned that in order to design mobile apps. We need to consider
- Who are the users?
- What's happening?
- Where are the users?
Elements of designing a mobile app:
- Graphic Design.
- Highlight.
- Alignment.
- Space.
- Button text.
- Colors (Contrast between background and foreground).
- Consistency.
For Good Apps our group choose.
The good points are :
- Clean and easy to navigate layout.
- The picture that the app provide is big enough to makes the customer navigate into.
- Easy to used.
- Smooth navigation.

BAD - TIMES (Taylor's Integrated moodle e-learning System.
The bad points are :
- The whole layout is confusing.
- Some of the context is missing
- The app is lagging when user is interact.
- Too much wasted white space.
Week 3.
For this week class, Mr. Razif give us an exercise which is to understand the information architecture. We were given a sample ticket of AirAsia, the typical self-print ticket (A4 size) to re-design to make it more efficient. The only rules here is that we can't take out any of the information on the actual ticket.
The actual boarding pass that were given to us. Our 1st task is to find the important points to extract and after that rearrange the points according to the hierarchy. Here are some important points that we find from top to bottom :
- Name,Flight Date, Boarding time, Gate Closes.
- Flight number, Depart-Arrive, Seat number and boarding number.
- The typical Rules and regulation.
Important points for the re-design boarding pass :
- We decided to divided into 5 section.
- 1st. the boarding pass name on the top.
- 2nd we put the seat number, boarding details and departure details after the 1st section
- 3rd we put the bar code on the right as we think is easy for scan.
- 4th we put all the details such as flight arrive and depart, name, flight number and date.
- 5th is where the copy that the passenger get. The only difference here is the ads we bring down to this section as an effective way to make more in-flight sale as the passenger will carry this copy of the ticket.
- Mr. Razif likes our idea of divided the boarding pass into a few section
- The only comment here is that we should highlight more on the Flight information such as Depart time and closing gate time. Maybe Gate number also as this is the more information that the passengers will look into after they check in inside not the Depart & Arrive location information.
- The bar code on the right side is too close to the tearing area as most of the time tearing for the passengers copy is literally not that accurate and might cause damage to the bar code.
For our first few weeks, Mr. Shamsul toild us come up with the idea for our very own apps. He told us to create three apps with completely different topics and genres.
Idea for apps :
- SeeFood (lifestyle app) - like Shazam app, but for food. Capture the food and will tell you briefly what's that food and will give you summary of the food info such as recipe.
- OTOpark (Utility apps) - working together with shopping mall car park, this app will make payment easy by eliminating the physical parking ticket and queuing, only pay using the app when entering and before exit the car park. it will tell you graphically where you park and how long your park your car.
- Buzinga (lifestyle app) - An app that buzz you for any local activity around you such as art,music etc. Will buzz you for any discount and sales and you can purchase directly from this app with the discounted price.
Further progress :
OTOpark
I decided to go with this parking app since parking around city area especially in Selangor is a big issue. After discuss with Mr.Sam, he give a suggestion to make my scope smaller and start my research by tackling public space parking that provided by the town of council first.
The reason why he ask me to start small is because parking space in shopping mall is too complicated to cover and beside, parking in shopping mall already provide a small solution which is work enough to combat the issue that i bring forward which is the physical ticket system, and the solution is by using the Touch and Go card.
He told me that my idea is already been developed but in a way that is close enough to combat the issue, which is MBSA (majlis perbandaran shah alam) is providing app for certain parking area called Flexi Parking. This app is used to replace the conventional ticket coupon system. But the big problem here is that this app is only effected to Shah Alam area only. And this app is not fully helpful to a certain degree such as notify the user that the digital ticket that the user key-in is about to expired. The second problem is user can't used this to other area in Selagor since it's from MBSA (Majlis perbandaran Shah Alam).
For the task that i need to do right now is :
- More research on the Flexi Parking.
- Find more about how the city of council Shah Alam parking system and best Selangor.
- Interview people that facing this problem and find the problem that their are facing.
- Compile all the solution and find a way either to make a new app or improve the current app.
App to top up parking fee now available in Shah Alam | from TheStarOnline
AFTER Sepang and Kuala Langat, motorists in Shah Alam will be able to pay their parking charges via their mobile devices using the Flexi Parking app introduced by the Shah Alam City Council (MBSA).Shah Alam mayor Datuk Ahmad Zaharin Mohd Saad said the app will be an additional mode of payment to the existing coupon and monthly parking payment system.He said motorists can download the app from Google Play and the Apple App Store.“Through the app, motorists can make parking payments online, enabling them to save time.“They also will not have to rush to their cars half-way through an appointment or meeting if their parking payment expires as they can top up the payment through their mobile devices,” he said, adding that the app would also trigger an alert 10 minutes prior to the expiry of the initial parking hour.Besides that, Ahmad Zaharin said motorists would not be faced with the situation where they would be required to walk long distances in search of parking coupons.He said the city council had received numerous complaints from the public on the difficulties faced in getting the parking coupons.Ahmad Zaharin said the system also contributed towards reduced paper usage, in line with its green technology policy.“We hope motorists will gradually turn to this system in line with the Smart Selangor policy,” he said
Research 2 :
Drivers In Petaling Jaya Will Soon Be Able To Pay For Parking With This New App | Says
Petaling Jaya City Council (MBPJ) said the app is meant to eliminate the hassle of looking for parking coupons as motorists will be able to buy and pay for parking digitally. The Smart Selangor Parking app will first be tested in Dataran Sunway, a high-density area known for its parking problems.
The system will greatly reduce problem issues in Dataran Sunway, which has the most number of commercial parking bays at 1,522, Petaling Jaya mayor Datuk Mohd Azizi Mohd Aziz told The Star Online. To get started, users are required to create an account and top up a minimum credit of RM10. Parking rates will remain unchanged at 60 sen per hour, RM5 per day, and RM100 per month. To make a payment, users only need to key in the street name where the car is parked and proceed to pay or top up from wherever they are.
The app also allows enforcement officers to issue summonses, which users can also pay and check via the app. Once the system is up and running, the pay-and-display machines will become obsolete, leaving users with the option of paying via the app or scratch coupons. MBPJ had terminated the services of parking concessionaire Godell Parking Sdn Bhd earlier this year and offered a scratch-and-display system while the app was being developed. The Smart Selangor Parking app will be available to download on iTunes and Google Playstore from 23 April 2018.
Similar Problem : Article here
Research 3 :
The evolution of parking system in Selangor. Article here.
In this article is where the process and evolution parking system in Selangor is seen.
Current App Solution :
A few apps (Android & Apple) is introduced to overcome the problem :
- Parkbyphone by Digital Tempo Sdn Bhd.
- JomParking by Appcable.
- ParkBox by ParkBox Digital Sdn Bhd.
- Flexi Parking by Leading Innovative Technologies & Systems.
- Smart Selangor Parking by Leading Innovative Technologies & Systems.
While JomParking have a confusing credit system that instead of using real currency, this app using token system. (100 token equal RM1).
While this 3 apps having a major problem in theirs app, the design, layout and features is the only part that standout :
- up-to-date design
- clean and simple
- Useful features (parking locator, timer, notification)
Due to the app developed by companie that is Under to the City Council.
But the downside is :
- FlexiParking - There is no City Council of Subang Jaya
- SmartSelangor Parking - Still early stage, buggy, can’t change city council.
- Duration time for parking.
- Parking locator.
- Notification Alert.
My solution is create a new app which is created a new app that will improve on the current app by design, features and usability.
Short & Catchy name.
Oto Park is Car park in Turkish.
Breaking from the typical utility app design.
The Flowchart :
For more on the presentation : LINK
FINAL PROJECT
For the final project, we were required to continue our ideas and transfer to Adobe XD, which is a software to create a prototype only such as linking to next page or at least give a app feels. We do not required to do any programming for this semester and programming will continue for the next semester. Since i already created the prototype with the visual and final look during the 1st presentation, i just need to transfer the file to Adobe XD, and all i need to do is convert all the file to SVG format. Bellow are the image process :
Bellow are the clip recorded using Adobe XD to text out my prototype app :
And finally the prototype itself open using Adobe XD cloud base. This link will automatically open using browser.
Comments
Post a Comment