The InstaNO2 mobile app proposed a photo-based air quality visual representation to visualize air quality data. The app allowed people to explore the current NO2 level from places they were via an existing habitual behaviour, taking photos. Rather than isolated numbers, photographs visualized the difference between numbers and enabled participants see the severity of air pollution visually, thus it made the air quality data on top of photos understandable.

1. Making The Invisible Visible
Visualising Air Quality In An Understandable Way
Ye Lin
Supervisors: Lorna Wall, Han Pham | 09/2014

2. RESEARCH QUESTION
“How can air quality data
from fixed location sensors be visualised
in an understandable and playful way to
users in a mobile context?”

3. PROCESS
MARCH - MAY JUNE JULY AUGUST SEPTEMBER
Design Iterations
6 London Residents & 1 Beijing Resident 8 London Residents
User Interviews User Experiments
iOS app & website
Development
Literature Review Future Works

4. PROBLEM
SOURCE: Air quality information on London Evening Standard newspaper
Scientific Data Non-scientist
In an understandable and engaging format VISUALISATION

5. AIR POLLUTION
The presence of contaminants or
pollutant substances in the air that
interfere with human health or
welfare, or produce other harmful
environmental effects.
n.
United States Environmental Protection Agency (2007)
1 Nitrogen dioxide (NO2) is
less visible.
!
The forming of air pollution is an
accumulative process.
!
The health effects are hard to be
linked to specific human behaviours.
2
3
Scientific Data Non-scientist
In an understandable and engaging format VISUALISATION

6. 1.Map Based [1] [2]
[1] London Air: http://www.londonair.org.uk/london/asp/PublicEpisodes.asp
[2] Defra: http://uk-air.defra.gov.uk/latest/
[3] London Air App: http://itunes.apple.com/gb/app/london-air/id358970517?mt=8
[3]

7. [2]
1
[3]
Difficult to show
temporal variations
1.Map Based [1]
1
Good to show
spatial variations
Lack motivation
to check the data
2
Explanation text to
visualisations
Available on web
and mobile
2 Hard to read
[1] London Air: http://www.londonair.org.uk/london/asp/PublicEpisodes.asp
[2] Defra: http://uk-air.defra.gov.uk/latest/
[3] London Air App: http://itunes.apple.com/gb/app/london-air/id358970517?mt=8

8. 2.Numeric Data [1]
[2] [3]
[1] The London Marylebone Road AQI: http://aqicn.org/city/united-kingdom/london-marylebone-road/m/hk/&aboutaqi
[2] China Air Quality Index App: https://itunes.apple.com/us/app/china-air-quality-index/id477700080?mt=8
[3] China Air App: https://itunes.apple.com/us/app/chinas-air/id777458271?mt=8

9. 2.Numeric Data [1] [2] [3]
1
Difficult to show spatial
& temporal variations
1
Good to show
current air quality
[1] The London Marylebone Road AQI: http://aqicn.org/city/united-kingdom/london-marylebone-road/m/hk/&aboutaqi
[2] China Air Quality Index App: https://itunes.apple.com/us/app/china-air-quality-index/id477700080?mt=8
[3] China Air App: https://itunes.apple.com/us/app/chinas-air/id777458271?mt=8
Combined with other
kinds of visualisations
2
Use numeric data, colour
blocks, health advice 2
People don’t understand
“moderate” air quality
Use photographs to
add an emotional
connection to data
Use healthy, unhealthy,
understandable words

10. 3.Line Graph [1]
1
InAir [1]!
!
• People were interested to
see spikes in visualisations.
!
• Give users data and let them
decide what to do
Difficult to show
spatial variations
1
Good to show
temporal variations
[1] Kim, S., Paulos, E. & Mankoff, J. (2013). inAir: A Longitudinal study of Indoor Air Quality Measurements and Visualizations. CHI 2013, April 27 – May 2, 2013, Paris, France.

11. Public Usage
People are not aware of the
existing air quality information
Personal!
Usage
Channels:
web, newspaper, mobile app
!
Format:
text, map, numeric data and line graph.
2
Designed based on the low
spatial and/or temporal
resolution data set in cities
1
EXISTING
VISUALISATIONS

