28 AUGUST 18 -
Hanif Rashid (0333455)
Usability and Mobile Application II.
WEEK 1
EXERCISE.
INFORMATION ARCHITECTURE
Website : Taylor's University main page
Target audience :
Students finishing high school, wants to enter UNI
People who wants to further study
Diploma students who want to continue their study
Parents
Anyone who’s interested in studying in Taylors, and has adequate finance
International students
Goals (of the uni):
let potential students find out more about the university (courses, programs, fees, etc. )
have people enroll into the uni
impress target audience how advance and good Taylor’s University is
Goals (parents) SECONDARY:
Whether the school is worth investing on for their kids
Goals (students) PRIMARY:
Look for their desired course or program (header, search for program)
How good is the course (student works, rankings)
Find out about the facilities (virtual tour)
Main page :
Sticky Header :
switch to college
Login
Menu : study, campus life, admissions and aid, about taylor’s, teaching & learning, research
Video Hero : Take a virtual tour, visit our campus
Program search, and search for your passion (for those who haven’t decided yet)
Articles, current events
Popular schools in Taylors
Rankings, reputation, stats
Footer : Explore, Learn, Experience, Connect, Social media
Live chat (ask for user data first, should directly direct it to the live chat instead)
Book appointment
Rearrange the content :
Course and program
Popular schools
Rating and stats
Campus virtual tour
Articles
Call to action (relates closely to goals (client side : the owner) make sure you leave with something. (ex. sign up for newsletter) :
Course and program = search
Popular schools = learn more, find out more
Rating
Campus virtual tour = virtual tour, visit campus
Articles = read more
Final outcome for WIREFRAME :
Articles = read more
WEEK 2
3 SEP 2018 :
For this week progression and consultation with Mr.Kannan, he already look at my overall Application design from the previous semester which is from Usability 1, he told me that the only thing that is acceptable is only the logo, the others can be improve upon it and deep dive into the topic that makes my app stand out more and the rest is to developed the app and make my app having a unique selling point.
Here are the topic that Mr.Kannan ask me to research more into maybe can be improvement to my app :
- What are the main features for my app, the paying system or the car park locator.
- If car park locator, what are the features that the app can provide.
- Is it possible to integrated this app for the whole parking in Malaysia including the mall car park.
- The idea of providing a paying system that integrated with 'TouchnGo' Card.
- Which one is more convenient, using app or traditional paper system.
Further research is from this few articles :
The 11 Screens You’ll Find in Many of the Most Successful Mobile Apps.
A Comprehensive Guide To Mobile App Design.
5 SEP 2018 :
Class started as Mr.Razif giving a brief topic related to opening a business on your own. There's a lot of process that need to work on before starting on the business itself. It used to be a lot of paperwork but now we can just used Realtimeboard to sort the roughly business plan with a simplify way. It's a medium that suitable for people who want to do rough and quick view and re-work on it along the way.
Here are some of the important keywords for further research :
Freemium account :
A business model that allows a consumer to receive basic services for free, but requires them to pay for any service deemed to be premium. For instance, a cable provider may offer a customer free HBO for 2 weeks, but then require the customer to pay a fee for any program considered to be premium. Another example is computer software which offers a user basic use of the program, but requires a fee to access advanced features.
Premium account :
In an insurance contract, the risk is transferred from the insured to the insurer. For taking this risk, the insurer charges an amount called the premium. The premium is a function of a number of variables like age, type of employment, medical conditions, etc. The actuaries are entrusted with the responsibility of ascertaining the correct premium of an insured. The premium paying frequency can be different. It can be paid in monthly, quarterly, semiannually, annually or in a single premium.
Coast per view is smaller compare the coast per click :
PPC and CPC will give you a deeper knowledge of online advertising.PPC, known as pay-per-click.PPC is an advertising channel used to drive traffic to your website, and ultimately, convert them into customers. PPC advertising with social media platforms like Facebook and LinkedIn allows businesses to reach their target audience based on specific interests and More Interactive's a way of buying visits to your site.
CPC, known as cost-per-click. It describes a data point when measuring success of online ads. In CPC every time an ad is clicked and it costs a certain amount of money. When someone clicks on your ad, you pay the current Cost Per Click (CPC) from your budget. CPC can fluctuate depending on the market and industry, experts are constantly investigating and adjusting to produce the best lowest CPC possible. So PPC and CPC are the same.
My App is will be focusing on people who wanted to find a parking and help them to save time. This app also will help to ease the sluggish traditional paper pay parking system. And by integrating TouchnGo system, this app will help giving the user another paying option not only to pay the parking but to used it as an alternative platform to used again a system that accept TouchnGo. And while discussing this business plans with our lecturer Mr.Razif, he give a small idea about my app that giving a people an option to rented out their parking space at home to rented out for public parking. This will be another features for the App. Bellow are the result from using the Realtimeboard for OTOcarpark App :
Guide :
Key Partners - Partners that makes our App outstanding and having a good competition from the rest.
Key Activities - What's the key features that our App can provide.
Key Resources - People that created the App.
Key Proposition - What are the unique selling point of our App.
Customer Relationship - What benefit that we can provided to our customers/user
Channels - Platform that we wanted to put our App
Customer Segments - Target audiences
Cost Structure - Basically the financials that we needed to make, market and maintenance the App.
Revenue Streams - Coast that keeps the App alive.
WEEK 3
12 SEP 2018 :
Class today is only one on one consultation with Mr.Razif.
After showing my overall prototype to Mr.Razif. There a few critical redesign that i need to do and there's some of it is on visual aspect. Bellow are the list :
- I need to rethink about the whole aspect of usability.
- I need to redesign the visual aspect such as Button and key position.
- Bring the carpark finder features to priority.
- Try to balance the color. Minimize the color palate around the apps. Don't overused.
- Rethink about the paying system. It can be block credit system over timer or it can be both.
- FAQ need to list down question and give an option to choose instead of giving only 1 option to scroll down.
- Add the TouchnGo features. Integrate the payment system,
Need to see the overall aspect of the app if my app is really useful for the market.
WEEK 4
19 SEP 2018 :
Class activity today is to stimulate a prototype usability testing in class.
There's a few method of prototyping such as paper prototyping.
But the alternate and currently that used among industry is Digital Prototype.
Group Activity for today class is to create a user persona for every app that we create.
The criteria that we must included in the user persona is :
Characteristic
Behaviour
Target user Car
Must include a fake photo of the persona profile.
We need to categorized the user for primary and secondary user.
Bellow are the fake persona user that we created using my app | OTOcarpark :
After that we were required to exchange among other team member to try out other group app. Below are the result after collecting :
Name : Paulina Chan
Gender : Female
Age : 23 years old
Hobbies : playing games, watching movies
Lives : Penang (Currently DK Senza)
Car : Myvi (on Penang)
Religion : Buddhist
Personality :Introvert & Passive
Interest : Food and Games
Skills : Cooking
Tech :Tech-able / Very Savvy
Observation :
Successful to find the parking space!
Problem facing :
Lost due to interface
not sure where is a button
Name : Chalani
Gender : Female
Age : 22 years old
Hobbies : play music (guitar keyboard), drawing, cooking
Nationality : Srilankan
Live : U res
Car : none
Religion : Buddhist
personality : funny, kind,
Interest : Dog lover
Skills : cook srilankan food
Tech : Very savvy
Observation :
Lost, scan?? go to car park locator, so hard, pressed so many things, can't pay, What? lost after using the car park locator. For a new user, the interface needs to start with top up. at first we thought that the 10 RM is the amount you need to pay. put RM as well. Miss the timer. She click the 10 RM and she's surprise "oooo" Confused at card and transfer, indicate it as payment mode. Can use icon insead. After reload goes to confirmation page
Name : Aryna Chan
Gender : Female
Age : 20 years old
Hobbies : playing with cats and dogs, online shopping, sketching and doodling
Nationality : Malay
Lives : PutraJaya
Car : Satria Neo
Personality : Outgoing, a lil bit shy, crazy
Religion : Muslim
Interest : Cats and dogs, horror movies, and baking
Skills : drawing, cooking and baking, makeup
Tech : very savvy
Observation :
Panic at location not found, and then realized. Can't click some, like the city council. Confused, thought the credit is the price. Confused with the scan " What's that?", hard to find "back". "Ooh" Oh my god I am so confused. Surprised with the credit. Just found the car park locator. Able to scan and then pay, but laughed when the credit is not enough.
issue : first time to use try to locate car park, there has to be a lot of notifaction ex. "drive to your car park", next "you have reached your carpark"
WEEK 5
26 SEP 2018 :
Class activity today is to continue from last week group exercise, by documenting last week last tester.
This method is where the board showcase from the app creator point of view and the respondent.
The Scenario and Customer Goals is where the app creator prediction.
For the Customer Experience, Verbal Feedback and finally Internal Alignment is where the respondent feedback.
WEEK 6
00 --- 2018 :
Start to redesign the overall aesthetic look for OTOcarpark base on the feedback collected from classmate. After go through the user testing i can see clearly now the direction & flow for my OTOcarpark APP. Bellow are the before and after process :
 |
| old |
 |
| new |
WEEK 7
00 --- 2018 :
Major Overhaul for the whole app for aesthetic part as the main page is gotten approval by my lecturer. Bellow are the comparison from old to new :
Link for the Prototype.
Once finish the next step is to transfer all the design to HTML,CSS,JAVASCRIPT and using jquery to power the app.
WEEK 8-14
00 --- 2018 :
From this week 8 on wards, the process of transferring all the design to Dreamweaver to Phonegap to created the prototype App.
The 1st stage is to create all the framework and block out for the pages. This is quite straight forward as moving the file from Adobe XD to Dreamweaver. One of the important thing to take noted during this process is when naming the file. It is a MUST to rename all the file that export from Adobe XD to no space and no Capital letter as the encounter a lot of problem especially some of the element is not appear on Dreamweaver. Example naming is (OTOcarpark Big Logo) i need to change to (otocarparkbiglogo) as this will be easier for Dreamweaver to read the file.
Moving on to CSS for styling.This process consider the toughest process as the CSS from the beginning towards end have a major change and it's so fragile as i touch some part of the section and it will effected the other part of the file. A few time of me restarting the file as i do get lost in the coding of CSS styling. Some of the major element used is Textbox where features can key-in words, button, radio button and google map.
Extra features are added such as the Map features. This is consider the main features as the main point of the App is to find and located a parking. For this process i do required to have a Google Map API and basically prototype version. The things that is must is to download Jquery Google Map Coding, Google Map Key and finally the JavaScript.
For the font, i decided to used Helvetica Rounded Bold Family. I found this fond is suitable for the overall looks as the aesthetic is majorly play with curve and rounded edges.
CONCLUSION :
Throughout the end, i didn't manage to finish all the prototype as i encounter a few rounds of error and in order for me to solve the error is to restart the work from level one as i do not know the error. The error also happens towards the Phonegap as sometimes the deigns do appear on Web browser but do not appear on Phonegap. In the end after i manage to get the google map working, i stop as i'm afraid to disturb the CSS and damage overall of my file. All in all, this subject was consider the toughest subject for me. I believe i have too much touch subject for this semester such as Game Design, Personal Project 1 as both subject required a heavy coding and it's consider a new language for me to learn with a short period of time. I do regret that if i start this subject earlier maybe i can't tackle the problem. But overall i do semi-happy with the final outcome.
Link for the Adobe XD Prototype.
VIDEO For ADOBE XD Walk through.
VIDEO For PhoneGap Walk through.
Comments
Post a Comment