Final Wireframe

This shows the wireframe of the final design I made of Hannah and I's design. 

Overall this is how we wanted the app to look, however quite a lot of it looks different in the actual app because of the way that the design was entered into unity. 

Font

I found it really interesting learning more about font and kerning over the project, especially because Hannah is so good with fonts and spacing.

Originally we were going to use Maven Pro, but felt that it was too broad and almost amateur font. Instead we used Calibri and then put a spacing of 100pt on it. I felt this looked a lot cleaner. 

Camera

I was really happy that we ended up being able to use the camera as part of the app because it was such an essential part of the app. 

Because the developers of the app's back end made their own camera app to sit within our app, I designed a really minimalist design so that the user can easily add photos. 

The photo app was able to take a photo by the user simply touching the screen, however this didn't seem to be focused enough and so I added a button, like most other apps have so that the user would have some sort of familiarity. 

Originally I wanted a pop up that appeared once a photo had been taken, but I felt that this didn't fit as seamlessly as possible.

So then I decided to go with something that is more static and that is super clean cut. I used the same font we'd used throughout the app and also tried to keep the spacing the same way it had been on the main page with the 3 buttons at the base. 

Friends and Pin Groups

This was a part of my design that didn't end up in the app, which I was really gutted about. I felt that the transparency made it more seamless and that it would have aided the app. However in the end we did go with something similar, just in different colouring.

The reason that I wanted to use the white and slightly less opaque version of the base, is because it seems light and cohesive.

In the end, we went with something darker that grounded the app slightly but I felt was a little heavy. 

Add new pin refined

This shows the new add pin, how I would want it to look in the app.

Hannah refined it slightly and then I've gone on to add the ability to add a group, with a colour picker and adding a name and description. 

Here it shows how the user can pick an existing group to add their pin to. I tried to keep this really simple and clean-cut with the drop down being a shade darker to show they are existing pins. 

These are some of the colours that we looked at for inspiration because they're so simple and not over the top. I wanted a range of colours for the user to choose from but not ones that would clash and were too extreme like the 2 bottom colours. 

These three screens show the pin pop up in its 3 states:

- the 1st shows what we see when you drop a pin. I've added in a title because we decided as a group that when you clicked on a pin later, you needed some sort of reference to what the pin was, beside the full description. 

- the 2nd shows when you create a new group from the pop up menu. Here is where the colour palette above came in and I made sure to add in small box with the current colour that's picked. 

- the 3rd shows when you want to choose from an existing group. I found this an interesting aspect of the pin drop as it had to show the existing colour of the group and the name, but without over cluttering the box. I felt that this worked well and when minimised looks clean cut, but has the ability to expand seamlessly. 

Splash screen

Here's a mock up of the splash screen and log in page that I made that has the new logo Hannah made and the information that we need such as the credits. 

This has the new colour scheme that we've come up with which is very minimalist as we want the main colour to come from the map

Friends

At this point I'm unsure of what we will be able to do with friends because the back end developers are still trying to figure this out

So at the moment I've just done a mock up of a set up that will show your friends from Facebook that have the app as well and then we could have somewhere where you can search from people and add them to the group. 

Photos

This is my mock up for the friends menu. I wanted it to be gridded in comparison to the bottom buttons for consistency and to overlay the map. The second screen shows how it would show up with whatever pin groups you had and then the user could click into any of them and it would show the photos connected to any of those pins. 

The bar at the top was something I added too, so that the user knows what group's photos they are looking at. 

Add new group from side menu

Since we decided to be able to add a group from the side menu and not just from dropping a pin I did a mock up of what this could look like and function like.

I first looked at some precedents and this was one of the better ones. I feel like this shows how you can have a drop down menu of current groups but also the option to create a new one.

This is a mock up of how it could function, from the main map to clicking on pins, to then adding a new group and name and then the pin showing up.

Here I was deciding whether to have adding a new group drop out a new box that went from the top to the last pin or whether to have it come out in the middle like the one below.

This is the idea that I ended on, where it is a bar that comes out at the exact same height as the Add Group button for consistency. 

Map choice

Before this we had been looking at using a map that looks like the one iOS uses and google. However I think that for a map that is in relation to a park, it should be more based on natural colours and as basic as possible. For this reason I think we should use one similar to that above- however this may not possible with the programme that we are using in Unity. 

Next Draft

Here you can see the colour choice that I mocked up to see what it would look like.

Although we do want the app to have some sot of colouring in it, this seems too intense and quite a chunky design. The map is also quite intense which wouldn't be as applicable to abel tasman as they have simple trails.

Here I tried out 3 different types of buttons to go on the base. I knew that I wanted to have an icon and a word at the bottom but wasn't sure whether they should be on top of each other or whether they should be placed next to each other.

