Minor Project - Process Compilation

27/8/2020 - 3/12/2020 (Week 1 - Week 15)
Vun Wan Min (0334263)
Minor Project
Process and Compilation

INSTRUCTION


Process and Compilation

Week 1
27/8/2020

Briefing of the module.
We had the class on campus, it was our first time coming back after MCO. It was refreshing to be  back on campus and I missed it. After we settled down, Dr Edwin and Mr Mike gave us a brief about the projects that we will be working on in a group. For this module, we had to work with student from other schools such as the Computing School and Business School.

There were 4 projects and we had to choose either one. The first was about location based advertisement system, the objective of the project is to design and develop a location and time aware advertisement in a vehicle screen. 

The second was about LPG ordering, the objective of this project is to develop a LPG gas ordering system as well as to keep track with the order.

The third was about Mud card class feedback system, the objective was to develop an automated Mud card system as well as an attendance system.

The last was about Autism Education, this project was from a classmate's suggestion. A few weeks ago, we have a meeting with Dr Edwin and Mr Mike before the semester started. The meeting was to prepare was for the actual module and get to know Dr Edwin as well as to give a project suggestion to work on.



After the the brief, we have an online meeting with the other schools. The meeting was to meet the other schools and discuss about the project. The meeting ended and we had to choose a group and the one of the project, each group had 6 people with at least 2 or 3 different specialization. I took the first project, which was the location based advertisement along with 2 graphic classmates, 2 animation classmate and another from entertainment. We had not yet discussed on the project as the other schools were not present and we could not grasp the idea of the project.

Project Tacking Document Link:

Miro Board link:

Reflection:
The idea of location based advertisement is hard to grasp, how would it work and how can we work as a team, when we cannot meet or talk in person to further discuss on the project. It seems we can't work on the project without more information on the IT and Business side's point of view as we couldn't get the idea. Researching on the web was also at a lost as it has less information on or we may have been using the wrong key word.

Week 2
3/9/2020

We had a meeting on campus and a consultation with Mr Mike. We asked him our questions on the project. Mr Mike gave us some ideas on it as the project is screen based, he advised us to research on Out of Home (OOH) company, to see how they advertise their product.

