Chosen Topic

I have chosen to continue with the Wellington SPCA idea for this brief. The current Wellington SPCA website is quite outdated, and holds alot of information that could be redesigned in a more user friendly way. It also does not respond to mobile or tablet view, so can be very difficult to navigate when on a smaller device.

Desktop

Mobile

Developed Ideas

I have refined my initial ideas down to two potential options for this brief:

Responsive Web Designs Analysis

Elements on web page are given lots of breathing room amongst the photographic background. This is changed as the device changes from desktop and tablet to mobile, with the information elements bunched closer together.  The background is heavily cropped, but still maintains the important part of the image which is the hand applying makeup.

Majority of the information and navigation of this website is placed on the left hand side of web-page. However the primary set of information of the individual page is located in the centre of both desktop/tablet and mobile views, making it the focal point. As the website is reduced in size the navigation is moved to the top of the page so that it does not compete with the primary information on the website, and the excess information is removed completely.

The navigation for this webiste is condenssed to a nav-bar along the top of the page, and as the site is reduced the nav-bar changes from mulitple buttons along the bar to drop-down menus.  Majority of the content scales down to fit horizontally, thus allowing more space for information to fit on the mobile web page.

The information in this website is displayed through a two column grid layout, one column is filled with text the other an image. As the device reduces the composition changes to a 1 column grid stacked vertically, and the information minimized.

This illustrative based website condenses in a clean simple way as the screen size reduces. The background illustration simply scales to fit the device, and the nav-bar condenses into a drop-down menu. The whole page still remains a link to more information further down the page.

This website works very well as both desktop and mobile views,because the navigation is always in a drop-down menu form. The interaction of the website is the tiled buttons, that depict photographic images of each of the companies projects. In the mobile view, these simply condense into one vertical column of buttons.

Once again the composition is very spacious, and revolves around a photographic image background. I think this website in some respect works better on the smaller mobile scale as there is less unnecessary negative space. The navigation bar along the bottom is brought closer together in the mobile view, allowing ease of navigation for the user.

Potential Ideas Brainstorm

Potential Approaches

The approach I undertake to designing a website depends on the information conveyed/ theme I chose to explore. These are some initial options:

Cause and Effect
These explain causal relationships between various physical or conceptual stages; for example, the causes of the recession in the US and its effect on the global economy.

Chronological
Chronological approach explains an event or process as it happened in time. Presenting information on a timeline enables readers to analyze the temporal relationship between various stages of a process. 

Quantitative 
Quantitative conveys statistical data to readers quickly and clearly. These graphics include charts, bar graphs, tables and lists.

Directional
Directional data can navigate readers through information. Often seen as a narrative approach, where there is only one particular direction or orientation. Numbers, symbols, icons, diagrams, graphs, tables, arrows and bullets are used to communicate information. 

Product 
Product websites can be used to promote particular products and goods to viewers as well as provide additional information. Combining images of the product with data makes it easier to comprehend large amounts of information in a limited space.

Cross Platform Access

Refers to the capability of software or hardware to run identically on different platforms. Many applications for Windows and the Macintosh, for example, now produce binary-compatible files, which means that users can switch from one platform to the other without converting their data to a new format.

Cross-platform computing is becoming increasingly important as local-area networks become better at linking machines of different types.

New Brief - Responsive Design

Responsive Design (RWD)
Responsive design is an approach that suggests design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/#.
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Adaptive Design (AWD)
It essentially utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. Using apredefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device. 

Adaptive web design also encompasses a range of other strategies which, when combined with responsive design techniques, enables you to deliver the best possible User experience to the widest possible audience. This means that numerous functionalities and environmental factors can be catered for in the most User friendly way, depending on the particular device being used to access your website.
http://en.wikipedia.org/wiki/Adaptive_web_design

Connectivity
Refers to a program or device's ability to link with other programs and devices. For example, a program that can import data from a wide variety of other programs and can export data in many different formats is said to have good connectivity. On the other hand, computers that have difficulty linking into a network (many laptop computers, for example) have poor connectivity.
http://www.webopedia.com/TERM/C/connectivity.html

Data Visualization
Data visualization or data visualisation is the creation and study of the visual representation of data, meaning "information that has been abstracted in some schematic form, including attributes or variables for the units of information".
http://en.wikipedia.org/wiki/Data_Visualization

Dynamic Data
On a dynamic Web page, the user can make requests (often through a form) for data contained in a database on the server that will be assembled on the fly according to what is requested. For example the user might want to find out information about a theatrical performance, such as theater locations and ticket availability for particular dates. When the user selects these options, the request is relayed to the server using an intermediary, such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the server what information to return.
http://searchnetworking.techtarget.com/definition/dynamic-and-static

Usability
Usability means making products and systems easier to use, and matching them more closely to user needs and requirements.
http://www.usabilitynet.org/management/b_what.htm

Rationale

I chose to design an application for the Karori wildlife reserve, otherwise known as Zealandia. My app aims to provide a more fun and interactive experience for people visitors of Zealandia. It offers them a mobile way to research information about the wildlife, as well as encourage them to walk the tracks and bring themselves closer to the wildlife the sanctuary holds. Because iPhones are extensively popular in New Zealand, I chose to model my app to fit the 320x480 screen dimensions, suited for iPhones. This also allowed me to test the app constantly during the design process as I own an iPhone 3. 

The target audience are people visiting the sanctuary, followed by future visitors, staff, NZ toursists and anyone interested in our native wildlife. This challenged me to create my app for a wide audience range; allowing children, adults and families to engage, learn and enjoy themselves whilst walking around the Zealandia reserve. The layout and colour scheme I chose suits the branding of Zealandia, as seen through their current website and advertising.

I used J Query mobile to create the app, as by default it already mimics the standard iPhone layout. I broke my information into 5 different sections, each one identified by a different icon. This allows different types of user interaction for the different categories, and more freedom for the user to navigate. To re-insure the user knew what page they were on, I added active states to the buttons which would change colour. 

As mobile apps are a reasonably new form of technology and often include interactive methodologies, I decided to create a few of my pages as implications to potential possibilities if more money and time were available. Three main functions these include are the AR map, the produser photo gallery, the live feed web cameras and the QR code awards.

AR map- The augmented reality would work by pin-pointing the user's location with their phones in built GPS. The view through the camera would become altered based on the users co-ordinates and display various locations of wildlife around Zealandia.

Produser photo gallery- Users have the opportunity to produce their own content for the app, by taking photos anywhere within the sanctuary and submitting them to upload to the Zealandia app.

Live feed webcam- The live wildlife nest cameras would operate through cameras placed in weather proof boxes, installed beside the animals nest or feeding area. The Live Cams section of the app would stream this video live.

QR code awards- The QR code rewards would be unlocked by the user as they scan the QR codes placed on information boards around the sanctuary. The QR code scanners would not be built into the app, the users would use a QR scanner app pre-existing on their mobile phone.

Final App

Here are some screenshots of my final application. It consists of approximately 45 pages, and is built ideally for 320x480 mobile screens.

Splash page

Maps page

AR Map page

Wildlife, Bellbird page

Gallery page

Live Cams page

Live Cams, Tuatara page

Awards page