Implementation

I have tested my app on my iPhone to make sure it works, and it functions perfectly. I created the app for a screen size of 320 x 480 which matches my iPhone. The back and forward swipe function works, the colour matches up and all the images and videos display just how they should as tested in the browser during development.

Development

My application is almost complete. I now just need to edit the map pages and add the back and forward swipe function, then it will be finished. Another major change I have made from the initial wire frame layout other than the Awards section is the Map section. 

Originally, I planned on having google maps as the main map on the map section, and an augmented reality map as the alternative. However, after implementing google maps within the app I realized that google maps does not contain the tracks and blanks out majority of the reserve. So I have decided to use the maps provided on the Zealandia website instead, and have 3 varying map categories- wildlife map, land map and augmented reality map.

Zealandia Visit

Today I visited Zealandia and managed to gain some great content for my app. I took photos to add to the gallery section, as well as videos of each birds nest to implement my Live Cams and give a more accurate feel of what that section would appear if I were able to use actual webcams in surrounding trees.

Development

Here is a screenshot of my development so far. I have created each section on the footer, and over written majority of jquery mobiles default layout. I still have the Gallery, Live Cams and Awards pages to create as well as add in some features to reassure the user when a button is touched.

Awards

I decided to rethink my concept of the awards page. Originally, the idea was that the app would require the user to activate the gps function of their device, and you would receive awards by walking around certain parts of the Zealandia tracks. However, after conducting research I noticed that though they do not currently have an app, there are QR codes around the Zealandia that visitors can scan to obtain information on the sanctuary. Therefore to create a more interactive experience, I have decided to alter this section so that users have to scan the QR codes around the park in order to obtain awards.   

Initial Content Research

Majority of my content I am sourcing from the existing Zealandia website- http://www.visitzealandia.com/ . Most the information includes imagery of specific wildlife and text about the various species. 

  

Layout & Grid

             My layout                                                    iPhone layout

With my layout I am aiming for consistency and readibility. This 5 section layout reflects the standard iPhone layout, making users able to recognize and instinctively function it with ease. I also maintained a 3 grid layout (not including footer), allowing me to structure my information formally in a hierarchical  way to help entice the viewer and provide easier navigation.

Grid System

Justification before production

Message, Audience & Format-

My application provides an interactive and fun experience for visitors of the Zealandia. The target audience is visitors of the sanctuary, and secondary are Zealandia staff, tourists and anyone interested in NZ native wildlife or are planning a visit to the sanctuary.

The main purpose of the app is to offer visitors a mobile way to research information about the wildlife as well encourage them to walk around and bring them closer to the animals. I felt using JQuery Mobile to create this app was appropriate, as it provides the standard iPhone layout as a basis for coding. Because a high number of New Zealand smart phone users own iPhones, it seems appropriate. It also makes testing easier as I own an iPhone, so i constantly have access to a testable device.  

Information & Navigation-

I have broken my information into 5 main sections; Map, Wildlife, Gallery, Live Cams and Awards. I felt this was a systematic way categorize the main functions and properties of the app, in a clear and easy way for the viewer to interpret. It also allows different types of features and layouts for the different categories, which in this case ideal. I have designed 5 navigation icons fixed at the bottom of each page allowing the viewer more freedom to navigate, resembling the common iPhone app layout.  

Animation & Resources-

The only animation I plan on having is the page transitions, otherwise my focus is interactivity and user interface. All the written information and imagery on the app I will source from the Zealandia website. As for the videos, I plan on visiting the sanctuary and filming them myself.

Wireframe

These are some wireframes I created using Adobe Illustrator. This gives a structural template of my content and imagery, and I now have a clear idea of the interactive elements that create my app. I continued with an IPhone 3 template, using a screen size of 3.5 inches.

Collection change

I have decided to alter my 'Collection' section of the app, and change it to a 'Gallery' page. This new gallery page will act as a produser page, where visitors can upload pictures taken with their phones around the sanctuary onto this gallery page for everyone to view. I believe this will encourage users to take photos, and will differ from the camera gallery mobile phones already have.

Paper Prototype

Here is a paper prototype I created IPhone templates printed out on paper, to help map out my ideas more clearly. It provides me a better understanding how of my application will work, as well as an indication on size and proportions of icons. I have decided to create my app for the IPhone 3GS as that is the mobile model I currently own.

Moodboard

Here is a mood board I have created to help gain a visual aesthetic of the app. I  decided to analyse the current Zealandia website and use its branding as reference to the elements of my app.

Refined Moodboard:

Initial Moodboard:

Flat Design

Flat design is a simple, graphic style common in UI, software and Web design. In the past, designers at a particular focus on showcasing their skills by portraying flashy illustrations and animations that supposedly wowed their users. Then skeuomorphic design became the trend, attempting to bring real life to the screen with realistic textures and real object characteristics. Today, flat design is popular and sought. It opposes all of these 'artificial' design techniques, in favour of a more simplified, classically digital aesthetic. 

