For the second iteration of the paper prototypes we had to do it with our group partner and discuss what improvements could be made on our individual paper prototypes.

For this paper prototype we left the design on several of our pages the same as we both felt and agreed that it was suitable with an aesthetically pleasing and minimalist design.

However for this iteration we took into account factors that we felt where missing from the individual paper prototypes, with some redesigns on certain pages for an overall better user interface and also added page examples for user flexibility and freedom.

News Section – Redesign

Prototype 1 Prototype 2

• 

• 

Network Error Handler Page

404 Not Found Handler Page

Notification Flash Message & Settings

• 

• 

For the sake of interactivity and scenarios, I conducted a full video demonstration of how the application may be navigated by a user on this second paper prototype iteration, I done this only using the paper prototypes as an interactive guide as seen below.

The rest of the application pages where kept the same. To see the other pages that where not changed, please visit the first paper prototype iteration blog.

Evaluation of group paper prototype 2:

For the evaluation of the prototype(s) I will be using the heuristic evaluation methodology.

Visibility of System Status

This iteration of the paper prototype has the same features discussed in the first iteration, however this time it incorporates 404 pages and network error pages to allow the user to understand that an error has occurred and that they must go back to the previous page.

Match Between System & Real World

The added icons and images for this iteration allow the user to get an even better understanding of what is been displayed on the application and makes life easier to navigate. For example the ‘Settings’ page incorporates several icons that match real worlds counterparts as an initiative to make the user comprehend what each setting does, settings pages can be quite tricky at times to navigate, but with the use of the right icons it can make it simplistic for the user.

User Control & Freedom

As discussed in iteration 1, the user has the ability to navigate and scroll wherever they please within the application, with the redesign of the news section page it displays more articles on screen at once which makes scrolling even more free and effective for the user.

Consistency & Standards

With the implementation of the redesigned news section, it makes the design even more consistent as it is similar to the home page section which also incorporates several card layouts with images and text.

Error Prevention

In iteration 1 this was not visible, however in this 2nd iteration we have implemented 404 and network error pages to prevent the user’s mobile device from crashing or performing something unintended.

Recognition Rather Than Recall

For the first iteration the settings widget was an easy to recognize widget however we felt it was too large and therefore changed it to 3 small dots which is also recognized as being a settings or management widget.

Flexibility & Efficiency Of Use

With the added flash message for notifications that prompts the user into accepting or rejecting the push notifications this increases the flexibility and efficiency of use for the application as it gives the user a quick option which they can accept or decline.

Aesthetic & Minimalist Design

Like the first iteration the design has been kept simple and neat, the settings page is broken into three different category for easier readability and understanding, while the error pages also include simple and to the point design. The squashed look of the news section page has been changed to a neat linear layout for easy user navigation.

Recognize, Diagnose & Recover From Errors

When the user runs into a network error page, it is explained to them that it is infact a network error and that they must be connected to the Internet to proceed, this is explain with a small illustration of a fallen-over coffee cup – this illustration alone explains to the user that something has gone wrong.

Help & Documentation

This was not prevalent in the first iteration, however this iteration shows within the ‘Settings’ page the user can contact support via email. This is useful as it allows users to report issues, bugs and/or general queries about the application or the content that is displayed on it.

Taking a step back and reflecting on the project I can confidently say that the progression on it so far has been outstanding and I have been working very well and at a consistent rate with my partner who is also doing a phenomenal job on the server-side part of the project.

I personally took it upon myself to get a head start on the project before the majority of my colleagues. I built the core parts of the project’s functionality very early on and in recent weeks have focused on the design aspect of the application and have looked at the application from an outside user perspective on the needs and wants that the user may expect to be on a climate awareness mobile application.

Me and my partner have taken the time outside of project hours to develop a good understanding of our chosen technologies for our project, as our frontend design is in XML using the Android Studio software which I am responsible for, while our backend is in PHP using the Laravel framework which my partner is responsible for. Functionality is also implemented using both softwares.

We have both worked extremely well together as in when one of us encounters a tedious bug in our code in either of our respected technologies, we tend to stop what we are doing and work together to try and solve it even if one of us isn’t as familiar with the technology that has the bug, this is done by online research together and explaining to one another what we are trying to get that specific code to do.

As for this assignment, we have both worked well together creating a group paper prototype based on our group personas, we discussed several factors that we could maybe add or change in order to make the user experience more satisfying and essentially bounced ideas off each other until we where both happy with the overall decision.

1. Paper prototypes:

For the paper prototypes, two iterations of it where created in order to improve the user’s interactivity with the application and an overall redesign of the application for an improved user interface and a generally strong user experience.

For my individual prototype I used ‘Scenario #2’ as my user. I created a simplistic design with an easy-to-use interface for the user. I implemented clickable images to make it easy for the user to navigate and a large surface area for them to accurately click as a lot of the time people tend to click a large image rather than the intended button as a means of navigation.

I also decided to make the design aesthetically pleasing to the user with the use of preloaders, cards and multiple images, with neat spacing and a linear grid layout. My reasoning for this is because it gives the application a sense of friendless, organisation and simplicity.

My Individual Prototype 1:

Preloader

Home Page

News Section & Article

• 

• 

Navigation Side-Menu

Login Form

For the sake of interactivity and scenarios, I conducted a full video demonstration of how the application may be navigated by a user, I done this only using the paper prototypes as an interactive guide as seen below.

2. Evaluation of Prototype 1:

For the evaluation of the prototype(s) I will be using the heuristic evaluation methodology.

Visibility of System Status

The application includes a preloader on startup in order to let the user understand that the application is loading, this is done using a progression bar which counts up to 100% on completion. However, there is no evidence of pages that handle 404 or network problems, these need to be in place as a fallback page incase some error occurs, otherwise the application may crash.

