Rate your environment

RATE YOUR ENVIRONMENT

Mobile Web App

Nov, 29th, 2012 Group 1--- Satu Ilta, Anna Kalme, Dan Qin

2012-11-28 2 / 16

Blueprint specGroup 1

CONFIDENTIALTable of Contents

1 Feature & design introduction 3

2 Information Architecture 4

3 Feature Overview 5

3.1 Rate page 5

3.2 Results page 6

3.3 My review history 7

4 Blueprint Specification 8

4.1 Send review with photo and comments 8

4.2 View the rating results - usecase 1 11

4.3 View the rating results - usecase 2 12

5 Visual style 13

5.1 Guidelines 13

5.2 Application views 14

6 Questions to be discussed 15

2012-11-28 3 / 16


CONFIDENTIAL1 Feature & design introduction

The application is designed to cultivate interest towards environmental protection by providing a tool through which you can give feedback of the state of your local environment. The application is a location based feedback survey tool, that you can use to rate the state of the environment within 0,5 km range of your current location.

Ideal user groups

• Locals wanting to make an impact on their environment • Local organizations involved in environmental issues More specifically: - 25–35 year-old person interested in making an impact on the state of the environment - Influencers in local organizations involved in environmental issues > Users believe their opinions are heard and acted upon > Organizations get valuable information on where to invest resources • Environmentally aware tourists - Neutral viewpoint, and potentially really active users - Many potential promoters (airlines, travel agencies etc. that want to position themselves as environmentally responsible)

User motivation – why use the app?

To make a positive impact on the state of the local environment • Providing local influencers the information on which they can act upon

To direct public attention to environmental issues • Sharing knowledge of what the best, and worst rated areas are.

For fun & information • Comparing environmental ratings accross the globe

2012-11-28 4 / 16


CONFIDENTIAL

View results

View detailsAdd photo or comment

My review history

Welcome/Load page

Rate current location

2 Information Architecture

2012-11-28 5 / 16


CONFIDENTIAL

RATE DIAL

• Rating is done by rolling a dial on top of a gradient color scale. The brighter the color, the better the state of the environment, represented my a smiley that’s expression is changing while rolling.

• After sending a review, you can upload a photo or write a comment to back up your review.

• After sending your review, you will be redirected to the page where you can choose to either add a photo, add a review or view the detailed results of the location you have rated.

3 Feature Overview3.1 Rate page

2012-11-28 6 / 16


CONFIDENTIAL3.2 Results page

GLOBAL MAp VIEW

• When zooming in, you will see more details in colors, as well as the reviews, comments and photos added to the selected location.

• The photos and comments can be viewed by clicking a symbol, that will appear on places with reviews when zoomed close enough.

• The closer you zoom, the more detailed information you will see.

• User can search for a location by address, or city and country name.

2012-11-28 7 / 16


CONFIDENTIAL3.3 My review history

My REVIEW hISTORy

• User can see old ratings (s)he has made

• This is an optional view, that can be created as an extra feature, but not required for the application to work

• Will require the use to login (using facebook credentials, or by creating a new username)

• Creating login details / logging in with facebook could also enable more features when the app is furter developed in the future. For example sharing your rating in other services,

2012-11-28 8 / 16


CONFIDENTIAL4 Blueprint Specification4.1 Send review with photo and comments

2012-11-28 9 / 16


CONFIDENTIAL

2012-11-28 10 / 16


CONFIDENTIAL

2012-11-28 11 / 16


CONFIDENTIAL4.2 View the rating results - usecase 1

2012-11-28 12 / 16


CONFIDENTIAL4.3 View the rating results - usecase 2

2012-11-28 13 / 16


CONFIDENTIAL5 Visual style5.1 Guidelines

FOnTS

• The application uses Helvetica Neue typeface:

Button texts: Helvetica Neue Condensed Bold, All Caps, 8pt

headings: Helvetica Neue Bold 9pt

paragraph text: Helvetica Neue Medium 8pt

LOGO

• The local environment logo is a simplifyed glass globe with a yellow papercut human-figure. The glass globe symbolizes local environment and its fragility and at the same time it resembles the globe. The big-headed papercut figure reminds a child or innocence, naivity.

SMILEyS

• 11 smileys that are clearly separatable from each other

COLOR SChEME

• The app uses two different color schemes for displaying rating results: yellow to black for regular users, and green to grey for environmental experts ratings.

2012-11-28 14 / 16


CONFIDENTIAL5.2 Application views

ThE MOST IMpORTAnT VIEWS OF ThE App VISuALIzED To be replaced with colored versions

WELCOME defines the visual identity of the app

RATInG TOOL the main purpose

of the app

ExpLORInG RESuLTS seeing interesting data from around the world

VIEW DETAILS why has a place been

reviewed a certain way

2012-11-28 15 / 16


CONFIDENTIAL6 Questions to be discussed

hOW TO ShOW DETAILED RESuLTS On ThE MAp?

• How to indicate to the user what location you have chosen to view, if you cannot display information based on named areas? E.g. “Chosen location” vs. “Helsinki, Finland”

• What is the most user friendly way to move from the map view to viewing detailed results? So when will the clickable symbols appear, and from which range will reviews be displayed from?

COLOR SChEMES?

• Are we going to separate the expert data from common user data by using different color schemes? If so, how does the user understand the idea?

LOGGInG In?

• To view “my review history”, the user has to be log in. Also, (s)he has to be logged in for the ratings to appear here. At which point is the user offered the opportunity to log in?

THANKS!The end...

Nov, 29th, 2012 Group 1--- Satu Ilta, Anna Kalme, Dan Qin

Education

Rate your environment