Application Design 1
4/4/19 - (Week 1 - )
Mohamad Irfan (0326620)
Application Design 1
ASSIGNMENTS
Assignment 1
Week 1 (4/4/19)
For our first assignment we had to come up with ideas for a mobile application with key propositions, something that makes it unique to other apps similar on the market. Using Realtimeboard I came up with 3 ideas with problem statements.
Problem statement for Translator Idea - People often find themselves unable to understand what someone is saying or what it says on a sign, especially when living somewhere surrounded by people who speak a different native language, or while travelling in another country. With this app translating a word or what another person is saying to any languages of your choice is made easy.
Problem statement for Food Finder Idea - This app is for people who want to find somewhere to eat but somewhere that serves food and drinks appropriate for a person's chosen type of diet based on their body statistics such as BMI, amount of exercise etc. Based on this information keyed in the app suggests restaurants and food. It can also keep track of your calories and calculate the calorie quota for the day.
Problem statement for Book Review Idea - Ever in a public library or book shop and wanted to know everything about the book instantly? By simply taking a picture of the cover, this app link you to reviews of the book, other books in the series and which order to read them in, other books written by the author, and a biography of the author.
Week 3-4 (18/4/19 - 25/4/19)
I proposed my Food Finder idea to Mr Razif but he said it was not practical. The app would require a database of all the items on the menu of every restaurant. I looked at similar apps to this such as MyFitnessPal which helps the user keep track of calories per day. It recommends a daily calorie intake and has an extensive database, food diary, and exercise log. A lot of these apps have a variety of features that help keep track of nutrition intake, exercise, and diet plans.
I decided to go back to Translator app idea.
Similar Translator apps:
1. iTranslate
Notable Features:
EXERCISE 1
For our first exercise we had to redesign an AirAsia boarding pass by incorporating information architecture.
Feedback
EXERCISE 2
Week 5 (2/5/19)
Screen on Application
Flow Chart
This week we started working on a flow chart for our app. The flow chart is supposed to show all the options and processes on our designed app.
Flow Chart Shape meanings:
EXERCISE 3
Week 6 - Week 7
PetTrak Flowchart
Using draw.io I made the flow chart for my PetTrak App. With the flow chart it will give a general idea of what each screen and section will have and what the content is. It will also roughly show the procedures or paths the user will go through and how the app may navigate.
EXERCISE 4
Week 8 - Week 9
Low Fidelity Prototype and Initial Usability Test
Using Adobe XD and flow chart, I constructed each screen as planned. The biggest challenge was organizing and designing the content of each screen. Adobe XD also allows the prototype to be navigated through so I had to link each button or UI element to it's respective destination. The more I designed each screen the more I realized what was missing from my flow chart and made those changes accordingly.
Initial Usability Test
After completing the prototype I conducted an initial usability test and had my sister try out the prototype for the first time. I gave her a set of tasks and information and asked her to try and complete them without myself interfering or assisting. I tried to ask questions to get her to speak whats on her mind and what she thinks of design and features of the app.
Usability Test Tasks:
Final Project
For our final project we had to produce the final design of our app. Essentially making our low fidelity prototype and designing into the final version with the final UI and UX. I initally designed the first 5 screens of my app to let Mr Razif provide feedback:
I got a lot of valuable feedback from Mr Razif. I began with designing all the important icons that would be used frequently throughout the app.
Mohamad Irfan (0326620)
Application Design 1
ASSIGNMENTS
Assignment 1
Week 1 (4/4/19)
For our first assignment we had to come up with ideas for a mobile application with key propositions, something that makes it unique to other apps similar on the market. Using Realtimeboard I came up with 3 ideas with problem statements.
Problem statement for Translator Idea - People often find themselves unable to understand what someone is saying or what it says on a sign, especially when living somewhere surrounded by people who speak a different native language, or while travelling in another country. With this app translating a word or what another person is saying to any languages of your choice is made easy.
Problem statement for Food Finder Idea - This app is for people who want to find somewhere to eat but somewhere that serves food and drinks appropriate for a person's chosen type of diet based on their body statistics such as BMI, amount of exercise etc. Based on this information keyed in the app suggests restaurants and food. It can also keep track of your calories and calculate the calorie quota for the day.
Problem statement for Book Review Idea - Ever in a public library or book shop and wanted to know everything about the book instantly? By simply taking a picture of the cover, this app link you to reviews of the book, other books in the series and which order to read them in, other books written by the author, and a biography of the author.
Week 3-4 (18/4/19 - 25/4/19)
I proposed my Food Finder idea to Mr Razif but he said it was not practical. The app would require a database of all the items on the menu of every restaurant. I looked at similar apps to this such as MyFitnessPal which helps the user keep track of calories per day. It recommends a daily calorie intake and has an extensive database, food diary, and exercise log. A lot of these apps have a variety of features that help keep track of nutrition intake, exercise, and diet plans.
I decided to go back to Translator app idea.
Similar Translator apps:
1. iTranslate
Notable Features:
- Available on Apple Watch
- 100 Different languages
- Voice mode and verb conjugations
- 103 languages typing and 59 languages offline
- Draw text and characters in 97 languages
- Camera translation in 37 languages
- Download a pack specially made for a certain location or country
- Learn common phrases from that country
- WiFi dialer to make calls from abroad
- Tips for cultural norms
- Specializes in Asian languages
- Text and voice
- Have a conservation with the app
- Photo translation
- Phrase book and dictionary
- Asian languages
- Available offline
- Camera translation, especially for food
- 40 languages
- Premade travel phrases
- Voice translation
- Export, copy, share transcripts of voice conversations
- Save favourite phrases in custom phrase book
- Preset languages text and voice - simply open the app for it to already be displaying the language you speak and the chosen language it will be translated to. Easily switch between text, voice and camera by clicking the icons.
- Camera translator - taking a picture of a sign, a shirt, item on menu etc. Will translate into your chosen language. There is also a crop feature which allow you to crop out any unnecessary writing of the photo taken, useful for passages with a lot of words, lists, etc.
- History and saved words - The user can enable the app to keep track of all words being translated by text, voice, and camera. It will neatly display the translated word, phrase, or sentence alongside your desired languages.
Alarm Clock App
I came up and researched two more app ideas:
Residence Security App
Problem Statement - An app to help improve security and communication in resident compounds, guarded neighborhood etc. Often times it becomes a hassle for the security guard to call your phone every time you have guests, random visitors, or a service. With this app you can pre-register visitors, emergency button that alerts other residences, and monitor where and when security guards are doing their patrols.
Target Audience:
Competitors:
JagaApp
- Moving snooze button, that you have to click several times to confirm it
- Alarm gets gradually louder
- Closing the alarm requires you to do a physical activity, such as jumping with the phone in hand, or tracing the outline of a drawing
I came up and researched two more app ideas:
Residence Security App
Problem Statement - An app to help improve security and communication in resident compounds, guarded neighborhood etc. Often times it becomes a hassle for the security guard to call your phone every time you have guests, random visitors, or a service. With this app you can pre-register visitors, emergency button that alerts other residences, and monitor where and when security guards are doing their patrols.
Target Audience:
- Residents staying in a gated neighborhood
- Security guards
Competitors:
JagaApp
- Emergency assist to notify residents and guards
- visitor registration
- notice board and rules
- and a separate app for the moderator
i-Neighbour
- 3 platforms, 1. Developer Platform 2. Community Platform 3. IoT Platform
- Visitor management - invite guests, register in advance
- Residential management - booking facilities, payments
- Security - Panic button, blacklist, incident reports
Neighborhood Pet Tracker
Problem Statement - It happens more often than not where resident pets escape, go missing, or get hurt without the owners knowing until its too late. With this app residents and pet owners can help and get help from neighbors with pets as well. Send out alerts to other residents and they can easily notify if a missing pet has been seen in their area or not. This will help narrow down the location of the missing pet. Users can also create and view profiles of pets in the neighborhood where they can share pictures and information about the pets.
Features:
Features:
- Alert other residents if pet goes missing
- Other users can respond with 'Not here' or 'here'
- Create your own profile for pet and owner
- Lookup other pets profile
Target Audience:
- Pet owners in a gated neighborhood
- Residents of a gated neighborhood
- Residents who don't want pets within their area
Competitors:
GoPetie
- Connect with other pet owners
- report missing pet
- Pet profiles
Tagg
- GPS tracking system for dogs
- Requires hardware on the pet
PetRescue
- Help lost and abandoned pets find new owners
I refined my miro board:
EXERCISE 1
For our first exercise we had to redesign an AirAsia boarding pass by incorporating information architecture.
 |
