1. Mobile Web App
RATE YOUR
ENVIRONMENT
Group 1--- Satu Ilta, Anna Kalme, Dan Qin Nov, 29th, 2012
2. Table of Contents CONFIDENTIAL 2012-11-28 2 / 16
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 discussed15
Group 1 Blueprint spec
3. 1 Feature design introduction CONFIDENTIAL 2012-11-28 3 / 16
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
Group 1 Blueprint spec
4. 2 Information Architecture CONFIDENTIAL 2012-11-28 4 / 16
Welcome/Load page
My review history Rate current location View results
Add photo or comment View details
Group 1 Blueprint spec
5. 3 Feature Overview CONFIDENTIAL 2012-11-28 5 / 16
3.1 Rate page
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.
Group 1 Blueprint spec
6. 6 / 16
3.2 Results page CONFIDENTIAL 2012-11-28
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.
Group 1 Blueprint spec
7. CONFIDENTIAL 2012-11-28 7 / 16
3.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,
Group 1 Blueprint spec
8. CONFIDENTIAL 2012-11-28 8 / 16
4 Blueprint Specification
4.1 Send review with photo and comments
Group 1 Blueprint spec
9. CONFIDENTIAL 2012-11-28 9 / 16
Group 1 Blueprint spec
10. CONFIDENTIAL 2012-11-28 10 / 16
Group 1 Blueprint spec
11. CONFIDENTIAL 2012-11-28 11 / 16
4.2 View the rating results - usecase 1
Group 1 Blueprint spec
12. CONFIDENTIAL 2012-11-28 12 / 16
4.3 View the rating results - usecase 2
Group 1 Blueprint spec
13. CONFIDENTIAL 2012-11-28 13 / 16
5 Visual style
5.1 Guidelines
Fonts Smileys
• The application uses Helvetica Neue typeface: • 11 smileys that are clearly separatable from each other
Button texts: Helvetica Neue Condensed Bold, All Caps, 8pt
Headings: Helvetica Neue Bold 9pt
Paragraph text: Helvetica Neue Medium 8pt
Color Scheme Logo
• The app uses two different color schemes for displaying rating results: • The local environment logo is
yellow to black for regular users, and green to grey for environmental a simplifyed glass globe with a
experts ratings. 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.
Group 1 Blueprint spec
14. CONFIDENTIAL 2012-11-28 14 / 16
5.2 Application views
The most important views of the app visualized
To be replaced with colored versions
welcome Rating tool Exploring results view details
defines the visual the main purpose seeing interesting data why has a place been
identity of the app of the app from around the world reviewed aGroup 1 Blueprint spec
certain way
15. CONFIDENTIAL 2012-11-28 15 / 16
6 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?
Group 1 Blueprint spec
