12/09/2018 - 14/12/2018
Week 1 - Week 16
Liam Yue Wei (0327686)
Usability and Mobile Application
Mr.Razif and Mr.Kannan
Designing Progress
As my mobile app idea from last semester did not work, I had to come up with a completely new idea for this semester.
Mobile App Idea: Dental Care
Objective: To promote dental care awareness.
Key Actions:
- Book appointments
- View the services
- View the pricing
- View the dentists' profile
- Buy dental care products online
Target Audience:
- People who have dental problem
- People who pay attention to their dental care
Real time board:
Process Flow Chart:
Apps and Software needed for this project:
Adobe XD, Adobe Dreamweaver, PhoneGap, Adobe Illustrator
Mood board (Colour scheme, Style)
Moodboard 1
Moodboard 2
 |
| Moodboard 3 (For selling dental products) |
Typography
While I was designing the app in Adobe XD, I chose two fonts for the app which is Poppins and Puritan. However, these two do not seem to work well with each other so while I was doing the coding for my app in Adobe Dreamweaver, I changed my choice of fonts to Playfair Display and Roboto.
During design phase :
 |
| Poppins - Google Font |
 |
| Puritan - Google Font |
Mobile app development phase:
 |
| Playfair Display - Google Font |
 |
| Roboto - Google Font |
Playfair Display font - a serif font which is suitable to be title or header.
Roboto - a sans serif font which is simple and nice, easy and soothing for users to read.
User Persona: The steps of using our app.
Adobe XD:
In my Adobe XD, these are the designs for the mobile app development. I made some changes to the app workflow, features and the way to display after receiving feedback from lecturers.
 |
| Overall pages |
 |
| Log in page, First page (Branch of Dental Clinics), and the information users can get from first page. |
 |
| Second page (Our Dentists), Popups (profile of the dentists), third page (Treatment provided). |
 |
| Issues and solutions for dental care. |
 |
| Further informations on the treatment provided, User profile. |
The page above was an idea to make the app look more fun using colors. These 2 pages were just samples on what features I want to use. The colors were just examples to show that I want to add some color scheme other than blue and white to them.
 |
| Edit Profile, Calendar and Book appointment. |
 |
| Booking appointment.. On the right side is another option I have for this feature. |
Mobile Development Progress
With jQuery mobile, I did the coding in Adobe Dreamweaver together with PhoneGap. I managed to create the app by using html, css and also javascript.
Work in progress:
I ended up making changes here and there while doing the coding, most of the time was because I realized that there are some features that I can put instead of the ones I was planning for. Also, instead of making pages to show information of the branch (outlet) of the dental clinics, dentists and the treatments provided. I decided to use popups, as there is no need for users to click into another page of the mobile app just to view some information.
Final Outcome:
* Not all pages are included, this is just for showcase.
 |
| Login Page |
 |
| Sign Up page |
I added sign up page after realizing that I forgot to include one during the design phase.
 |
| Popups on outlet of dental clinics |
I ended up creating popups instead of another page so that it can be more convenient for the users to use this app.
 |
| Our Dentists |
 |
| Our Dentists - profiles |
 |
| Treatments for Dental Issue |
This page above is the one that I am most satisfied with, as it is simple, and I managed to figure out the code in order to place the 3 buttons on where I want them to be. The trick is to use z-index in the html or css, this can make the elements to be in front or the back depending on the number. For instance, z-index : 1; will bring the object to be in the foreground.
 |
| Tooth section |
 |
| Jaw section |
The images below are popups that show the information on treatments provided. The information may include on what will be done during the treatment and why this or that need to be done. This can educate the users so that they know what they are asking for and what the dentists are doing to their teeth. The popups are scrollable when the contents are too long. Unlike the designs I had in Adobe XD, I made the popups into the color of the buttons the users click on. For example, the button 'Removal' is in purple color, so I give the popup the same color and the collapsible/ drop down stays white so that users know that they can click on them. Why white? Because white is simple and doesn't make the whole thing look messy or complicated.
 |
| Clicking on one of the issue |
 |
| Dropdowns to show more information |
 |
