Wireframes for app and XD prototype

Here are my final wireframes for the app, these are just the simple version of the apps layout.

Here is the final XD pages for the app, it's very similar to the wireframes, except bulked out. 

I wanted to show how one of the animals would be laid out and played. However, I was not able to complete each animal as it was too much work to do in the time we had for the brief. 

Icons for the app

As I was planning out the app I realised to make it look good I have to make lots of icons.

Here is an image of all the icons that I created, I ended up using most of them in the final app. However I changed the final sitemap lots of times before settling on the final one, so I have some that I never used. 

To make them I first drew out the basic idea on a piece of paper and wrote what I was going to make, so that I had a clear idea to go off of. Then I drew the idea out in photoshop, either using just my graphics tablet, or shapes. After I was happy with what I drew I imported them into illustrator, image traced them and made them into PNG's, I did this as I find that drawing within photoshop can be quite messy looking, and illustrator smooths them out and makes them look more like professional icons. 

Sitemap for app

Here are my sitemaps for the app, I wanted them to be quite simplistic and easy to navigate as it is both for children and adults. 

Colour scheme for app

I wanted the colour scheme to be cute and colourful. That’s why I chose pastel colours for the overall theme, then I went deeper by doing a blue scheme and a pink scheme that I liked for different sections of the app. 

I then created a colour scheme for each of the animals that I would be making a version of the app for, such as cow, pig, sheep, and salmon. 

Typography for app

Typography for app (Calibri Body)

Typography for app (Arial Round)

Typography for app (Britannic)

Typography for app (Helvetica)

Typography for app (Lucida Sans)

I decided to choose fonts that exist within word so they would be easy for me to use, and they all have multiple different styles, like italics, light, etc. 

This font will be used for any writing needed on the app, such as settings, terms and conditions, etc. I want a second font that is more whimsical that will be used for the animals when they talk to the player, each of these will be different per animal. 

My favourite is Lucida Sans, this is due to it being slightly rounded, which I wanted as it makes it seem more friendly. 

Whimsical one:

https://www.dafont.com/splatch.font

 

https://www.dafont.com/bubblegum.font

https://www.dafont.com/so-sweet-honey.font

https://www.dafont.com/chickybom.font

https://www.dafont.com/cherry-cupcake.font

Notes 05/11/2019

Agile development cycle. 

Make sure to test throughout the development stages, as to make sure that you don’t finish the project and miss anything out.

Choose three types of testing and plan and implement each one within my creative process. 

Monitored/non-monitored, Screen recordings, Surveys. 

Some mentioned: 

1.     Usability hub

2.     Hotjar

3.     Userzoom

4.     UX booth

Timeline- This is weekly, so each date is for the Monday of the week.

23/09/2019	-Come up with initial ideas for the app.  -Start blog.  -Write up notes of brief.
30/09/2019	-Pick three main ideas for the app. -Begin initial drawings. -Start research process. -Create style sheet idea.
07/10/2019	-Choose final idea. -Come up with initial sitemap. -Draw up initial wireframes. -Start to finalise the stylesheet.
14/10/2019	-Do research into topic and similar apps. -Create final sitemap. -Draw up final wireframes. -Create Marvel version of app. -Have a think-aloud test of the Marvel app.
21/10/2019	-Draw main character -Draw up animals for animations
28/10/2019	-Put animation together -Create final sitemap. -Plan out the stylings of the app.
04/11/2019	-Draw the final icons. -Write up the blog.
11/11/2019	-Complete stylesheet. -Work on blog.
18/11/2019	-Create mock-ups of the future of the project. -Work on blog.
25/11/2019	-Work on blog. -Begin to put the app together. -Have a feedback session of someone using the app.
02/12/2019	-Take week off, to work on Waterloo, and Creative collaborations.
09/12/2019	-Work on blog. -Finalise icons and drawings for app. -Create the presentation.
16/12/2019	-Have app put together and fully running. -One final think-aloud test or final app. -Change anything from final test.
23/12/2019	-Week off for Christmas!!
30/12/2019	-Work on any final bits that have not been finished. -Ensure the app is working correctly. Finalise the presentation.
06/01/2020	-Hand in.