Usability & Mobile Application II

Nouval Kemalsyah Adhigumilang
(0331328)
Usability & Mobile Application II

Week 1

On our first week we were tasked to revamp a website information based on their importance and so we listed down everything before creating the wireframe.


Original Information Hierarchy
1. Header
       1. Taylor's design school
       2. Programmes
       3. Contact
2. About
3. Programmes
4. New Programmes
5. Watch our show reel
6. Happenings
      1. Image, button
       2. View more
7. Portfolios
       1. Bachelor of design in creative media
       2. Interior architecture
       3. Foundation in design
       4. Interactive multimedia design
       5. Graphic communication design
8. Social media
       1. Facebook share
       2. Twitter tweet

Revised Information Hierarchy

1. Header
     1. Taylor's design school logo
     2. Programmes
     3. Contact
2. Show-reel (CTA)
3. Happenings

     1. Image, button
     2. View more
4. About
5. Portfolios (CTA)
    1. Bachelor of design in creative media

    2. Interior architecture
    3. Foundation in design
    4. Interactive multimedia design
    5. Graphic communication design
    6. Social media

         1. Facebook share
         2. Twitter tweet
Target Audience
- Students looking to enroll into the design school at Taylor's (Primary)
- Parent's looking to find out more about the school. (Secondary)

User's goals
- Viewing student's work and past projects. (Primary)
- Finding out updates and news (Secondary)

After we listed down we did the wireframe

---

Week 2

On week 2 we were more exposed to the business part of developing an app, and like most businesses A clear business plan is essential as it keeps track on what should be focused. To create this business plan the lecturer gave us an option to create it using RealtimeBoard. From there we choose a template under Business and Analysis & Strategy category and choose the business model canvas. 

On this board they've broken it down to 10 boxes each has their own purposes

1. Project name is obviously the name of the project that you are planning to make a business plan on
2. Key Partners are the foundation of the app shall it be the audience/customers itself or 3rd party company, without its key partners the app cannot stand as business. Or as realtime describe it partners that give you a competitive advantage. On my part from the beginning this app was intended for people who may difficult time figuring out how to take care of a pet.
3. Key Activities are the functions of the business, the main service that you give to your customers
4. Key Resources Is the people who help to keep create and maintain your business so that it could be reliable source of income or to put it shortly people who work for your business.
5. Key Propositions is what makes the business stands out from the rest or in short the selling point. 
6. Customer Relationship Is the interaction between your customers. Something like providing a premium membership, email subscriptions, promos etc.
7. Channel Is the medium on where you will publish your businesses in this current business plan your app will be available on each os application store
8. Customer Segments or taget audience are the main people you want to reach out, on my part people who own a cat is on a large spectrum of the age group i excluded children because it would most likely that who bought and give supervision to the pet would be their parents or an older relatives, though people who are more familiar with the current tech are the newer generation so i included teenagers to people in their midlife.
9. Cost Structure as the name suggest are the factors that you are willing to spend to keep your app as business plan
10. Revenue Streams Is the factors that are involve so that you can generate income from your business. In my app i choose only two, from this article https://thinkmobiles.com/blog/how-do-free-apps-make-money/ i found out most customer are less likely to be irritated from banner advertisements and also i also choose to collect and selling data by creating an account based app.

Reflection
After consulting to the lecturer i decided to change a few things in my current app such as

• Make it account based so it provide a more personal service
• Change the way of the input needed so that it will be more easier to understand
• Add in minor animations to make it more eye catching
• Revamp a few design choices in the past

---

Weekly progression

Week 1

In the last semester the app that i made was short, and so i decided to revamp the design and make it account based and added a pet profile as a new feature.

Week 2

The lecturer told me from my previous app that the mechanics on this app was quite confusing for normal people or people who are not educated enough in the field of nutrition. As seen above the previous app looks like this.

And so i decided to adapt a system from the research i found. It was a quiz to base your cat/dog to have an ideal weight. Though it requires you first to insert your pets weight that's where the pet profile now comes to play. The last art board determine how much percent & calories do they need to regain the ideal weight.  Below is how the quiz looks like.

Week 3-4

The lecturer told me i should try to calculate how many portions in the calories. It took me 2 weeks to get my research right and know how to properly calculate it.
To be brief these are the data used

1 gr of fat = 9 Kcal
1 gr of protein = 4 Kcal
And the normal needs for cats is usually
50-55% Protein
30-40% Fat
1 gram of carbs equal to 4 Kcal for humans, but cats cannot digest carbs so i exclude it.

And so after i got the data i looked up on Whiskas website and look at one of their products and look one of their nutritional facts and also how much  pack of grams in that single package. i took the protein and fat nutrition of that single packaging and did some calculations with the data ive found. Below i did some calculations, though possibly there might be a few mistakes but this is just to determine the data needed for the next artboard.

the info given is pretty brief so based on the Calories needed in a day i just give them how much grams of wet cat food do they need to feed in a day and also give them a little extra on how much protein and fat that should contain.

Week 5

After i feedback one of the lecturers told me my design for my previous version of the app was more fun. And second he also said that at the moment my app is just like a one time app so he said to give in more features such as something like a social media that helps you share your cats profile and give ratings to cat foods.

Week 6

One of the lecture told me that it seems at the moment this app is only a one time app, so to maintain relationship with the user he gave an advice to put a social feature such as cat food reviews.

Week 7

The lecturer gave advice on a few minors adjustments on the designs, things such as color adjustment within the interface and also splashcreen and the avatar.

Also another lecturer told me that transition to the question was a bit confusing and told me to add somekind of title or explain what does this question do.

Week 8-10

The lecturer told me that the button should give a description so we need to figure out how to both preview description and how can we choose an answer with few motions as possible. So we decided to make if you press the button you may see the description and you can choose by pressing the circle beside the button and click next.

Week 11

I started doing all the html so every input and buttons will work,  and because i havent created the css yet so most of the pages most looks like the picture below , also i had to skip a page because one specific page needed a number animation. So in this week i had to focus on the vanilla pages and making sure it works as intended.

Week 13-15

in this week i focused on the css also added a custom jquery script for animating the numbers which the lecturer recomended me which can be found here https://www.jqueryscript.net/animation/Minimal-Animated-Counter-jQuery.html