| Scrollable content |
 |
| Drop downs |
In the images below, again, is slightly different from what I designed in Adobe XD. This is because I realized that the previous design of mine does not really go well with the other pages of my app. In my app, buttons, images, almost everything has rounded corners. But in my previous design, this page was supposed to have lines instead of boxes, which may cause the whole mobile app to look inconsistent. Therefore, I made some changes here.
 |
| Edit Profile |
 |
| Edit Profile - part 2 (scroll down) |
 |
| No appointment at the moment. |
I wanted to insert calendar but the calendar did not work in my mobile app. So I decided to do this instead since users do not really need whole calendar to be in the app, they only need to book appointment and know the necessary information.
 |
| Book appointment |
 |
| Book appointment - part 2 |
 |
Choosing users' preferred clinic. |
 |
| Choosing users' preferred time. |
Walk-through Video
Feedback
Week 4
Mr Razif:
Dental app and Car service app are okay. Choose one. If choose dental clinic app, then just focus on one clinic for now.
Mr.Kannan:
Go for dental since there are so many car services apps. Have to layout USP via ideation, what is unique and why do they want to use the app. Finding profiles of the dentists is not sufficient to its uniqueness, maybe provide some informations to end user about dental care as well as its impact of negligence. That will lead to finding dental services with recommended dentist around the region. It's promoting and creating awareness to dental care.
Week 6
Mr. Kannan:
(Design is not polished/ completed yet) The whole thing looks unpolished, very boxy boxy feel, try to take what you have so far and add in some designs, can take other app designs for reference. Can just eliminate the feature of selling products online because why are your products so unique that the other users want to buy and what is your profit if you add that feature. As in the design for 'Treatments', it's too complex, instead of using scientific term, why don't you use a common thing that all users understand, then slowly go into details (scientific term) and also educate them. For example, what happened? Jaw pain? What is the symptom of having jaw pain? What is the effect and what is the treatment? Then can put the details like what clinic and which dentists you have to do this treatment, then can choose, and book. Instead of just putting 'Book Now' right away. For the treatment, also can try to do a mouth diagram, then allow the users to point the parts (like missing tooth/ jaw...and so on), then from there, lead to the common problems/ symptoms and also the treatments and booking.
Mr.Razif:
For home page, if don't know what to put, then put the one that is most important. When your teeth hurts, and you open the app, what is the first thing you want to see or know. Maybe availability of the clinic/ dentists, remember the Information Architecture. Then the treatments/ symptoms and so on can be additional.
Week 9
Mr Kannan:
Change the font. Make the boxes smaller. For the dentists, can put it like click on the dentist, then have a pop out to show more details about the dentist, mainly want to know about the experience...professional information as it is about medical, this is to let the users feel safe. For the appointment part, put a calendar there. When it comes to making the appointment, can let the users choose what issues they face instead of the treatment or service. Can let people try out the app, so that we know how to arrange the workflow also, find some science or doctor students, and some people who have nothing to do with the field.
Reflection
Experience
It was tough for me to come up with a new app again when this semester starts, however it might be better for me to do an app that has meaning rather than my previous idea which was somehow not being useful to users. Also, I regret the fact that I didn't preview my app on my phone frequently while doing the coding. This led to me reviewing the codes over and over again to overwrite the codes which I have done long time ago. This made me nervous and at the same time, consumed a lot of time. Other than that, I had fun exploring and figuring out the coding in Adobe Dreamweaver, although it gave me a lot of pain when there are bugs happening in the mobile app.
Observation
I noticed that there are many ways and art styles to design a mobile app, but the designs also need to be suitable for the type of mobile app ( Fashion, Online Shopping, Restaurant, etc). Although there may be a lot of features and designs that we want to achieve in creating the mobile app, there is still limit to how we can do it through coding, as us, design students have not many experience in coding and it can be frustrating when the feature does not work in the app.
Findings
I think we should probably learn and practice coding, or do some research on the coding while we design our app. This is so that we can understand and explore what we can achieve using coding, and this probably can assist us in completing our assignment way faster.
Comments
Post a Comment