(final project) U S A B I L I T Y & M O B I L E A P P L I C A T I O N I
Sept 10 '18 - Oct 19 '18 (W3-W8)
Jaslyn Tjhai (0333039)
Usability and Mobile Application I
Project - Mobile Application
W E E K 3
September 10 2018
Mr. Shamsul wanted us to start proposing a few ideas for mobile application that we wanted to create. I did some research online on mobile applications as well as read some articles. I read about user reviews for Zomato, Yelp, and TripAdvisor, because those are the travel apps that included recommendations of restaurants that a lot of people use. I also searched for some references and inspirations for the concept of mobile application and here are a few that I found on Behance.
I also searched for some references for food mobile application where most of which I found for food application is mostly deliveries.
 |
| Fig. 1.a. Travel app reference from Behance |
 |
| Fig. 1.b. Food application reference from Behance |
September 14 2018
On Mr. Razif's class, we were supposed to do an exercise on AirAsia place ticket but since we didn't have class with Mr. Shamsul on Monday so Mr. Razif gave us a consultation instead. We were asked to go to realtimeboard.com, create a Business Model Canvas board and start to fill in our idea for the app there. Mr. Razif explained that BSM is usually used for business planning so it'll make it easier for us to plan our desired mobile application.
 |
| Fig. 1.c. Business Model Canvas |
We were asked to slowly fill all the sections when planning our mobile application. From key features to target market to key activities, etc. Below is what I did during class where I presented to Mr. Razif about my idea of an app that recommends restaurants and cafes around Malaysia. But Mr. Razif told me that the idea is too broad, he wanted me to narrow down. Example, there's an application that recommends halal food so he wanted me to do the opposite. Maybe an application that recommends restaurants that sells the best pork dishes, etc. He also suggested that maybe I could create an app that recommends Malaysian food (Indian, Chinese, Malay) where the target market can be tourists and even locals.
 |
| Fig. 1.d. First idea in class |
I then also mentioned to him that I wanted a feature to be in my app, which is to randomize restaurants and cafes for people who just can't seem to decide on where to eat. He said that's a good idea, that I can either use that as a feature inside my app or make an app for that.
After consulting with Mr. Razif, I decided to focus on the app that makes decision on where to eat instead since I'm also the type of person who can't decide on where to eat, so that app will definitely help. While I was deciding on the name of the app, some are actually an actual app such as Jom Makan. So then I decided to name my app Shake Eat.
 |
| Fig. 1.e. Jom Makan app |
Below is my business model so far.
 |
| Fig. 1.f. Shake Eat business model |
I decided to look more into references on Behance and start thinking about the color schemes and how I wanted to design my application.
- Paycrave: Food truck
- Online Food: Food delivery
- Whatta Food: Food recipes
- Savour: Mobile app for food encyclopedia and discovery
W E E K 4
September 19 2018
On the fourth week, we finally had classes with Mr. Shamsul. He commented on each of our ideas for app and he told me that my idea for Shake Eat app has been proposed since last two semesters ago and that the second or the third app idea might be better. Mr. Shamsul then asked each of us to look for 2-3 reference apps and dissect the app, putting them inside a Google Sheet to make it easier to compare. We were also asked to decide on a final idea that we wanted to focus on.
By the end of the week, I decided that I still want to focus on my decision making app on where to eat, Shake Eat.
W E E K 5
W E E K 6
By the end of the week, I decided that I still want to focus on my decision making app on where to eat, Shake Eat.
W E E K 5
September 26 2018
Mr. Shamsul wanted us to start working on the process flow chart for our mobile application as we entered this topic this week. We were given an exercise to understand more about process flow chart in order for us to start thinking about one for our apps. Mr. Shamsul told me that he was quite worried about my app since I will use a shaking feature, so I was asked to simplify where instead of shaking just press a button. Since the idea of my app is called Shake Eat, I might need to also change the name of the app in case I only wanted the shaking feature to be a side feature.
We were also informed that our presentation for mobile application will be on week 10. By then we should already have our data and information gathered from surveys, interviews, etc. We were also asked to come up with 3 user persona as well as 2 prototypes (high and low fidelity) and also usability testing.
W E E K 6
October 3 2018
I consulted Mr. Shamsul regarding my mobile application where I need to change the name of my app. Other than that I can proceed with my idea. I'm planning to do online surveys so I showed the list of questions that I have for my online survey. I was given a lot of suggestions and fixed a few of my questions. Mr. Shamsul wanted me to divide my questions into sections to make it easier to classify and understand all the answers while it'll also be easier for users to know which section and regarding what topic is the section about. I created my google form and send it to Mr. Shamsul for a final check before sharing to all my friends. I'm planning to collect all the data and stop accepting responses from the surveys by the end of this week.
View the list of my survey questions here.
View the list of my survey questions here.
October 4 2018
For Mr. Razif's class, we were briefed on user persona to refresh our minds and we were required to come up with 3 user personas. The first one will be our primary user, second will be the secondary user, and the third one will be the other user. I decided to use the data that I've collected so far to create my user personas. There will be updates on my user persona until the end of this week as I will still be accepting responses from my form.
W E E K 7
W E E K 7
October 11 2018
Since I already sent out my survey, by the end of the week I received around 65 responses. I created a Google Sheet from the responses to make it easier for me to view the result. From the responses, I can definitely see some improvements that could be done on the list of questions itself, perhaps for my future projects. The Google Sheet to my responses can be found here.
I also tried to complete my user persona this week based on the results from the survey that I sent out. I created a primary user persona (ideal user), followed by secondary user, and finally other (which are mainly those who may or may not use my app). Here are the user personas that I created which I submitted and am waiting for feedback from Mr. Shamsul.
We were also asked to create a flow chart last week which I completed this week to show to Mr. Shamsul and as expected there were a lot of things to be improved and also a lot of questions asked by Mr. Shamsul regarding my application.
- I was first asked to try and not make my flow chart look so complex as it is difficult to understand
- Sign in/up method can just be improvised to Sign up/in using Google or Facebook to make it easier for users
- Provide information of the restaurant, price, and location filters
- Where do I find the list of restaurants from?
- How many restaurant list will come up after randomizing?
From those questions and suggestions given by Mr. Shamsul, I decided to revise my flow chart before showing it to him again and also Mr. Razif. My revised flowchart was approved by Mr. Shamsul but I'm still waiting for feedback from Mr. Razif.
 |