12. Public Usage
Personal!
Usage
Channels:
web, newspaper, mobile app
!
Format:
text, map, numeric data and line graph.
People are not aware of the
existing air quality information
2
Designed based on the low
spatial and/or temporal
resolution data set in cities
1
Not well applied to !
a mobile context
3
EXISTING
VISUALISATIONS

13. No personalised
data
1
Didn’t show
temporal variations
2
Didn’t address on
the NO2 pollution
3
Depressing to
check data
4
5 Not playful
EXISTING
MOBILE VISUALISATIONS
[1] [2] [3]
[1] AQ Scotland App: https://itunes.apple.com/en/app/air-quality-in-scotland/id838197830
[2] City Air App: https://itunes.apple.com/gb/app/city-air/id706049131?mt=8
[3] Birkett Index App: https://itunes.apple.com/gb/app/birkett-index/id646281816?mt=8

14. AIR QUALITY INDEX
• AQI is widely used in air quality
visualisations
• Inconsistent between countries
• No standard threshold to define the
healthy and unhealthy levels.
No thresholds of health effects can be
identified (Laden et al, 2006)!
Because people’s susceptibility to pollution levels varies,
and health effects on different people also varies.
The UK AQI:
SOURCE: Laden, F., Schwartz, J., Speizer, F. E., & Dockery, D. W. (2006). Reduction in fine particulate air pollution and mortality - Extended follow-up of the Harvard six
cities study. American Journal of Respiratory and Critical Care Medicine, 173(6), 667-672. doi: Doi 10.1164/Rccm.200503-443oc

15. Policy-defined NO2 limits for cities. !
No standard for citizen exposure is available.
EU
Annual Mean Limit
(Healthy for
general population)
40 μg/m3
EU
Hourly Mean Limit
UK AQI
Low Band
200 μg/m3
(Healthy for
at-risk group)
UK AQI
Moderate Band
200 μg/m3 400 μg/m3
(Not to be exceeded
18 times per year)
COMEAP, Committee on the Medical Effects of Air Pollutants (2011). Review of the UK Air Quality Index, A report by the Committee on the Medical Effects of Air Pollutants.
Retrieved from http://www.hpa.org.uk/webc/HPAwebFile/HPAweb_C/1317137023144
Air Quality Standards from European Commission. Retrieved from http://ec.europa.eu/ environment/air/quality/standards.htm

17. People’s susceptibility to pollution
levels varies!
!
Volumes of pollutants vary temporally.
1
2

18. !
It is difficult to decide on a healthy/unhealthy
volume.

19. !
It is difficult to decide the measured length of the
averaging period.

20. VISUALISATIONS
PLAYFUL
WearAir
Air quality information was visualised not only to the wearer but also to the
people around, which shows the importance of making air quality visualisation
playful and engaging in order to raise the users’ initiative to share the
visualisation with others.
SOURCE: Kim, S., Paulos, E. & Gross, M. (2010). WearAir: Expressive T-shirts for Air Quality Sensing, TEI 2010, January 25–27, 2010, Cambridge, Massachusetts, USA

21. Balloons
Participants were encouraged to
take balloons with them to different
parts of the city to explore air
quality by themselves. They were
interested and surprised to see
changes of air quality and came up
with ideas on why the air quality
was changing regarding to their
behaviours.
VISUALISATIONS
PLAYFUL
SOURCE: Kuznetsov, S., Davis, G., Paulos, E., Gross, M. and Cheung, J. (2011). Red Balloon, Green Balloon, Sensors in the Sky. UbiComp 11, September 17–21, 2011, Beijing,
China.

22. Floating Beijing
SOURCE:Guler, D. & Wang, X. (2012). FLOAT Beijing. Retrieved from http://f-l-o-a-t.com/
Because people were finding it
hard to see the stars in the
Beijing night sky, they visualised
things that people should be
able to see but could not see
due to pollution, and provided a
strong visual contrast.
VISUALISATIONS
PLAYFUL