| AirAsia Boarding Pass Sample |
- Air Asia Logo
- Boarding Pass
- Progress Bar
- Completion Notification
- Airport Guide
- Airline Copy
- Advertisement
Target Audiences:
- Passenger
- Gate Keeper
- Steward/Stewardass
Information Architecture:
Boarding Pass
Boarding Pass
- Flight Number
- Gate Number
- Time Gate Closes
- Departure Time
- Departure Date
- Full Name
- Nationality
- Booking Number
- Seq Number
- Seat Number
- Depart Location
- Arrival Location
Airline Copy
- Please Fold Here - Do Not Tear
- Flight Number
- Seat Number
- Departure Date
- Arrival Location
- Booking Number
- Seq Number
 |
| Ex 1 |
- Users can be confused between Gate Number and Seat Number. Put more emphasis on the important information, which is the left partition.
- Can use more colours or shapes for emphasis
- Date should be full date instead of DD/MM/YY
EXERCISE 2
Week 5 (2/5/19)
Screen on Application
Flow Chart
This week we started working on a flow chart for our app. The flow chart is supposed to show all the options and processes on our designed app.
Flow Chart Shape meanings:
EXERCISE 3
Week 6 - Week 7
PetTrak Flowchart
Using draw.io I made the flow chart for my PetTrak App. With the flow chart it will give a general idea of what each screen and section will have and what the content is. It will also roughly show the procedures or paths the user will go through and how the app may navigate.
EXERCISE 4
Week 8 - Week 9
Low Fidelity Prototype and Initial Usability Test
Using Adobe XD and flow chart, I constructed each screen as planned. The biggest challenge was organizing and designing the content of each screen. Adobe XD also allows the prototype to be navigated through so I had to link each button or UI element to it's respective destination. The more I designed each screen the more I realized what was missing from my flow chart and made those changes accordingly.
 |
