5 high quality screen shots of key steps of interface

200 words describing interactive application

NavaVic stands for “Navigation Victoria.” Students can make a profile and create and customize their own comic book style character or alternatively use the app as a straight GPS system without logging in. The student can search for their desired location. NavaVic takes them to a 3D plan view map of the location they’re currently in. The character is standing on the screen where the student is currently standing. Gold coins trail to the desired location. As the student moves along the trail so does the character, collecting the coins in their path. The coins are counted on the right hand side of the screen and the time limit is shown. If the student arrives at the location faster than the expected time they are awarded additional points. However, if they are late all the coins they have collected are not counted towards points. Once arrived at the location a 3D representation of where they should be shows so the student can feel assured they’re in the correct location. Students can share their points on Facebook to brag to their friends how many points they’ve earned. Senior students can turn the GPS on and put their phone in their pocket, collecting points as they go despite knowing the location. This way, first year students will not feel embarrassed to use this application. As they use it, it’ll also appear they’re just texting. The game style of this app will attract all students to use it and not just at the beginning of their first year. 

New and improved Screen Shots of App!!

 These are my finished screen shots of the app. With all improvements made and as polished looking as they can get I feel without over doing it.

These screen shots are in order this time

Loading screen - fades in at the beginning of the application to show that it's loading.

Menu - icons have been fixed so they have the same stroke width and make more sense. Login now has a key lock icon and the 'create profile' icon looks more human like to match the character idea of my app.

The app now goes straight to this screen when searching for a location rather than the background fading to dark and then having to press 'search' button.

This screen has been fixed up with the new render of the new interior. It matches the rest of the app better now. The coins are also the same darker colour as they are in the other screens where it shows how many points you've been awarded. 

Same with this screen. Also the button now says "continue" in stead of "destination reached." That is now said on top and is clearly not a button. It is on a layer above the new rendered image.

This screen is the same as before as it needed no improvements. 

The screen where the background darkens has been taken out and now goes straight to this screen instead to be more efficient. 

Once you've logged in you're taken to this screen. The button icons have also been fixed up here a little with new and improved icons with fixed stroke weight, size and pictures. 

This screen is the same as before as it needed no more improvements. 

Locations>

Locations>All

Locations>All>Honey Cafe.

Character creation. The completed button has now been moved to the left on all three screen shots of the character creation menu to be more pleasant and easier for the user.

This 'completed' button is the only change made to these three screen shots of the character creation menu.

Once the user presses "completed" they're taken back to the logged in menu screen.

Reflection

I'm very pleased with how the aesthetics of my app have turned out as there has been a huge improvement from my first designs in this project where the colours were very bright and childish and the layout may have been more difficult to understand. I feel this design is a lot more mature as the colours are simple but complemented by an easy to understand layout, symbols and the character on the left hand side. The name 'NavaVic' is appropriate as it stand for 'Navigation Victoria.' The name is short, simple and easy to remember. It also will appear to students as most of them are in there 20's and feel this name is modern. I'm really pleased that I took a more minimalist approach to my app design as once I'd developed the character she really complemented every frame although faded into the background. The minimalism aesthetic makes this app more professional and modern looking so therefore represents Victoria University well. 

I'm really pleased that I fixed up all the little improvements mentioned in my last post with screen shots of the app. I feel this has just really polished my work and has gotten it to the best standard possible. All the time and effort I've put into this project really shows and I'm glad that I took the time to be a perfectionist for this. 

I've stuck with my main idea from the beginning with a character rewards system and I feel this design does the idea justice. 

New Interior and Rendering

I have fixed the colour problem (wallpaper, carpet, furniture) as well as updated the design with more modern furniture. These are the new renders and they go with the application much better and fit with the colour scheme. 

Advice on Graphics

I began working on Flash today. I managed to get buttons working and even some image fading animation in there. I thought that I had fixed all my graphics problems and was ready to animate on Flash, however Angela gave me some really good advice on a few things I could do to polish my design.

Angela said she really liked the grey colours used, consistency, minimalist style and illustration of the girl. She felt that all the design needed to match up to the quality of the illustration of the character (girl.)

I will show the screens I have at the moment and the comments that Angela gave to fix some things. I will then upload the improved screens onto blogger.

- These images are not in perfect order as blogger is silly, sorry.

Loading screen - She really like the colours, minimalist style and illustration on this screen. She also liked how the girl was faded as it's very sophisticated and gives the app a character. 