| Fig. 2.a. Draft Flowchart |
 |
| Fig. 2.b. Revised Flowchart |
October 12 2018
We were supposed to do wireframes during class today but I wasn't able to attend class. So I consulted Mr. Razif personally to find out what I'm supposed to change for my flowchart and other things. The first thing was to put my focus on the app solely on the randomizing feature, where after a maximum of randomizing two times, if user still wanted to randomize, then they have the option to randomize from their list or filter according to a few options. I was also suggested to change the food category to types of cuisine where I can take back my first idea which is to recommend Malaysian food into this app. So instead of just Makan Mana? the app will be called Makan Mana? LITE where the type of cuisine options will only be Malay, Chinese, Indian, and Western food. If users wanted to filter Japanese or Korean food then they will have to pay for the app. The idea was interesting and logical so I decided to take that suggestion. Other than that I can start working on wireframes for my application. Another additional thing is that, if I were to put input in the app, the shape from the flowchart must use a slanted rectangle.
W E E K 8
W E E K 8
October 17 2018
On the eighth week, we were supposed to finish with our wireframes for us to conduct user testing and improvise on what needs to be changed based on the user testing. I tried to finish my wireframes on XD, here's how it looked like so far.
 |
| Fig. 3.a. Wireframes on Adobe XD |
There will definitely be a lot of things to improvise on which we will be able to find out by conducting user testing in class tomorrow, where Mr. Shamsul wanted us to do it with our juniors who's learning about UX/UI.
October 18 2018
We went to juniors' class today to conduct user testing. I tested out with one of the junior where she gave me a few feedback on my prototype. Overall she said my prototype was clear, the only problem is that there's one part of my app which is list, it's where users can create their own list of restaurants and randomize from there, which is quite confusing if it's the first time user use the app. Therefore to make it more understandable, I decided to add a few example list such as favorites list and history to give users an idea on what that is when they first click into it.
So here's what I added after the feedback.
I then started to design my mobile app to create the high fidelity prototype. I decided to go for minimalist design because that's what's appealing to people nowadays and for my app to look clean and aesthetic without having too much decorations. For the color scheme, I wanted to go for blue color simply because I love blue but then I decided to try and do some research on color of foods that attracts people. Based on my research, I found a few information:
W E E K 9
 |
| Fig. 3.b. Proof for user testing |
 |
| Fig. 3.c. List on the prototype |
- black, grey, brown are colors that will appear unappealing on food, causing people to lose their appetite.
- blue is also one of the appetite suppressing colors
- red is the most appetizing color, together with yellow
- orange is the combination of red and yellow which brings excitement
- green is the color that expresses healthiness
From the research, I then tried to look for suitable color palettes for my mobile app on Paletton. Here's the color palette that I decided to go for where I decided to use yellow that has a slight orange color to it.
 |
| Fig. 3.d. Color Palette |
As for the logo of my mobile app, I wanted to use mouth illustration but I ended up going with plate with spoon and fork. Here's a few sketches I did before illustrating it.
 |