| Completed Low Fidelity Prototype |
After completing the prototype I conducted an initial usability test and had my sister try out the prototype for the first time. I gave her a set of tasks and information and asked her to try and complete them without myself interfering or assisting. I tried to ask questions to get her to speak whats on her mind and what she thinks of design and features of the app.
Usability Test Tasks:
- Create a PetTrak Account
- Set up Pet Profile(s).
- Create a Community
- Join an Existing Community
- Report a Missing Pet (Pikachu)
- Respond to Active Missing Pet
- Change PetTrap map to YOUR Active Report
- Check Neighbors PetTrak Map
- Change My Pet Profile and Add a new picture to the profile
- Edit Owner Profile Details
- View Neighbors in the Community, and then check the Owner and Pet Profile
- Post an Announcement
- Invite a Neighbor from contacts and email
Usability Test Video:
Final Project
For our final project we had to produce the final design of our app. Essentially making our low fidelity prototype and designing into the final version with the final UI and UX. I initally designed the first 5 screens of my app to let Mr Razif provide feedback:
I got a lot of valuable feedback from Mr Razif. I began with designing all the important icons that would be used frequently throughout the app.
 |
| Designing icons and assets in Illustrator |
 |
| Adobe XD |
This was very tedious but I had to link and test if the prototype connections are working properly.
 |
| Connection assets, buttons, and screens with appropriate transitions |
PetTrak App Walkthrough
Comments
Post a Comment