Fig. 1: OOH Website (http://outofhome.com.my/)

We researched on this website and found that it provides many services from billboard to digital screen. It advertises on outdoor boards that we see on the streets and buildings.

From the research, we had an idea about it being an advertisement on a screen board, but the problem is that how to apply geolocation to the idea, is the technology advance enough for this project.

Reflection:
For this week, we had research on OOH company, but the project is still not progressing as we still lack information on the concept of it from the other schools for their point of view. I feel that the lack of information and communication is hard to progress with the work as we still do not grasp the project. Feeling lost is very nerve-wracking as none of us in the group know the answer.

Week 3
10/9/2020

For this week, we try to fill out the project tracking document of what we know for know.
Fig. 2: Extracted topic in Miro

For now, we filled up some parts in the tracking document.

Defining the challenge:
Capture the audience’s attention for long enough in order to convince them to carry out what the advertisement is marketing.

Creating the project plan:
- What will we work to produce?:
Advertisements that track the location of both vehicle and user base in the time of the day that suits the consumers’ needs and wants.

- What constraints will we need to manage?
1. User response such as the app is not interesting enough to catch the consumers’ eyes.
2. Whether technology can be designed for this to be carried out.
3. Ensure consumers don’t feel unsettled when their location is tracked and their data is stored.
4. Why do people want the app/website? (making it to something like a groupon app include latest menus for restaurants, E-wallet (cashback)
5. Would user voluntary installation the app? browse the website?
An idea about a social media kind of app with advertising undertones such as how snapchat tracks and shows location of friends

- What measures and indicators will help us know our ideas are successful?
We need to work with the other schools to make the project a success

Challenge analysis:
- What we know in general?
To produce geolocation advertisements that cater to user’s needs and wants, by tracking the location of the user and the vehicle, thus directing user-specific advertisements on screen.
(i.e interference in frequency, multiple phones being tracked, how to categorize the data and requirements)

- What do we believe we already know about this challenge?
To develop a system that tracks location of a user and sends suitable advertisements to them.

- What would we like to learn more about?
In-depth about geolocation advertising as well as the how-tos in developing an app/website that appeals to the target audience.

Target Audience:
Core Audience - Office workers in urban areas 
OR people that want to advertise their content on billboards (Advertisers)
Extended Audience - Students taking public transportation

Empathy
1. Young Adults Who Use Public Transport
2. Adult Drivers On The Road
3. Passersby On The Street

Reflection:
For the project, I was uncertain on what to do or how to do as the project seems out of my specialization. The project was about location-based advertisements, the brief of the project was not very clear on the objective of the design part. It made me very confused on what to do and for now, I did not learn anything yet. However, I plan to make use of the experience of this project to develop a better understanding of advertisements.

Week 4
17/9/2020

Fig. 3.1: RODEO & Sponsors; Ad requirements

We had an alignment meeting with Mr Edwin and finally had a grasp on the project. He suggested we design the app/website in a way that attracts passive users and a way to make the screen interact for the user to have a chance to go to the place that is advertised. He also asked us to find out how long should a video play? How many words should it carry? What's the resolution size, the size of screen? Once in the vehicle, how does it play? How to make sure it plays when there is a customer? How the passive user retains the ad info to visit the business advertised? How can it be different? What is the basis?

Fig. 3.2: Rodeo (https://rodeo.my/index.html)

Fig. 3.4: Grab Car Business (https://www.grab.com/my/business/ads/)

We looked up on the competitors, which was Rodeo and researched the potential sponsor, Grab car as well as on the ad requirements. Rodeo is an on-demand advertisement technology company that works with transportation such as cars, motorcycles and lorries, which carries the Advertiser's brand. There was an article Rodeo, it wrote that Rodeo is planning to collab with Uber to expand advertisement opportunity. So, I would assume why the team decided to have Grab car as a sponsor as they offer in-car branding.

Fig. 3.5: Ads refence and Attention span
Article links:
Ad reference:

Geofencing:

I researched on the time requirements of an ad should be and additionally the time required on user's attention. An ideal time for an ad to play is 14 seconds and the user's attention is about 1.5 to 3 seconds.
We had an idea about making an animation for the ads about 15 seconds as we had animation classmates.

For the IT side, they plan to use a platform called Firebase and a service called Geofencing, which is a service that uses GPS, RFID, Wi-Fi or cellular data to trigger an action when a device enters a set location and has the minimum radius of 100. They also required an tablet with an Android OS, has touch screen function and a GPS receiver.

We made a survey to collect data on user experience, we used Google Forms.

Survey questions:
1. What is your gender?
- Male
- Female
- Other

2. What is your age?
- 13-17
- 18-22
- 23-27
- 28-32
- 33+

3. What is your race?
- Malay
- Chinese
- Indian
- Other

4. What e-hailing service do you use?
- Grab
- MyCar
- EzCab
- EaziCar
- Pickup2u
- PicknGo
- Other

5. Why do you choose your preferred e-hailing companies over others? 

6. Do you sit in the front or at the back of an e-hailing car?
- Front
- Back

7. What time do you usually use e-hailing services?
- Morning
- Noon
- Evening

8. Where do you usually go using e-hailing services?
- School
- Work
- Shopping
- Restaurants/Cafes
- Other


9. How long do you usually spend e-hailing vehicles? (per ride)
- 5-10 minutes
- 30 minutes
- 1 hour
- 2 hours
- Other

10. How much money do you usually spend riding e-hailing vehicles? (per ride)
- RM5 to RM10
- RM15 to RM20
- RM25 to RM30
- RM30+

11. Why choose e-hailing instead of public transport/using your own vehicle?

12. What aspect of an advertisement sticks out to you the most?
- Price
- Promotion
- Product advertised
- Advertisement's logo
- Animations/cinematography
- Other

13. Why would you take action if you saw this particular aspect(s)?

14. What kind of product in an advertisement would most likely attract you?
- Food
- Fashion
- Makeup/Skincare
- Technology
- Sports
- Music
- Other

15. If you see a QR code in an advertisement screen in an e-hailing car, would you scan it?
- Yes
- No

16. Why would you scan/not scan the QR code?

Fig. 3.6: Result of the survey (screenshot from Miro)

Spreadsheet Link: Spreadsheet

We manage to have 116 responses from the survey. From the survey, we found that most people use Grab as e-hailing service and use e-hailing services in the afternoon. They would also seat in the back of the car because  they feel safe or comfortable and would use e-hailing services to go to the mall most often. They like promotion on advertisement because they would save cost and would be attracted to food advertisement. Unfortunately, they won't scan a QR code because they are not interested.

Reflection:
We were lost on what to do with the project. We felt left behind from the other groups as they were confident of what the project required. Despite that, we hope to get back on track for the project and learn from the other groups. I hope that it's not too late to catch up with them as we didn't grasp the project from week 1.

Week 5
24/9/2020

Fig. 4.1: Headrest placement and QR code idea

Fig. 4.2: Advertisement Idea (http://www.lastindependent.com/)

Fig. 4.3: Headrest Monitor Reference
We planned to have the screen place on the headrest of the car like in Fig. 4.2. So that the user would see and interact with. For the QR code, we wanted to encourage the user to scan the QR code with a puzzle for them to solve while for the video, we had an idea for it to be an interactive video to have it more engaging. 

After the the consultation with Mr Mike, he advised us to research on OOH inside and outside of Malaysia to study how they work with advertisement and make the advertisement video we're working on different from YouTube ads.

Fig. 4.4: Rodeo Digital


Fig. 4.5: Play Octopus (https://playoctopus.com/)

We did some researched on the two companies and we found that Rodeo didn't have any information on how they advertise their products and we found Octopus much more engaging as it has games to win prizes.


Reflection:
Mr Mike advised us to research a company called Rodeo on how they advertised their product and another called Octopus, which is outside of Malaysia. Octopus seems much more interesting on how they advertised their product. We also conducted a survey and collected information on user experience. With the information that we gathered and research, it would help with the project. I learnt that there are more ways to advertise a product and didn’t realize it until I researched it.

Week 6
1/10/2020

What we know about Octopus:
For riders:
- Live games (realtime trivia, daily giveaways and cash prizes)
- Ride information (driver profiles, weather and other local info)
- Interactive ads (premium video for a highly engaged audience)

For advertisers:
- Real time access to campaign performance via mobile or desktop
- Interactive experience that yields higher CTRs than other publishers
- Fully interactive (sight + sound + motion)
- 100% viewability
- 100% Video completion rate
- Location-based ad delivery
- Daypart targeting
For drivers:
- Can apply for free tablet (with free mounts and free LTE data, and cash earnings for driving with tablet)
- Extra earnings (more tips and direct earnings from Octopus)
- Higher driver ratings (games make rides more fun and boost ratings)
- Better conversations (connect with passengers)
 
Mr Mike provided  a video about creating Personas and Customer Journey Map.
Link:
1. How to Create a User Persona
2. Customer Journey Mapping 101

Personas and Journey Map: 
1. Students
Name: Alex Tan 👼
Age: 20
Gender: Male
Status: Single
Level of education: University student (Undergraduate)
Occupation: Student
Monthly income (pocket money): MYR1200
User location: Home
Likes: Hanging out with friends, shopping for sneakers, playing games
Dislikes: Going out buying groceries, hates reading, smoking
Scenario: “I like to buy sneakers when shopping with friends. Usually we take Grab because it is more convenient to go directly from home to the shopping mall rather than walking to the nearest LRT station. I am a student, but my parents give me quite a big allowance for my sneaker addiction. If there are limited edition sneakers in stores, I will most likely chase them. I always save my money for my sneakers, so I try not to spend much on food.”

2. Young working adults
Name: Priyanka Deepika 👩🏾
Age: 29
Gender: Female
Status: In a relationship
Level of education: Bachelor in Arts in Humanities and Social Sciences
Occupation: Senior Copywriter
Monthly income: MYR5500
User location: Office
Likes: Fitness, Movies, going out for drinks with friends, financial planning, discounts, karaoke, meeting new people
Dislikes: Sweet drinks, dogs and cats(allergic)
Scenario: “I like watching movies after getting off work with my friends. So, we take Grab to the mall to catch a movie and after that, we go out drinking. However, we have a hard time choosing a movie and getting snacks. We also have a hard time deciding which bar to go to afterwards.”

3. Middle-aged adults
Name: Gary Brown Abdulah 👨🏻‍🔬
Age: 55
Gender: Male
Status: Married, two kids
Level of education: Doctorate in Mechanical Engineering
Occupation: Mechanical site engineer
Monthly income: MYR 10,000
User location: Office, sometimes worksites
Likes: science, golf, old movies, gardening, driving, walks in the park, coupons and saving money
Dislikes: arts, being old, driving at night, meeting new people
Scenario: “I prefer to take a Grab if I’m working late nights at the office but because of my old age, my astigmatism makes it hard to drive with all the car lights. I like to drive but my poor eyesight makes it more risky for me to drive at night. I find it hard to focus on the road, and you never know where there's a good discount. It’s always important to save money!”

Fig. 5: Wireframe (Driver's login page)

The IT team wanted a wireframe design for the driver's login page. Jason made 3 samples for them and preferred the first design. 

Reflection:
For this week, we need to gather information about personas and user journey maps. We had a meeting among the design team and discussed the personas that we’re going to use as well as the user journey map, which the graphic team had learned. I have gained some knowledge from them and I'm glad that I could help a bit with making the scenarios.

Week 7
8/10/2020

Fig. 6.1 Logo Sketches

We did some sketches for our brand identity and it's called Redux. 
Redux - Fortuna Redux, one aspect of the goddess Fortuna in Roman mythology was similar to Adiona, being another goddess for the Romans to call on for a safe return journey.

Fig. 6.2: Colour Palette and Logo refinement

The colours are bright because we want it to look fun.

Fig. 6.3: Chosen Design and Colour schemes

We chose a design made by Jason. It's an abstract "R" and it has the location logo, so the design seem fit for the logo.

Fig. 6.4: New style

Fig. 6.5: New Style 2.0
After the feedback from Mr Mike, Jason made more changes to the logo, the the same triangle is replace with a tagline, the purpose of the tagline is to represent advertisement because our goal was to let users to be attracted to the ads. Mr Mike also asked us to complete a flowchart for the application.

Fig. 7.1: Flowchart of the app

Fig. 7.2: Game reference (https://www.kathynguyendesigns.com/play-octopus)

After that we made a flowchart on how the application game works. When the users enter the game room, which have 2 games to choose from and after the game ends, the ads play and the cycle continues. Fig. 7.2, is the reference from Octopus, we studied the way of how the game and advertisement works.

Survey 2.0
1. What is your age?
- 15-23 : Student
- 24-34 : Young Working Adults
- 35- Above : Middle-Aged

2. Gender
- Male
- Female
- Others

3. Do you take Grab rides?
- Yes
- No

4. How often do you use Grab rides?
- Once a month
- Once every two weeks
- Once a week
- Twice a week
- Daily

5. Do you use Grab rides alone?

If no, who do you usually ride with?

6. What time do you usually take Grab rides?
- Morning
- Afternoon
- Evening
- Night

7. Which mall do you usually go to?
- Pavilion
- Mid Valley
- Sunway
- IOI city Mall
- One Utama
- My Town
- Others

8. What do you usually do at the mall?
- Dining
- Fashion
- Entertainment
- Beauty
- Grocery
- Others

9.  What type of promotions will attract you to the mall?
- Coupons and promotional codes
- Product sampling
- Discounts
- Sales
- Others

10. If you see a promotion or discount, would you be inclined to purchase what is offered?
- Yes
- No

11. Would you play an on-screen game to win promotional vouchers/discounts?
- Yes
- No

12. Would you scan a QR code to get info and discounts from the on-screen ad?
- Yes
- No

Fig. 7.3: Octopus Research (for live game prizes)
Desmond did a research on how Octopus gives out prizes after winning the game. If the user achieved the highest score on any game they would have a chance to win the prize, but to do so they would need to input their phone number to be informed.

Reflection:
We conducted another survey on user experience as we found that some questions from the last survey was not relevant to the project we're doing now. The last survey we did was not clear and we had solid direction that we were going. After the consultation with Mr Mike, we were clear on what to do. It’s better to understand the problem beforehand then have an answer.

Week 8
15/10/2020
 
Fig. 8.1: Survey Analysis

After a few days, Angelina and I collected and analyzed the survey we got. We had 76 responses and most of them were at the age group of 15 - 23, unfortunately, we could made it up to a 100 responses. However, the data was enough for our research. We coloured coded the age group and looked through all the surveys, we put the analysis on our Miro board.

Spreadsheet link:

Survey Analysis:
Age 15 - 23
- Ride Grab (once a month [30/55], once every 2 weeks [16/55]) [7/55 not taking Grab]
- Majority rides alone, few with friends [13/55]
- Mostly in afternoons and evenings, some mornings
- Majority go to Sunway Pyramid [34/55], some to Mid Valley and IOI City Mall
- Most go for dining [20/55] and entertainment [11/55], some fashion and grocery
- Mostly would be attracted to sales and discounts, with several for coupons and a few for product sampling
- Would be inclined to purchase what is offered when seeing a promotion or discount
- Would play an on-screen game to wing promotional vouchers/discounts
- Would scan a QR code for info on discounts from the on-screen ad

 Age 24 - 34
- Ride Grab (once a month, once a week) [2/9 not taking Grab]
- Majority rides alone, some with friend
- Mostly in the afternoon, some at night and evening
- Most of them go to (Mid Valley, Sunway Pyramid)
- Most of them go for dining, some for entertainment
- Mostly attracted to discounts and sales
- Would be inclined to purchase what is offered when seeing a promotion or discount,
- Would play an on-screen game to win promotional vouchers/discounts,
- Would scan a QR code for info and discounts from the on-screen ad

Age 35 and above
- Ride Grab (once a month, once a week) [1/11 not taking Grab]
- Majority rides alone,
- Mostly in the afternoon,
- Majority go to Sunway Pyramid,
- For (grocery, dining, fashion),
-Mostly attracted to sales,
- Would be inclined to purchase what is offered when seeing a promotion or discount,
- Would play an on-screen game to win promotional vouchers/discounts,
- Would scan a QR code for info and discounts from the on-screen ad

Overall from the survey, almost all the responses would be inclined to purchase what is offered when seeing a promotion or discount, would play an on-screen game to win promotional vouchers/discounts and would scan a QR code for more information and discounts from on-screen ad. 

Fig. 8.2: Customer Journey Map

Syaqiel made the final adjustment to the journey map. Each user have different opinion about the game and prizes.

Reflection:
After a few days we sent out the survey, we analyzed the data we collected. The survey had 75 responses, mostly from young adults. From the survey, we found that most of them would purchase products that’s on sale, play games to win prizes and scan a QR code for more information on the product. The collected data was useful for us to have a better clear on user experience. However, from here or somewhere around  last week, we got separated from the computing and business team. Although having separated from them, we had a meeting with them and they have agreed that we separate our stuff with them. In the future, I hope that I can have a better understanding of the situation at hand and have better communication, which clearly I lack. Having said that, I’m still trying.

Week 9
22/10/2020

Fig. 9.1: Wireframe app


Fig. 9.1 is the wireframe that me, Rahaf and Desmond did while Syaqiel and Jason were doing the art direction for the UI and Angelina was keeping track on the tracking document and is flexible, she would help either side. 

Fig. 9.2: Time Duration and Flowchart

The time it will take for the game to play and estimated how many ads would be played. 

Reflection:
For this week, we have a discussion about the flowchart, wireframe and the UI design. We had to separate our work from that so as to not waste more time. We divided the work from what we are capable of doing. Sqaqiel and Jason were doing the UI design and refining the logo respectively while the rest of us were doing the flowchart and wireframe. It’s best to work with our strengths in this project.

Week 10
29/10/2020

Fig. 10.1: Moodboard

Fig. 10.2: Chosen Logo

Fig. 10.3: Key art ideas

We continued to work on the moodboard of the UI design and have the Jason's refined logo and the typeface for the heading Berlin Rounded and Pragnea as the body text. After comparing the geometrical shapes and organic shapes, we find the organic shape more appealing.

Reflection:
This week, we were discussing on the mood board for the entire UI design and the logo finalization as well as refining the wireframe. Syaqiel had chosen some designs for the UI design and we were choosing on which we could all agree on. For the logo, Jason did a good job on refining, mainly because I lack knowledge on logo design, I don't know how to make it look better. Since the elements for the UI was not complete yet, we could not implant the design in, so we just improved a bit with the layout. We should help as much as we can as a group.

Week 11
5/11/2020

Fig. 11.1: More Logo Sketches

Fig. 11.2: Sketches by me

After the consultation with Mr Mike, he had advised us to have a strong rationale to support the visual communication decision for the logo Fig. 10.2. With that, we decided to do more sketches of the logo to help Jason. I made 2 sketches of the logo with the Amazon logo as reference, I used the name of the brand and have the location or car icon pointed to the "X", as pirate says "X marks the spot", which represent the location the uses are headed to, and the arrow is in the shape of a smile for users to enjoy their experience on their journey to their destination by playing games and win vouchers/discount.

Fig. 11.3: Logo Testing

In the end, we chose Jason's new refine logo. It looks unique and the "R" is in the shape of a silhouette person to show that the person is looking at the screen and is engaged to the games we provided.

Fig. 11.4: Rahaf's Design

I like Rahaf's design because it looks more straight to the point and the colours seems much more nicer to look at but because of the arrow pointing downwards, it didn't look right, so we didn't go with it.

Reflection:
After the consultation with Mr Mike, he suggested that we should rethink on the design of the logo, because the representation was not solid enough. So, we all came out with several designs (min. 1 or 2). We all looked at each other's designs and discussed the logo. In the end, we chose Jason’s latest design on the logo. I personally, liked Rahaf’s design on the logo because it looks more interesting and the colour she used. However, we thought that it would look similar to Beats’ logo. For the wireframe, Angelina, Rahaf and I were implementing the art direction into it, since Syaqiel was done with the homescreen icons while Desmond was working on the website. For prototyping, linking the game (spot the difference) was very difficult and tiring because there’s a lot of possibilities that the users can press. I like to be more convincing for the next group project, if I have a chance. For me, it’s hard to give critical facts to people without having to give hard feelings for them, but however, I’ll try to give my most honest opinion.

Week 12
12/11/2020

Fig. 12.2: Home screen layout (Adobe Illutrator)

Fig. 12.3: Home screen layout (Adobe XD)

Rahaf and I recreated the wireframe we had on the Miro on Adobe XD and link a few things. I tried to recreate the game spot the difference by linking the wireframe one by one. Since there were many possibilities, I tried to make it work. After that, Angelina and I had some friends to test out, we guided them on some features since most of the features are not link. I had my friend tested on the game while Angelina had her friends to test out and collect information on what we might lack.

After the testing, my friend told me which part of the game wasn't working and fixed it on the spot. Angelina collected some good feedback from her friends, it was about the leaderboard, they were not clear of the purpose of it and didn't know which part to press on the game spot the difference because I only link 1 part of the side.

Mr Mike suggested to have side one name "spot the difference" and the other "original", however, as both side could be the original and we can leave it as it is because it was a prototype for testing. He also told us to have an explanation or instruction of how the game works and how they could win prizes. In addition, to check the size of the buttons and also the gap/spacing of the button (Fig. 9.5).

Fig. 12.4: Website Flowchart

Fig. 12.5: Website Wireframe

Desmond did the website flowchart and wireframe. Mr Mike told us to speed up the progression of the wireframe.

Reflection:
We a done with the finalized logo and the icons for the homescreen was also complete. After the consultation, we struggled to follow the feedback that Mr Mike gave as well as the interpretation of the logo and brand to be presented. For the wireframe, the overall of it looks fine, just some minor changes with the icons. For the prototype, we test it out on some people, which is our friends. As it was only for testing, we guided them on where to press as some buttons that we did not link. Overall, the testing was good as it was easy to navigate and understand to use. However, there are some features that they do not understand about such as the skip button in the game was not clearly stated and the purpose of the leaderboard. Syaqiel was done with the overall icons for the UI and we proceeded to implement everything in. With the feedback Mr Mike gave, we need to be mindful of the actual sizing of text, frame and to make the buttons that are functional and non-functional different as well as to make it look aesthetically pleasing for users to touch.

Week 13
19/11/2020

Fig. 13.1: Chosen Design

We showed Mr Mike our chosen design and said that being abstract does not help in logo design and suggested that we have it more straightforward.

Fig. 13.2: Rahaf's Design (Mr Mike's suggestion)

Mr Mike also thinks this design is much more suitable to be the logo and advised to replace the arrow to a play button.

Fig. 13.3: Comparing Logo

We have a logo rationale on why we chose the design and it's because it's the rounded edges and elements are to create a sense of approachability compare to the sharp edge of the "R" which looks too aggressive.

Fig. 13.4: Application Mock-up

Mock-up link:

For the mock-up, we need to make some changes. Mr  Mike suggested that the Homescreen ,‘Weather’ and ‘local news’ need to be as rounded as ‘game centre’ icon (radius curve); spacing between buttons needs to be accurate, also shouldn’t put at the edge of the screen border and need to be centralized the icons and be consistent. 

Weather - ‘Kuala Lumpur Federal Territory’ text should be white color and box color should be darker so that it stands out.

Location - Text box same as weather, needs to centralize text box and car icon. When doing layouts we need to set the elements as low priority. Don’t have the elements too close to icons and symbols.

Driver Info - Same feedback as Location, consider driver’s name, some may be very long so leave space for that.

News - Make the box on the left side rounded

Game setup - main buttons need to fit tablet, also box for text input should be rounded also

Game Centre - Stroke thickness must be same, centralize icons, font can be a fun kind of typeface

Game 1 Spot - Using colors, linked to the features of the ui design i.e. 1,2,3,4,5 or 20 timer are indicators, different from normal icons. Would have stronger colors compared to icons that are interactive.

Game 2 Trivia - Move away background elements rather than water down opacity on the background.

Leaderboard - frame needs to have a particular design where it indicates that it just holds text, same as buttons. People need to recognize what is a button and what is not

Phone number - remove the grey box

Ad - make sure ads are presented very well, have it fullscreen, make sure the icons aren’t near the ad

QR - Layout weird

Reflection:
With the feedback that Mr Mike gave on the wireframe we did on Adobe XD, we just had to make some adjustments on it. Some of the layout we did was not centered and had to change the background because the element on it was touching the icons and it didn't look centered. However, we centered it in Adobe XD beforehand and I forgot to update the link. There’s some advantages and disadvantages on Adobe XD, while it can add multiple people in to do in it, however it was hard to know that the icon was centered or not because it does not have a ruler. It does have an auto adjustment but it does not help with centering the icons and text. Afterwards, we decided to move to Figma and start again with the correct sizing and refined backgrounds and icons. I find that Figma is easier to use compared to Adobe XD because I can see what the others are doing (cursor) and where they are on the board.

Week 14
16/11/2020

Application Mock-up link:

Website Mock-up link:
Fig. 14.1: Fun Fonts

There were 3 fun font that Syaqiel found, majority of us chose XPLOR as the Fun Font, it seems much more engaging to look at.

Fig. 14.2: Application Assets

Fig. 14.3: Application Mock-up Overview

We restarted the application mock-up on Figma, because Adobe XD was inefficient to use and reduce the size of the screen to 1280 x 800 px from 1920 x 1080 px. Figma was much more easier and faster, we could see each others cursor, just like Miro.

 Mr Mike said that there were no problem, just some minor changes and have more advertisements to show how brands can advertise with us and also be clear on the destination-based ads.

Fig. 14.4: Website Mock-up Overview

The website mock-up was also in Figma by Desmond.

Fig. 14.5: Advertisement Mock-up

The Ads Mock-up was done by Jason.

Reflection:
For the last consultation with Mr Mike, we have to explain more clearly about the destination based ads as we did not stated clearly as well as the benefits of earning points. For the advertisement section, we need to add more brands in for advertisers to look at and how we’re going to advertise them. For the layout of the mock up, overall, it’s good just adding in the feedback that Mr Mike gave. I learnt more about layout design from this module and it was quite helpful.

Submission:
Proposal slide:
Minor Project: Proposal by angieieieie

Final slides:
Minor Project Final by angieieieie

Comments

Popular Posts