23. [1]
[2]
[3]
• Simple
visualisations !
!
• Visual contrast!
!
• Playful and
engaging!
!
• Show changes of
AQ data
VISUALISATIONS
PLAYFUL
[1] Kim, S., Paulos, E. & Gross, M. (2010). WearAir: Expressive T-shirts for Air Quality Sensing, TEI 2010, January 25–27, 2010, Cambridge, Massachusetts, USA
[2] Kuznetsov, S., Davis, G., Paulos, E., Gross, M. and Cheung, J. (2011). Red Balloon, Green Balloon, Sensors in the Sky. UbiComp 11, September 17–21, 2011, Beijing, China.
[3] Guler, D. & Wang, X. (2012). FLOAT Beijing. Retrieved from http://f-l-o-a-t.com/

24. [1]
[2]
[3]
• Data from mobile
sensors!
!
• Not quality data
VISUALISATIONS
PLAYFUL
[1] Kim, S., Paulos, E. & Gross, M. (2010). WearAir: Expressive T-shirts for Air Quality Sensing, TEI 2010, January 25–27, 2010, Cambridge, Massachusetts, USA
[2] Kuznetsov, S., Davis, G., Paulos, E., Gross, M. and Cheung, J. (2011). Red Balloon, Green Balloon, Sensors in the Sky. UbiComp 11, September 17–21, 2011, Beijing, China.
[3] Guler, D. & Wang, X. (2012). FLOAT Beijing. Retrieved from http://f-l-o-a-t.com/

25. SENSORS
FIXED LOCATION
LAQN Data Set
Regulatory grade sensors
Sensing London Project
Sensor Cost High cost Lower cost
Data Quality High quality & calibrated High quality & calibrated
Spatial Resolution of Data Low spatial resolution High spatial resolution
Temporal Resolution of Data Low temporal resolution High temporal resolution
LAQN: http://www.londonair.org.uk/LondonAir/Default.aspx
Sensing London project: https://futurecities.catapult.org.uk/project-full-view/-/asset_publisher/oDS9tiXrD0wi/content/project-sensing-london/

26. Reach a wider
audience
PEOPLE
Show changes of !
air quality data
4
Give people air quality
data, and let them
decide what to do
VISUALISATIONS
PLAYFUL
Visual objects, or things that people could not
see because of pollution
Simple &
understandable ways
Interactive lights, and by changing
colours (red, yellow and green),
volumes or by blinking
1
2
Playful and engaging
ways
Not only to the user but to
people around
3
Visual contrast

27. Visual objects, or things that people could not
see because of pollution
Simple &
understandable ways
Interactive lights, and by changing
colours (red, yellow and green),
volumes or by blinking
1
2
Playful and engaging
ways
not only to the user but to people
around
3
Visual contrast Show changes of air
quality data
4
Give people air quality data,
and let them decide what to do
Fit into people’s daily
lives
5
Use habitual behaviours
VISUALISATIONS
REQUIREMENTS

28. PERCEIVED
INDICATORS
Air Quality!
Understandable
PERSONAL!
EXPERIENCE NOTICE POLLUTION
Visual cues,
odours, residue,
health effects
Trigger interests / read more
articles / come up with
solutions to avoid or reduce
pollution
USER INTERVIEWS
FINDINGS

29. Participants
understood the air
quality was bad via
visual cues.
Photographs

30. [2]
[3]
[1]
[1] The Atlantic (2012). A
Stunning Visualization of
China's Air Pollution.
Retrieved from: http://
www.theatlantic.com/
international/archive/2012/07/
a-stunning-visualization-of-chinas-
air-pollution/259455/
[2] China Air Daily: http://
www.chinaairdaily.com/
[3] Guler, D. (2012). FloatPM.
Interactive Art and
Computational Design.
Retrieved from http://
golancourses.net/2012spring/
02/09/deren-guler_
project1_float-pm/
VISUALISATION
PHOTOGRAPHS

