-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathons-data-vis.html
181 lines (165 loc) · 12.3 KB
/
ons-data-vis.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Rhodri Griffith – User Experience Designer</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" href="css/master.css" media="all">
</head>
<body>
<header>
<div class="navbar">
<div class="ds-hero" id="navbar">
<div class="container container--wide">
<div class="grid">
<div class="grid__col col-3@m">
<a href="index.html"><img src="img/rg-logo.svg" class="lexis-icon" alt="Rhodri Griffith – User Experience Designer"></a>
</div>
<div class="grid__col col-9@m">
<div class="topnav">
<div class="topnav-right">
<a href="index.html" class="active">Portfolio</a>
<a href="about-me.html">About me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="main">
<div class="container container--wide">
<nav aria-label="Breadcrumb" class="u-mt-l">
<ol class="breadcrumb">
<li><a href="index.html">Portfolio</a></li>
<li class="bc-active">Office for National Statistics</li>
</ol>
</nav>
<section>
<div class="ds-para">
<h1 class="u-mt-l u-fs-xxxl">Office for National Statistics</h1>
<p class="u-fs-s">Case studies and work examples from my role as the Digital Design Lead within the Data Journalism Team at ONS.</p>
</div>
<div class="seperator u-mt-l"></div>
</section>
<section>
<p class="u-fs-m u-dark u-fw-600 u-mt-l">Key projects (external links)</p>
<ol class="list list--bare u-mt-s">
<li class="list__item"><a href="https://www.ons.gov.uk/visualisations/dvc514/worldmap/index.html" class="link-primary-standalone" target="blank">UK trade in goods</a></li>
<li class="list__item"><a href="https://www.ons.gov.uk/visualisations/dvc473/index.html" class="link-primary-standalone" target="blank">Unpaid work calculator</a></li>
<li class="list__item"><a href="https://www.ons.gov.uk/visualisations/dvc384/explorer/index.html" class="link-primary-standalone" target="blank">Gender pay gap</a></li>
<li class="list__item"><a href="https://www.ons.gov.uk/visualisations/dvc413/barcodes/barcode/index.html" class="link-primary-standalone" target="blank">Healthy life expectancy</a></li>
</ol>
<div class="seperator u-mt-l"></div>
</section>
<section>
<p class="u-fs-m u-dark u-fw-600 u-mt-l">Page contents</p>
<ol class="list list--bare u-mt-s">
<li class="list__item"><a href="#section1">Background</a></li>
<li class="list__item"><a href="#section2">Responsibilities</a></li>
<li class="list__item"><a href="#section3">Work examples</a></li>
<li class="list__item"><a href="#section4">Key results and achievements</a></li>
</ol>
<div class="seperator u-mt-l"></div>
</section>
<section>
<div class="ds-para inline-code">
<a id="section1"></a>
<h2 class="u-mt-l u-fs-xl">Background</h2>
<p class="u-fs-body">Between 2015-2017, I worked as the Digital Design Lead within the Data Journalism team at ONS, managing a team of six designers. The team also included developers and data journalists – I reported to the head of data visualisation.</p>
<p class="u-fs-body">The newly formed Data Journalism Team was initially and experiment, created to challage stakeholders perception within the business that our users wated to consume technical statistical releases in PDF format only.</p>
<p class="u-fs-body">We worked closely with statistical areas within the business to create content for a different audience that didn't want to consume statistical information in the traditional way. We published out content on the <a href="https://webarchive.nationalarchives.gov.uk/20171212151900/https://visual.ons.gov.uk/">Visual.ONS</a> and worked closeley with media organisations to syndicate our content giving us much further impact and reach.</p>
<p class="u-fs-body">Visual.ONS was a huge success, consistently outperforming our traditional ways of disseminating information in terms of website hits and reach. Visual.ONS is now part of the national archives and this type of content is regularly published on the main <a href="https://ons.gov.uk/">ONS website</a>.</p>
</div>
</section>
<div class="seperator u-mt-xl"></div>
<section>
<div class="ds-para">
<a id="section2"></a>
<h2 class="u-mt-l u-fs-xl">Responsibilities</h2>
<p class="u-fs-body">As the Digital Design Lead, I was responsible for coordinating the production of design work across a range of digital and media. I led a team of designers who provided design work for the ONS website, Visual ONS website and social media channels. I worked closely with the Head of Data Visualisation and the Visual Journalism Manager to deliver a range of products that connected ONS data with its users in new innovative and creative ways.</p>
<p class="u-fs-body">I was also responsible and managing the ONS brand during this period, regularly providing expertise and design work for more traditional print channels.</p>
</div>
</section>
<div class="seperator u-mt-l"></div>
<section>
<div class="u-mb-m">
<a id="section3"></a>
<div class="ds-para inline-code">
<h2 class="u-mt-l u-fs-xl">Work examples</h2>
<h3 class="u-fs-m u-mt-m">UK trade in goods</h3>
<p><a href="https://www.ons.gov.uk/visualisations/dvc514/worldmap/index.html" class="link-primary-standalone" target="blank">https://www.ons.gov.uk/visualisations/dvc514/worldmap/index.html</a></p>
<p class="u-fs-body">An interactive data visualisation to explore the UK trade in goods with 234 countries by 125 commodities.</p>
<p class="u-fs-body">Visualising the data in this way allowed users to gain a better understanding of what goods the UK traded with other countries and trends over time. The barcode plot was an effective way of displaying all the import and export data in one chart while prividing the ability to highlight individual values to see how countries compared.</p>
<p class="u-fs-body u-mb-l">I explored the best way to present the data, developed the visual design and coordinated the build and publishing process with the development team.</p>
<h3 class="u-fs-m u-mt-m">Unpaid work calculator</h3>
<p><a href="https://www.ons.gov.uk/visualisations/dvc473/index.html" class="link-primary-standalone" target="blank">https://www.ons.gov.uk/visualisations/dvc473/index.html</a></p>
<p class="u-fs-body">The idea behind the calculator was to enable users to explore how much money they could earn if someone paid them to carry out their everyday tasks such as cooking, cleaning, ironing and volunteering.</p>
<p class="u-fs-body">Using 2016 data on earnings, I was able to estimate how much money you could earn for doing these tasks if you could only find someone to pay you.</p>
<p class="u-fs-body u-mb-l">I was responsible for the concept development, visualisation, design and coordinating development.</p>
<h3 class="u-fs-m u-mt-m">Gender pay gap</h3>
<p><a href="https://www.ons.gov.uk/visualisations/dvc384/explorer/index.html" class="link-primary-standalone" target="blank">https://www.ons.gov.uk/visualisations/dvc384/explorer/index.html</a></p>
<p class="u-fs-body">Interactive data visualisation to explore the gender pay gap by occupation. I chose a dot plot chart to show the distribution and gap in pay. I was responsible for the design, visualisation and coordinating development.</p>
<h3 class="u-fs-m u-mt-m">Healthy life expectancy</h3>
<p><a href="https://www.ons.gov.uk/visualisations/dvc413/barcodes/barcode/index.html" class="link-primary-standalone" target="blank">https://www.ons.gov.uk/visualisations/dvc413/barcodes/barcode/index.html</a></p>
<p class="u-fs-body">Data explorer comparing healthy life expectance in areas across England.</p>
<p><a href="https://www.ons.gov.uk/visualisations/dvc413/sliders/smoking/index.html" class="link-primary-standalone" target="blank">https://www.ons.gov.uk/visualisations/dvc413/sliders/smoking/index.html</a></p>
<p class="u-fs-body">Interactive illustrating what could happen to an area's healthy life expectancy if the number of smokers changed.</p>
<h3 class="u-fs-m u-mt-m">Travel trends</h3>
<p class="u-fs-body">Slope chart showing the number of visits the the UK by country and their spending.</p>
</div>
<div class="grid">
<div class="grid__col col-12@m">
<img src="img/travel-trends.jpg" alt="Travel trends inforgaphic">
</div>
</div>
<div class="grid">
<div class="grid__col col-12@m">
<h3 class="u-fs-m u-mt-m">Tourism in London</h3>
<img src="img/travel-trends-infographic.jpg" alt="Travel Trends infographic">
</div>
</div>
<div class="grid">
<div class="grid__col col-12@m">
<h3 class="u-fs-m u-mt-m">Economic activity of the migrant population</h3>
<img src="img/migrant-population.jpg" alt="Migration inforgraphic">
</div>
</div>
<div class="grid">
<div class="grid__col col-12@m">
<h3 class="u-fs-m u-mt-m">Social media graphics</h3>
<div class="ds-para inline-code">
<p class="u-fs-body">I developed a visual style and icon library for social media graphics which is still used to this day. This was documented in a <a href="https://onsdigital.github.io/dp-design-manual/social-media/twitter/twitter_templates" class="link-primary-standalone" target="blank">style guide</a> published on github.
</div>
<img src="img/cd-2.jpg" alt="travel trends"><br><br>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Busy creating social media templates this afternoon, adding guidance to the Digital Publishing Design Manual next <a href="https://t.co/sZMHAfYyIy">pic.twitter.com/sZMHAfYyIy</a></p>— Rhodri Griffith (@RhodGriffith) <a href="https://twitter.com/RhodGriffith/status/888409290851196928?ref_src=twsrc%5Etfw">July 21, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</section>
<div class="seperator u-mt-l"></div>
<section>
<div class="u-mb-xl">
<a id="section4"></a>
<div class="ds-para inline-code u-mb-xl">
<h2 class="u-mt-l u-fs-xl">Key results and achievements</h2>
<h3 class="u-fs-m u-mt-m">Impact and reach</h3>
<p class="u-fs-body">My design work was regularly used by the wider media (Guardian, BBC) in their story-telling, often reaching a wide and varied audience.</p>
<p class="u-fs-body u-mb-m">The unpaid work calculator received 50,000 unique hits within the first 24 hours of publishing and was used live on the Victoria Derbyshire on BBC1.</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">that's brilliant!</p>— Rob Fry (@fryford) <a href="https://twitter.com/fryford/status/797065282988756994?ref_src=twsrc%5Etfw">November 11, 2016</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h3 class="u-fs-m u-mt-m">Conferences and training</h3>
<p class="u-fs-body">I regularly spoke at conferences about data visualisation best practices and ran the internal training course at ONS with a group of other data visualisation designers. Often presented bilingually!</p>
<blockquote class="twitter-tweet"><p lang="cy" dir="ltr">Rhodri Griffith <a href="https://twitter.com/ONS?ref_src=twsrc%5Etfw">@ons</a> delights us all with quirky infographics. Mwy dda i wrando yn Ngymraeg <a href="https://twitter.com/hashtag/digwyddiaddwyieithog?src=hash&ref_src=twsrc%5Etfw">#digwyddiaddwyieithog</a> <a href="https://twitter.com/hashtag/commscymru?src=hash&ref_src=twsrc%5Etfw">#commscymru</a> <a href="https://t.co/aLIBRjJSbh">pic.twitter.com/aLIBRjJSbh</a></p>— Emma Kirsty (@emmawolski) <a href="https://twitter.com/emmawolski/status/796693446987751425?ref_src=twsrc%5Etfw">November 10, 2016</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</section>
<br>
<br>
</div>
</div>
<script type="text/javascript" src="../js/focus.js"></script>
</body>
</html>