| Fig. 3.e. Sketches for app logo |
The font that I decided to use for the logo is Cartoon Marker by Dadiomouse@gmail.com where I got it from DaFont.com. I was thinking of illustrating the letters but decided to just use fonts downloaded from the internet to save time.
 |
| Fig. 3.f. Cartoon Marker font |
 |
| Fig. 3.g. Logo for the app |
After deciding on logo, color scheme, and font, I decided to start doing the prototype on Adobe XD.
 |
| Fig. 3.h. Overall look on the prototype |
 |
| Fig. 3.i. A part of the prototype |
 |
| Fig. 3.j. Prototype |
W E E K 9
October 24 2018
For this week, I showed Mr. Shamsul my prototype and received a lot of input on what I can do to improve it. The first thing was the main page of my prototype where Mr. Shamsul said that there was not a very clear call to action on what the users should do in which I defended by saying that I plan to do the indicator by making an animation from the logo. Mr. Shamsul agreed to it but asked me to further explain it during the presentation. Then the second thing about my main page is the subfeatures such as the account, and list. Since it's not really necessary, I was asked to put it maybe inside a hamburger menu, which was actually a good point. Another thing that I can add in my main page is probably lists of restaurants to suggest or recommend to users, or maybe their history if it's not their first time using the app. So after getting all those feedback from Mr. Shamsul, I started improvising on my prototype. Mr. Shamsul also asked me to try and do more research on apps to see how they design their user interface.
As for my color schemes, I was asked to try and use orange instead.
 |
| Fig. 4.a. Landing page before feedback |
 |
| Fig. 4.b. Landing page after feedback |
October 25 2018
On the following day, I showed Mr. Razif my prototype to get his inputs and suggestions where he told me that for the landing page itself, it is also better for the main button to be the icon because that's the first thing the user see and will be hoping for it to be clickable. So perhaps I would change back the button to the main logo itself. Another main feedback from Mr. Razif was regarding the page for restaurant details where I was told that the layout of the restaurant details seems really off, and for the page itself there's not much separation that can be seen from there so I was asked to try and improvise on that. I was also asked to try and adjust the hierarchy of my text as some of them have the same font size which doesn't really show the order of the text.
 |
| Fig. 4.c. Restaurant details before feedback |
Another thing was the details where I was asked to use some icons and also for the operating hours of the restaurant, I was asked to do something like if it's open there's the open sign, then beside it would be the time it opens till it closes. As for the pictures of the restaurants, I was asked to make it all squares with rounded corners instead to maintain the consistency in the design.
 |
| Fig. 4.d. Restaurant details after feedback (not finalized yet) |
So basically for next week we have to present our findings and afterwards we can start developing the app on HTML.
W E E K 10
November 1 2018
I can't make it to the first class this week because of certain plans but this week was the week we should be presenting. Before the presentation, I manage to show Mr. Razif and Mr. Shamsul my final prototype that I was gonna present to get further feedback but both of them said it was good. During the presentation itself, the only thing that I should amend is to put the Let's Go and Find Again button on the Restaurant Details page so that user don't need to go back in order to set off for their journey to food. After our presentation, we were asked to adjust based on feedback and do another user testing but this time it should be a proper user testing.
LINKS
Presentation Slide
Prototype (Before Presentation)
Published Prototype - for user testing
LINKS
Presentation Slide
Prototype (Before Presentation)
Published Prototype - for user testing
Final Prototype
Turns out after the presentation, since there were still a lot who didn't manage to get their wireframes properly done, Mr. Shamsul and Mr. Razif decided for us to not develop the app this semester so we were asked to further refine our wireframes and do a proper user testing with a proper video and report.
ADDITIONAL
During week 11, I showed Mr. Shamsul again for my prototype and the adjustments I made based on his feedback and form myself as well, Mr. Shamsul then suggested a few more things for me to adjust and add for my prototype. Afterwards I've started doing my user testing on a few of my friends.
REFLECTION
Honestly speaking I was kind of worried about this module at first because I don't have any idea on what kind of app I wanted to design and come up with but as I go on with my first ideas and also countless consultations with both Mr. Razif and Mr. Shamsul, I finally manage to have a clear idea on what kind of app I wanted to develop which makes things so much easier because I've already understood clearly what I wanted to do. The next steps was just to come up with designs, wireframe, prototype, user testing as well as other process that we have to go through to develop the app itself. I really enjoyed this module as I'm very interested in coding and I like doing it despite the fact that sometimes it's tough because I don't really understand the coding language and there's endless things that could be learned and done. But all in all I'm really looking forward to learn more about UI/UX.
Comments
Post a Comment