31. [2]
[3]
[1]
[1] The Atlantic (2012). A Stunning Visualization of China's Air Pollution.
Retrieved from: http://www.theatlantic.com/international/archive/2012/07/
a-stunning-visualization-of-chinas-air-pollution/259455/
[2] China Air Daily: http://www.chinaairdaily.com/
[3] Guler, D. (2012). FloatPM. Interactive Art and Computational Design.
Retrieved from http://golancourses.net/2012spring/02/09/deren-guler_
project1_float-pm/
1 Used original photos
Addressed on the PM pollution
in Beijing
2
3 No data over photographs
1
Comparison is a key to
help people understand
1) To understand if the current data
2) To understand the trend of air quality
But NO2 is less visible…
VISUALISATION
PHOTOGRAPHS

32. “When I saw the number I can
feel how good or bad the air
quality level will be for today,
because I’m used to it.” (P7)
— A Beijing resident, using the app for two years
Interpret the level of severity
of air pollution to the
experience in real life from
reading the AQI number.
USER INTERVIEWS
FINDINGS
China Air Quality Index App: https://itunes.apple.com/us/app/china-air-quality-index/id477700080?mt=8

33. Make the invisible visible Display data
+
DESIGN
CONCEPT

34. Participants want to see…
Temporal!
Variations
Changes & trends!
in past 10 years?
Spatial!
Variations
!
at my home? !
at my work place?!
in Beijing?
How is the air !
quality at my !
current location?
Health effects? The safe/dangerous level?
Actions can take? Causes?

35. DESIGN
INSTANO2

36. CAMERA!
VIEW
Take a photo
APPLY!
FILTERS
SHARE!
THE PHOTO
MY PHOTO!
STREAM
INSTANO2
MODEL

37. HEALTHY AND UNHEALTHY THRESHOLD
The EU annual mean value of 40 μg/m3
!
INFORMATION:
Numeric data, colour block,
a healthy/unhealthy label
the user’s current location and time
Only NO2 data
INSTANO2
VISUALISATION

38. Origin!
photo
INSTANO2
VISUALISATION
Make the invisible visible via photographs
Adjust the appearance of the photograph based on the air quality data

39. INSTANO2
CAMERA VIEW
Take a photo to explore air quality
The current NO2 level at the current location

40. INSTANO2
LOCATION FILTER
Compare the current air quality data with OTHER PLACES: Places that
people are familiar with, such as places in London, major cities in the UK, capital cities in Europe and
over the world.

41. INSTANO2
TIME FILTER
Compare the current air quality data with HISTORICAL DATES: Yesterday,
last week, last month, the same day in past months of this year, and the same date in past years.

42. INSTANO2
SHARING
1
Talk and share air quality data
2 3
Social media Photos collection website My Places

43. Real time air quality
data at places,!
home, work places,
places people
passing by everyday.
Motivate people to
check air quality
Like checking
weather at places
INSTANO2
MY PLACES

44. Experimental area, LAQN data set, low spatial and temporal
resolution
Take six pictures using the app
Participants were encouraged to go anywhere
they liked to and the task was to take six
pictures using the app.
USER EXPERIMENTS
DESIGN

45. USER EXPERIMENTS
FINDINGS
“ Places participants went to
Main streets!
Took photos with lots of traffic, especially with buses, expecting to see
poor air quality.
Places they went to everyday!
Gyms where they swam, streets they frequently walked on, shops where they
grabbed sandwiches, cafes where they had lunch and parks where they
relaxed. To understand the air quality they were exposed to every day.
Places they’ve never been to!
Cafes and hospitals nearby, to check whether they should go there in the future,
to explore good spots to go to.
1
2
3

46. USER EXPERIMENTS
FINDINGS
“
Places where they would like to use the app
1
2
3
Home and work/study places!
Check air quality frequently
!
Places with lots of traffic and people!
Oxford Street and Regent Street.
!
Tourist places!
River Thames and Kew Garden. These were places where they
would usually take pictures and by using the app, they could also
check if the air quality was good or bad there.

47. USER EXPERIMENTS
FINDINGS
“People like taking photos. It’s easy to do.” (E3)
“I like the camera interface. Users don’t have to
learn a new interface.” (E4)
The app was easy to use. Participants were using the app just like
using other camera apps.