Match Between System & Real World

Many of the icons used within the application are a corresponding real world counterpart to the text that is being displayed, for example ‘Home’ in the navigation side-menu is accompanied with a house icon in order to increase the perception of what section the user is about to navigate to.

User Control & Freedom

Our application implements several interactive features such as a drawer side-menu which the user can either click on or pull out using their finger as a means of navigation between sections. We allow our users to freely scroll pages, navigate sections and return to previous pages using a back arrow where the navigation burger-menu icon is located. However, there could be more evidence of notification control for the user and flash messages for confirmation of a task, for example, exiting the application.

Consistency and Standards

On examination of the paper prototype, we can determine that the application follows a card layout design consistency. The reasoning for this is that the cards split up content within the mobile application for easier readability and organisation.

Error Prevention

Error prevention is not visible on this specific paper prototype, however the fields on the login form are infact validated and prompts the user to please provide the correct credentials just above each field for the actual application.

Recognition Rather Than Recall

From the paper prototype we can determine that many of the widgets within the application are generally known to the majority of all users as they are default Android widgets seen on the majority of applications, for example the “Share” widget is generally known and considered as a 3-connected-points polygon. For these reasons we can conclude that users would recognize the majority of things on our application rather than from memory.

Flexibility And Efficiency Of Use

By watching the above video of the paper prototype being used as an application we can conclude that the flexibility and efficiency of use is straight forward and generally easy to understand.

Aesthetic & Minimalist Design

On inspection of the paper prototype we can discover that the design is neat and concise, however, there is always room for improvement. The article itself looks quite clunked together so there may need to be a few changes to that.

Recognize, Diagnose & Recover From Errors

There are no signs of error recovery on this paper prototype as highlighted in Visibility Of System Status above. The application would benefit from well-designed and user-friendly 404 and network error pages.

Help & Documentation

There is no evidence on the paper prototype for help and documentation, the application would also benefit from a ‘Contact Us’ page if it where to be implemented

(In order to keep the blog max word count to 1000, the group prototype is in a separate blog labelled Group Prototype.

1. Personas

For our personas we took into consideration different user age categories and lifestyles in order to highlight the type of users who may be active on an application such as ours. Our target market for our application is in fact college students between the ages of 18 to 25, however this does not mean that this age category of users are the only users of the application, in fact people of an older age category would also find a climate awareness application useful too for gathering information and spreading awareness if they wish to do.

Persona 1:

The above persona highlights a general college student who may be interested in using a climate awareness application to expand their knowledge about the current global crisis. The individual is an example of a young adolescent who visits their local beach daily, only to find litter and deceased sea life as result of this litter. The result of these findings make this individual a primary target for our application as they may want to understand why this problem is occurring and why it is a destructive factor towards the climate.

This individual may or may not take to social media to share their unpleasant findings at the beach to try and spread more awareness on the concern. This usually draws in an audience especially if it’s their local beach or if they personally know the individual who shared the post.

Persona 2:

The above persona highlights a middle-aged individual who works full-time as a construction worker at a local building site. This individual has several issues with his work place and the majority of these issues are weather and temperature problems that occur while he is at work. A climate awareness application may be beneficial to an individual who suffers from these issues, as it can provide an insight to how and why these issues are occurring and why they constantly get worse over the years.

Once this individual has become familiar with explanations and reasons for these issues via our application, they may consider educating or informing their children, friends and others around them which is the main initiative of our application. This individual may also take the time to contact his local business to explain the situation and may request for some kind of change to the company policies for the workers who are also suffering from these weather and temperature issues.

2. Scenarios

Scenario 1:

Storyboard: This individual launches the application and is greeted by the home page which display all sections of the application that they can freely navigate to. In this case, the individual is eager to understand the problems of climate change and is trying to associate or relate his problems at work to any that he can find when he clicks on the ‘News Section’ page. He is then greeted to a list of news articles to choose from, he scrolls down the page until he finds one titled “England’s recent strange weather”, and clicks it which then displays the chosen article.

The individual reads through the article and finds some similar issues that people are having that he has at work too. His first thought is that the application has aided him and so he decides to click the burger icon menu and navigates to ‘Campaigns’. He has a quick and brief look at what campaigns are looking for funding, but takes no further action and exits the application.

Scenario 2:

Storyboard: This individual launches the application and is also greeted to the home page, he takes a short pause to read what sections the application offers. He navigates to the News Section but quickly turns his attention to the Campaigns/Statistics Section when he clicks the burger menu. Once he navigates to this section he straight away clicks on the statistics to get a general overview of his country’s pollution levels and sea levels, he is intrigued by his country’s sea levels and decides to navigate back to the News Section to find any articles related to sea levels. Once he navigates to the News Section he understands straight away that there are a lot of articles and therefore uses the search bar at the top of the screen to search the keyword “sea levels”, in which he is greeted by several corresponding articles.

Once he reads through the article he feels it is necessary to share the article to Facebook as he found some of the information shocking. He clicks on the share button located on the top right of the screen which opens an options menu of several different platforms that he can share to and he selects Facebook. Once it has been shared, a Toast message appears displaying “Shared”, he navigates to the Login page as he has now consciously made a decision that he will be returning to the application and would like notifications turned on, this feature is prompted to him after he creates an account as a flash message. He has taken note that there are no intrusive advertisements within the application which appeals to him too. He creates his account through his Facebook profile and exits the application.

3. User Research

For our user research we used several surveys to determine what the users of a climate awareness application needs and wants where, we where also experimenting with the idea of whether a desktop or mobile version would be more suitable, and these surveys gave us an overall idea and path to follow. The survey questions, answers and results can been seen in the gallery below: