Working with the app

presentation

I have made an app for the wellington spca. It is based for a local app where local surround and maybe far people can go onto it. Its based for anyone who wants to adopt an animal and find out more info about how to and what is needed. All of these will link up together. and the other section is about Donation. where people can still go on and link in with a sign up form which you can donate with few details and than the other section to the Donation is the scan QR Code where if people are in a rush and or dont have cash money for the street collectors, they can grab a scan code so they can do it with there back account. Few steps to make it easy to do it right away. With the scan code, it would take money out of your cell phone bill so you dont need to connect any details of bank accounts in it.

There are four parts of animals i had put them into when u go into the adoption page.
Cat, God, Birds and Rabbits.
But ontop of all these are a button where its a mini questioner to find out if your ready for an animal yet.

for each animal parts, there is a list where the latest animal list are on there for people to see and than you can go onto it and see the animals profile. The basic information about them and the stories they might have behind them. and there love and hates.
The idea of having and owning an animal seems easy and nothing much to it, but thats wrong. Many people doesn't know that there are some requirements to have adopt an animal. So on top of each section of the animal section, there is a button where it links to a page with informations that is shorten to make it easy to read and understand what is needed.

As for the information page, its based to a one page item. On it, there is
- location information
- Time and dates
- and a connection idea of the google map.
 ( wanted to have the google map zoom in and out ect working but it didn't work, so I replaced it with an map image instead to show the idea section ).

Problem strick!!!!

im panicking now with this problem.

The back button is appearing though out some of the pages and bigger than the size its meant to be showing. 

 The section Question page isn't working and not going in when going and wanting to go to that page, but when going into the adoption page, you see that page underneath it where its seen at the bottom only.

the back button showing again.

 cat section transition isn't going smoothly but a jolt with the question page again appearing.

Few night before its due, this happened. Been trying to fix it and looking though my codes and working out if Ive got extra divs or non-realvent things there but cannot find anything. starting again, adding things to it and taking things out of it. Each time it made it worse and functions changes and had to alter to make it work afterwards. 

What to do and know before adopting

For each animal pet page. there will be a top section where its a button where you go into before you go onto and look at the animals.

Its just a page where the user can go into it and read and understand what is needed for adoption.

Profile pages work

I did not make all the profile page work and link to their page. I have indicated here to show you on what pages will work if you wanted to go into their profile pages.

 

Rational

Size for my app mobil base

My app page is based for the Samsung Galaxy S4.
Size is 360x640

Information Page

Donation page

The main Donation Page.

With this page, i have made two main buttons to go to.

- Form

- QR Code

With Form - Its a mini form place where you can just donate with simple info from the user.

With QR Code - where u can go on and scan to this place where collectors on street have a code where people can do it on a run or when they dont have money on them.

Form layout

Making it as simple as I can and fast and easy. Trying to make it not like massive long forms where users will exit right away with so much to do or not in the mood to do a long answer question thing for just a donation.

Simple where the small basic information you just need will just work and e-mail is to send an e-mail back to the donationer for thank you

QR CODE

With the QR code - you can just do two simple step. 

- choose the amount you want

- than scan in the sticker you got from the collector - connect

and your done.

At the moment, the code shown there will be the scanner on the phone scanning the code.

FOR THE WEB AND COMPUTER USE.

 when on the computer, click on to the qr code and thats when the idea of the code been scanned. than it will connect to the next page, Thank you for your donation.

at the moment with some trouble, the thank you page isn't working with the imagery that i had done with the animals there.

Question page

When you go into the adoption page, the main and top have a button section where it says '6 Questions. Are you ready to adopt'.

This thinking and idea is based for first time user and animal carer that wants to adopt and not knowing to much information about having an animal since its not as simple and easy to what people have in mind. There are so much rules and or informations about adopting an animal when you want one, So instead of having many pages of writing, I had compact it down to 6 questions with some descriptions about it so the user will know about it.

For each questions, i want to make a small interactions with the user to answer the simple Yes or No question.

I have used the slide bars after many errors and test try what would be suitable for this page.

I have used the colour black and blue. When going to this page, The slider answer is all based on NO. which makes it all dark and wrong, so I was hoping that the user going though the question will slide it and make it a YES where this will go blue and bright. I have used this slide since it is knowledge to most of use that it is a slide.

 

IDEA ON THIS BUT DIDNT DO, Intention idea working

I wanted this page to have an pop up or a surprise page where if the user have all 6 YES for the questions, it will have a link to saying, Congratulation on have 6 yes, you are ready for adoptioning a pet ect.
If the user have 5 yes, it will record it and link to you got 5 out of 6. you are basically there ect just need to get this a yes and your all good to go ect…. something that links to the question that they didn't answer to. This will be similar for the rest of the number from 3 2 1.

Home page

My original and starting working on the Home page, had the SPCA Logo the similar size as the adopt and donate button size. Looking out of place and should be different I had changed and managed to have the logo at the top right across and like a banner.

Idea of simple and easy navigation right away with two paths that this app are to be used.

The colour blue text are used because of the link and idea to the main colours that the organization used.

Layout and working with troubles

This is what I had started with with my main idea and plan that I had done for my section part for that type of animal. I wanted the main image of the pet and than maybe having there name at the bottom to allow the viewer to tell if they are female or male right away.

This page idea is that some examples dogs are recently placed at the care of SPCA so that they will get the latest update what is available.

I had made my sections to buttons so that it would be in a row of three. The buttons work fine but when it comes to the images picture time to be placed in, it doesn't work. Rearranging and playing with the heights and width doesn't help, searching and trying to figure out what I could do with it, than noticed that a button would work like that. So had to find and change my way of working.
I changed and got this other way of working working to what i had in mind and still in plan to the three column sector.

 

I have made the chose of not having the name of the animal on there so that it would make the user go into there profile and see the whole thing for themselves just incase they are after certain names for as a pet. In this dog section, the dog title top section header have an small imagery of a paw. 

I want to have each page having that type of animal paw or feet print to make it there page only. Just to make it clear and easy to see when your in there section.

Dog with Dog paw, Cat with cat paw ect. 

As seen at the imagery starting for the dogs, I had made a mini change that doesn't happen on the other animal page is the first main image to the section. Thinking that it would be something special for these two dogs together and main attention if people might look out for dogs of two. at the top as than at the middle or the bottom. 

Buttons from the image to their profile page.

So since I had made the image as a button, it would take you to the profile page.

 

Making a profile that is simple and easy and to the point.

Not styling is a chose that I had made at the end. 

The main informations on the profile page is based on three section.

- The details of the animal.

   * Breed

   *Colour type

   *Sex

   *Age

   *Type in body size

   *Personality.

- The story about the animal. The history on there will touch the reader and viewer so they know and maybe connect with them before seeing them.

- About the animal. what they like or dont like. some personality and emotions it has.

Interested 

The idea of each page that the viewer like or are interested, each animal page at the bottom will have a button 'Place Interest'

When you click onto it, a pop up will appear and tell you that if your message is sent.

The idea behind this is that when the viewer are into it, they dont need to do anything until the message is sent and that have there basic details that they had when they signed up to be contacted to.

 

Sadly it worked only on few of the animal pages and not some. I will need to find the reason why and what is wrong with it.

Colour for the tab text

Just noticed that having different colour text with different colour background will be read differently.

For my main tabs at the bottom to go to each section, the background colour is a yellow/golden tone. With the text, white or black is what is making me think since i am making some main text white and some black. The white text with this hello background isn't readable as much as the black one. Thinking that the icons are close to dark black colour, text will be nice to be white but its unreadable so black will be better and much bolder to read as main text.

With the tabs for the top sections to go to read things. I have used different colour coding to tell the different sections. 

Tabs for main sections are yellow, and Tabs for the info ration are based with the colour blue.

The Colour white for the text for the blue is more effective than black. But will have to change and see what font will suit this layout for this app. Needs to be easy to read and everyone will able to have that font.