48. USER EXPERIMENTS
FINDINGS
“I think colour is enough to represent the current air quality. But photos
made it more real, and give you a sense of how good or bad it
might affect you. When I see the current picture applied with a poor air
quality filter, I feel dirty and a little uncomfortable, and I want to move
away from that place soon.” (E5)
Photographs visualised the effects of air pollution that could
affect him.

49. USER EXPERIMENTS
FINDINGS

50. USER EXPERIMENTS
FINDINGS

51. Location filters
Understand the spatial variations
of air quality
• Search function
• Photo collage
USER EXPERIMENTS
FINDINGS

52. Time filters
“I noticed the air quality is far
better in the winter.” (E7)
• Understand temporal variations
of air quality
• Reflect in humorous ways
USER EXPERIMENTS
FINDINGS

53. Pre-study interviews During Experiments
Depressing to check data Participants reflected in humorous ways!
Have no idea how air quality
data looks like
even when they were facing poor air quality.
The app sparked curiosity, triggered
exploration and raised awareness
Participants thought and talked about what air quality
meant, where the pollution came from, what might
change the air quality and why it was changing. They
also asked for more explanations about the data,
expressed their own initiative to interpret and explore
the data further to learn more.
USER EXPERIMENTS
FINDINGS

54. Data is lacking regarding
physical locations and not
dynamic.
Experimental area, LAQN data set, low spatial and temporal
resolution
Difficult to show changes
DESIGN
CHALLENGES

55. DESIGN
CHALLENGES
SENSOR 1 SENSOR 2
27 110
CHANGES 1:!
Participants can see changes of data when walk in between sensors!
Data source changes from one sensor to the other.

56. CHANGES 2:
On camera view, show a more dynamic data
by adding a random variation on data.
Data from the
nearest sensor
Data varies by a range of
10 by every 4 seconds
X [X, X+10]
100 [100, 110]
55 [55, 65]
DESIGN
CHALLENGES

57. USER EXPERIMENTS
FINDINGS
One participant
lost interest
using the app
Need a higher
spatially dense
data set
DESIGN OPPORTUNITY
Request Sensors!
The app says data not
available, or that the nearest
sensor is 5 miles away, the
user could press a button and
request city authorities to
deploy sensors in that area.
DESIGN OPPORTUNITY
Use computer vision!
!
Recognise the content in the photo,
and adjust NO2 levels based on
numbers of cars, buses, etc..
Because he noticed the low
spatially dense data set,
changes in data didn’t
match with his expectations

58. Public
Usage
Personal Usage
More customisation
PUSH
• Search function for locations, make photo collages using the app.
• Highlight key event dates in the time filters, such as the
introduction of the congestion charge in London.
More spatially dense data set
INSTANO2
FUTURE WORKS
Air Quality Data
from fixed location sensors
Users
• More rational spikes can be seen from the data.
A longer experiment
• to learn about their motivations to check air quality data
and their behaviour changes.
1
2
3

59. Public Usage
Personal
Usage
GENERATE
INSTANO2
FUTURE WORKS
1 User usage data (time/location data)
Air Quality Data
from fixed location sensors
PUSH Users
2 Photo-based data
USE
Other stakeholders, such as city officials

60. Public Usage
Personal
Usage
1 User usage data (time/location data)
Data to city
officials
Where
Where citizens
are interested to
see air quality
data
When
When people are
using the app
Who
Who these users
are
Locations
where air quality
sensors are
needed.
Timing
when air quality data
needs to be pushed to
the users..
Target Group
to whom air quality is
important.
INSTANO2
FUTURE WORKS

61. Public Usage
Personal
Usage
INSTANO2
FUTURE WORKS
2 Photo-based data
add value to numerical data from the sensors
Photos Photos collection
• #searchable
• sharable
• contextual
• Visualisation of London’s air quality
• Crowdsourced insights from citizens
• To learn citizens’ conversations about
air quality

63. Visualisation of London’s air quality!
Crowdsourced insights from citizens
To learn citizens’ conversations about air quality

64. Thanks!
Q&A?
Ye Lin
Supervisors: Lorna Wall, Han Pham | 09/2014