Usability and Mobile Application II

Tan Shin Yih (0334900)
Usability and Mobile Application II

For the first class of mobile app 2, Mr. Kannan and Mr. Razif explain the module outline of the subject to us. They also show us the mobile app prototype done by our senior. They told us that for this class we will use HTML, CSS, and Javascript to produce our own mobile app that we propose on mobile app 1. We can either choose to change the design of the app, redesign some elements or change the idea for the app. Then, Mr. Kannan consults with us one by one about our previous idea and layout design of our prototype. Mr. Razif asks us to start our usability test with our classmates. Besides, they also remind us that we need to submit our new app proposal by week 3 before the class end.

This is what we need to include in our proposal:
-  The title of the mobile app and rationalize on why you have chosen that particular title
-  The description of what the mobile app is about
-  Problem statement
-  Proposed solution
-  The design concept of the mobile app (color theme, typography, logo, navigation)
-  SWOT analysis
-  Sketches and Wireframe
-  Layout design and content placement of each page of the sections
-  Design references that will clearly explain/indicate what it is referencing. (do not just put screenshots and pictures without any descriptions in relation to your proposed design style and layout) 

Previous XD prototype file link
(need to insert link)

For my next plan of action, I would like to change the overall structure of my application and redesign it but remain the same function. Some button icon of the previous app will also redesign it. Besides, I will also change the color scheme of my app to become more yellowish. 


-----

For the second class, we will need to do the usability test to make sure our target audience understand how the navigation and the other function that our application has. We need to observe the user whether can complete the tasks and also collect more user comment to help us improve the design and the layout.

Analysis of User Testing (Real-time board)
(need to insert real-time board)

Usability Test

Feedback:
1. Food preferences: instead of simply arrange food, follow the list that people don't like
2. Recipe: - ingredients word too small, nutrition section can be smaller
                 - put some word or title on the picture of the recipe
                 - rate & comment section can place after all step tutorial
3. Search: - the icon for the hardness of the recipe change, make the user confuse
                 - food preparation is more important than like and comment, make the size bigger
                 - add "today recommend"
                 - can include only name and preparation time only
4. Categories: - can add some interesting article or video in the "How To" section
5. Overall: - the app is quite complete
                  - the font inside the app needs to be bigger, try using 2 different font
                  - can try to combine search and categories section and put it at middle
                  - doesn't really like social media section

Feedback:
1. Recipe: - can put the arrow at the picture section
                 - the ingredient is too long, maybe can separate into main and seasoning
2. Notification: - can add picture and icon so people can know easily and doesn't need to read
3. Search: - filter need to put on a more obvious place
                 - can add a section of most popular of this week, month
4. Profile: - 3x3 photo like Instagram would be more convenient because of most of the user use to it
                 - layout for the setting needs to change
5. Categories: - add more color on it
                       - categories need to categories by cuisine, time and diet
6. Overall: - the app is quite complete and easy to use
                  - make the font bigger, align to left would be better
                  - all title need to bigger and stronger, easy to look
                  - combine search and categories section and put it at middle
                  - can add the time for all of the post, so people know the app update daily
                  - design for the arrow and close button can be nicer


We have no classes on week 2&3 as our lecture want us to focus more on the collaboration class with RMIT student first. But we will still need to do some research on the references and update our mood board for the new layout of our mobile application. No class for week4 too as our lecture giving us a short break after the two weeks collaboration.

-----

For today class, Mr. Razif has a recall with us on the phone gap app and also teach us how to link both apps with the Dreamweaver.

Besides, Mr. Razif also teaches us on how to use the insert function so that we can save more time and do the coding faster without memorizing all the coding. He told us that in the mobile app coding, we can combine a few screens together, so if we have a huge number of screen design we can separate it based on the section. Before the class end, Mr. Razif gives us the practice to link 2 screens in 1 HTML file by using the button that creates by the insert function.


Week 4 - Week 14

The rest of the week, I continue to improve all the layout design improvement. Based on the feedback I got from the usability test, I would remove the social media function in my app as it might confuse people by misunderstanding the original plan for this app is a recipe app.

I would also keep the categories in my app because I personally think that the function of the categories and also the function of the search are different. User can use the search function when they have no time to search slowly in the categories or they can straight search what recipe they want to cook if they already know what they wanted to eat.

But the categories function is for the people who have time to check with the recipe or search everything in the same categories. Like example, a user wanted to learn how to cook western food, but the food that she knows is only chicken chop and spaghetti. By using the categories, she can explore more other types of western food.

One more big changes are I move the favorite section inside the profile. User can straight check their own recipe or favorite recipe in their own profile.

I change my app name from cook it yourself into memo chef. So I also didn't some changes to the logo design. Besides, the color palette that I use for this app also changes from gradient color into a solid color, which is pink, black and light grey.

                                      
This is my final logo for my application. All layout of the app would be changed also as the photo shows below.