Also I felt that the font wasn't quite right as it seems quite squished. 

Here I tried to use the colour slightly differently and only utilise the green when the button was pressed. I also tried to see what it would look like with a light blue based grey instead of the green that I have been using.

This shows the basic pop up that would come with adding a new pin. It looks quite cluttered at the moment but I'll attempt to streamline so that its more direct. 

Mock ups

In the design process I found that it was best for me to mock up quick versions of the app and then to hand these over to Hannah to refine. This way we could give the developers the mock ups so they knew what they had to create without holding up the design process. 

This ended up not working as well with the developers as they didn't want to use their time putting in designs that weren't the finished product when they could be working on the back end .

This shows the basic idea of the original app. We decided on the app having pre-loaded pins that would be available to the user to show them interesting pins already present. This would mean that they could learn interesting sites around the park and information but could also add their own pins.

Colour palettes

To decide on the colour palette for the app Hannah and I looked into different nature inspired palettes so that it directly related back to the park. 

These 2 images were ones I found that I tried to draw inspiration from. Keeping with the natural colours I found that green was the obvious choice but there were also other grounding colours like the greys and light blues so will try to incorporate these into the design 

Workflow

These were some wireframes that I made up to try and figure out what kind of colour balance we would use. This is really important in our app as it creates the ambience of the app and the whole feel of it.

For instance I thought that the first one looked clean and inviting but might have needed slightly more colour to make it a bit more exciting.

The second, although relating the colour back to the nature in the park is a little too intense. 

The last looks quite professional and has the colour pop from the green but also is anchored by the darker background. I plan to use both to try and balance the app

These two images, above and below show the basic transitions that I think would work for the app. For instance the app would open on the splash page with just the icon and possibly the name of the app and then would load onto a log in page. From here they can either log in or sign up and then this takes them to the main page where they can pull out the side menu (shown above) to see pin categories. 

Proposal

Before our first proposal we as a rout tried to come up with the basis for what our app would look and function like. I knew that there would be a  lot of polishing and refining but thought that it would be vital to have the basic architecture of the app sorted out in the early stages so we could look at what we needed in order. 

This shows what type of architecture the group wanted as a whole. I contributed by making sure that we were trying to streamline at every chance we had. This was essential as it is so easy to make an app that tries to do everything and doesn't focus on the main function. 

This was a slide that Hannah made up which shows the different colour choices that we looked into and the one below is the one that we decided on. It also shows some fonts that we had looked into for the app.

These are the slides for the proposal that we presented 

Lore

For the lore video it was very much a joint effort. Joe did the drawings and Michael did the voicing. I then took the recordings we had and altered them to make Michael sound more dramatic and then pieced the Lore together and added the subtitles. 

The Lore would fit as the players started the game to give context to it. 

Trailer

As I made the trailer I was focusing on showing off each different aspect of the game. 

I also added the same soundtracks so that there is a consistency between the game and trailer. I decided to take out most other sound effects because there is the narration of michael over top and I felt it would be too intense. 

This was my really really basic sketch for how I wanted the trailer to run overall and I feel that I've achieved that. 

Soundtrack

I was also the creator of the soundtrack.

For the soundtrack I grid to keep it simple because it was likely to be a repetitive track that you don't want the players to get sick of. 

I also wanted to stay true to the types of instruments that are tribally focused. For instance, I wanted to use a lot of drums, shakers and then chanting. However I didn't want it to have it too focused or linked to any one type of tribe.

This is the link to both soundtracks:

https://www.dropbox.com/sh/q66ubikilg5jc8y/AAAR0fyaVgeOSbVzhmOvEBSPa

To start with I created a base soundtrack for when the players are simply running from place to place or stationary looking at different things.

Then I created a more intense soundtrack from the same instruments but adding speed and the type of drums so that it seems to be a flawless transition between the two but still having distinct differences. 

Sounds

Sound effects were a major part of my contribution to the team.

Note: some sound effects may not be present in the game because there were some inconsistencies when the coders were placing them in. However the below list documents all sounds that I had used. 

Wolf:

Grunt

Death

Attack swipe

Regeneration Howl

Footsteps

Eagle:

Drawing new arrow

Drawing back the bow

Firing arrow
Firing fast arrow

Arrow hitting enemy

Death noise

Footsteps

Snake:

Hiss

Death sound

Firing venom 

Venom hitting enemy

Footsteps

Enemies:

Bull charging
Bull grunt

Bull dying

Dog barking

Dog grunting

Dog Dying

Snake hissing

Snake dying

Enemies digging out of the ground

Other:
Level cleared sound

Title screen

This shows the basic layout of the title screen that I looked into. This was a minor focus as we were so busy with other things.