The symbols need to be improved. They're good as they're all white, have their own style and are consistent in their size. However their line stoke needs to match better. 

This is very good. The coins should stay consistent like this throughout the other screens.

List of locations and a scroll down screen.

Angela discussed that maybe there is a better symbol for 'Login' rather than a plus sign. The 'Create Profile' symbol could have the plus taken away. Especially if the plus is in the 'Login' symbol. Also the persons head should be higher and the shoulders should be more rounded on the symbol. She suggested making it look more human like.

Angela thought that it would be more efficient to just taken away this entire screen to avoid so many clicks. It would be more efficient if when you press 'search' from the menu it takes you straight to the keyboard to write the location you want to got to.

So when pressing search you will go straight to this screen here.

This 3D render doesn't fit in with the aesthetics of the illustrated character and the colours of the rest of the app. The coins aren't consistent with the other darker coins illustrated either. Angela recommended I either do another render using darker colours or preferably do an illustration of it in the same style the girl has been drawn it. I will do another render in darker colours and then attempt to draw it in this style again on Photoshop and then digitally paint it.

The colours used in this are far too bright and don't match with the rest of the application.

The 3D render needs to have more modern furniture and colours even if it isn't a true depiction of the actual room at Kelburn. I either need to do a new render of this room that is more modern or illustrate a better picture that is more suited to the character on the right. 

She also thought that this screen should say "destination reached" and then have a type of continue button.

This screen is very good and the coins should stay consistent like this on the map (3D render or illustration.)

This screen needs to be deleted and go straight to the keyboard. This screen is not necessary. 

Keyboard.

List of types of cafes. Scroll screen.

List of names of cafes.

The create a and customize your character menu. Angela likes this and said the 3 column effect is very effective as the eye likes this. She recommended that I move the "completed" button to the left so it is align with the rest.

The same with the next two screens.

I will fix up all of the small problems mentioned above and then continue to animate it in flash. I can't really continue to animate in flash until I've fixed these small problems so I should really get onto it. I will upload my fixed screens onto my blog once I've finished them.

Re-design of app + Tutor feedback

So I have decided to re-design my app as I really wasn't pleased with the previous aesthetics of the app. It was too colourful, messy and not very easy to follow. There was just too much going on aesthetic wise. When designing it, I thought it was okay as colour would attract a teenage audience. However, I have now decided that a more clean, sophisticated app would be more appropriate as it needs to be easy to follow, young adults are the target audience and the symbols, coins, maps and characters are enough to attract the younger audience without the app having to lose it's flow.

With a now more cleaner and stylistic interface the app is much more professional and looks more presentable for a business to buy it.

I have not yet finished all the different screens for the app but I showed my tutor what I had so far today. She was really pleased with it and thinks that it has taken a much better direction now. In her words, "a huge improvement."

I will show all the screens I have so far for the app and what the tutor has said I need to do to improve them.

Loading screen - I have renamed the application to 'NavaVic' as this stands for Navigation Victoria. It is a aweet, cute little name that is catching and easy to remember. As you can tell by the loading, the interface is a lot more minimalist and has much more simplicity now. A clean interface is often more smoother and easier for the user to understand. 

Menu - The option bars will slide out from the left side now onto the loading screen which then becomes the menu screen.

Search option - The background will fade to dark as the search screen appears.

When pressing the search box a custom keyboard appears. Once the user has finished typing the location they then press search.

(the tutor said turn the background to dark, transparent overlay as I originally just had it transparent and light which was too distracting.) 

It looks much better now, this way.

The map. The tutor really likes this but her feedback was to take the toilets out, make the coins more obvious and to show the other rooms on the left and right. I will go onto Archicad and do this.

Shows the destination you should be in (3D render from Archicad.) Your character will also appear on the left hand side.

Once choosing "destination reached" the points screen of how many points you've earned will appear. You can either share on facebook or twitter and brag to your friends or go back to the home page.

From the home page, if you choose the "login" option you will be taken to the login screen (again the background fades to dark. overlay.)

Keyboard then pops up when pressing the square.

Main menu loads and new options are available.

When choosing the "points" option it takes you to the Points page which shows the total amount of points that you have earned. You then have the options of sharing this on a social network of your choice (facebook or twitter.) 

So this is where I have gotten so far. I still have more screens to create and things to improve on such as the map. However I think this is a huge improvement from what I previously had and the app is looking more professional.