Effective UI Designs

The 4 panel layout of this apps UI is effective as its large enough for the user to easily press and the icon displayed indicates the weather in that area. The lack of drop shadows, outlines and three dimensiality is what makes this an effective piece of flat design.

This design focuses strongly on photography, with text placed over top. The blurring of the image when alot of text is displayed allows the viewer to read and understand it alot easier as opposed to fighting for attention with a detailed photograph. The simplicity of the icons makes this universally a good piece of design.

The colour scheme for this design works nicely, as the colour not only indicates which section of the app you are visiting but also creates reflects the simplicity of the flat design through its minimal use of colour. The list on the right screen is a clean way to create a sharp looking list without the interference of bullet points or numbers. 

The grid of this app works well and indicates hierarchy through the size of each section. The colour scheme works nicely, and helps convey the information displayed without the need of more than one colour (orange). The iconic design is also successful in universally depicting what the weather, temperature and wind will be on the desired day.

Each section of this app displays a different colour, which continues throughout the app. That allows the user to understand where they are in the app alot easier, especially if it contains alot of pages and sub-sections. The subtle drop shadow on the icons portrays a subtle remnance of skeuomorphism, but in this case works well with the rest of the UI flat design.

Icons

Nowadays icons play a major role in website and application designing. Users can be motivated by the symbol and message portrayed by any icon, so it is important we take semiotics and graphic design when composing them. Majority of the icons in my Zealandia app will be navigational buttons. This will help to enhance the user experience, as well as create a more interesting and user friendly navigation. These are some initial iconic designs I have created for the different sections of the app:

              Map                     Wildlife             Collection/Album             Live Cams               Awards

Audience

Main- My target audience for this application is people visiting the Zealandia sanctuary. Because the app is designed primarily to enhance the users experience whilst walking through the sanctuary. A lot of its features; including collection and awards, are only useful if the user is physically at Zealandia. The app provides a fun way for adults, children or families to explore and learn more about the wildlife at the sanctuary.

Secondary- I have listed Zealandia staff and people thinking about visiting Zealandia as my secondary audience. Zealandia staff would benefit from the app, as they can potentially keep track of where the wildlife and visitors are. It also allows them to give quick and easy answers if anyone asks them about the wildlife at the sanctuary. The app would also assist people thinking about visiting Zealandia, as it would give them an insight of what wildlife they may encounter and what tracks they can walk. 

Other- NZ/Wellington tourists may be interested in the app, as it informs them of all the wildlife native to NZ. They also get a chance to see them on the live webcams, and hopefully encourage them to want to come and visit the sanctuary. Which is why people interested in NZ wildlife may also be interested in this app. It allows them to view the birds regularly on their mobile device wherever they please. If anything extra-ordinary happens on one of the cameras, they may also be encouraged to hurry down to the sanctuary. Lastly schools are a potential market for the Zealandia app, because it is common practice in alot of NZ schools for children to own and learn off a mobile device during class. The educational side of the app may encourage teachers to have their students read, watch and learn about the wildlife they may be unable to encounter otherwise. 

User Scenario Chart

My app is ideally designed for users visiting the Zealandia sanctuary, to enhance their experience. However if something extraordinary happens in one of the live camera nests, then people outside of Zealandia may be encouraged to come visit.

User Flow Chart

User Interfaces

Flava

This app has a nice array of icons for the user to select. They each portray a simplified and stylized object relating to the subject of the page it leads to. Image symbols are often a good and universally recognizable way to represent the content the user may view, and as buttons work successfully. 

 Great British Chefs

What I like about this app, is the image scroll. The recipes (images) are displayed large filling majority of the screen, but indicate the user can scroll along by having a portion of the next and previous images displayed left and right. This is a great way to hint to the user there is more content they can scroll through.

 Offline Magazine

Another example of successful minimal design and simplified icons. This minimal graphic design contrasts nicely with the photographic background, providing the viewer with context of what the app is about. 

Photodrive

This is a camera app that gives the user multiple options of photo manipulation that aren't offered with the standard iphone and android mobile cameras. The interface works successfully, and the transparency allows the user to take photos without any blind spots.

 Solar Weather

Having each button display a unique colour scheme adds visual distinction and reinforcing the text. 4 buttons displayed works nicely and allows users to easily push each button and read each piece of text with ease. 

 Uniqlo Recipe

The icons at the bottom and top of this interface work successfully. The buttons mimic the standard iphone icon display, but can be used on any mobile device. The simplicity of the icons and indication through colour change make this app very user friendly.

Chosen Idea

I have decided to create an app for Zealandia (formally known as the Karori Wildlife Sanctuary). The app will be designed for people visiting the park providing them with a more interactive and fun experience. The purpose of the app will be to educate, provide useful information and make the overall experience more enjoyable and memorable.

Refined App Ideas