-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathons-interaction-design.html
140 lines (129 loc) · 8.78 KB
/
ons-interaction-design.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
<!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 a Senior Interaction Designer (UX) Digital 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</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">ONS Design System</a></li>
<li class="list__item"><a href="business-register-ui/home.html" class="link-primary-standalone" target="blank">Business Register Prototype</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 and responsibilities</a></li>
<li class="list__item"><a href="#section2">ONS Design System</a></li>
<li class="list__item"><a href="#section3">ONS Business Register</a></li>
</ol>
<div class="seperator u-mt-l"></div>
</section>
<section>
<div class="ds-para">
<a id="section1"></a>
<h2 class="u-mt-l u-fs-xl">Background and responsibilities</h2>
<p class="u-fs-body">I worked within agile, multi-disciplined teams to design user focussed software for projects such as the ONS Business Register, 2021 Census and Electronic Data Collection digital transformation.</p>
<p class="u-fs-body">I was responsible for translating and driving through findings from user research and testing into design concepts and interactive prototypes. I worked closely with development teams to ensure design was implemented correctly and met web accessibility standards.</p>
<p class="u-fs-body">I was part of the wider design community within ONS, partnering with colleagues to facilitate a consistent user experience across services and contributed to the development of a design system and style guide.</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">ONS Design System</h2>
<p><a href="https://ons-design-system.netlify.app/" class="link-primary-standalone" target="blank">https://ons-design-system.netlify.app/</a></p>
<p class="u-fs-body">I was part of a wider team of designers and front end developers who contributed to the creation of the ONS design system.</p>
<p class="u-fs-body">I was integral in the development of the templates, setting typographic scales and developing the form components. Each designer was responsible for testing spcific components and patterns within the services they were working on which contributed to the development of the design system from a users perspective.</p>
<p class="u-fs-body">I took part in monthly workshops run by the internal design team during the development process.</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">A superbly rewarding workshop with the team today working on making our UX patterns consistent and refined. Thanks to all that came along. <a href="https://twitter.com/leahvardon?ref_src=twsrc%5Etfw">@leahvardon</a> <a href="https://twitter.com/RhodGriffith?ref_src=twsrc%5Etfw">@RhodGriffith</a> <a href="https://twitter.com/mr_nicething?ref_src=twsrc%5Etfw">@mr_nicething</a> and <a href="https://twitter.com/nicprice?ref_src=twsrc%5Etfw">@nicprice</a> you are all awesome 👏🏻 <a href="https://t.co/DjLm5k5a2x">pic.twitter.com/DjLm5k5a2x</a></p>— Ben Armstrong (@wiredimage) <a href="https://twitter.com/wiredimage/status/987032854268923909?ref_src=twsrc%5Etfw">April 19, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<img src="img/ds-temps.jpg" alt="sketch templates" class="u-mb-xs u-mt-s">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> design system template development in Sketch</p>
<img src="img/pagination.jpg" alt="pagination" class="u-mb-xs u-mt-s">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> design system component development in Sketch</p>
</div>
</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">ONS Business Register</h2>
<p class="u-fs-body">The ONS Business Register was an internal legacy uplift project within ONS to replace the current Inter-Departmental Business Register (IDBR). The register is a comprehensive list of UK businesses used by government for statistical purposes. It provides the main sampling frame for surveys of businesses carried out by ONS and other government departments. It is also an important data source for analyses of business activities.</p>
<p class="u-fs-body">The two main sources of input are VAT and PAYE records from HMRC. Additional information comes from Companies House, Dun and Bradstreet and ONS business surveys. The register covers around 2.7 million businesses in all sectors of the economy.</p>
<h3 class="u-fs-m u-mt-m">Project discovery</h3>
<p class="u-fs-body">During the discovery phase of the project, there were key questions we needed to answer.</p>
<ol class="list u-mt-s">
<li class="list__item">Which other internal business services would the register interact with?</li>
<li class="list__item">Who were the current users of the business register and what did they do?</li>
<li class="list__item">How could we improve the register for our current users?</li>
</ol>
<p class="u-fs-body u-mb-m">To answer the above, I conducted in depth research with internal users and stakeholder. Typical activities included facilitating workshops, surveys, interviews, user persona development, mapping pain points on the current user journey.</p>
<img src="img/br-workshop.jpg" alt="workshop" class="u-mb-xs">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> workshop to identify key interactions with other internal services</p>
<img src="img/workshop-idbr.jpg" alt="workshop" class="u-mb-xs u-mt-s">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> workshop with users to identify what was good/bad about the current business register.</p>
<img src="img/idbr-map.jpg" alt="workshop" class="u-mb-xs u-mt-s">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> findings were mapped on along the user journey</p>
<img src="img/personas.jpg" alt="workshop" class="u-mb-xs u-mt-s">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> user personas created</p>
<h3 class="u-fs-m u-mt-m">Designing the Business Register</h3>
<img src="img/workshop-sbr.jpg" alt="workshop" class="u-mb-xs u-mt-xs">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> workshops conducted with internal teams</p>
<img src="img/sbr-sketch.jpg" alt="workshop" class="u-mb-xs u-mt-xs">
<p class="u-fs-body u-mb-m"><strong>Above:</strong> designs were developed and iterated during sprints</p>
<p class="u-fs-body u-mb-m"><a href="business-register-ui/home.html" class="link-primary-standalone" target="blank">HTML prototypes</a> were developed and tested with users in the user testing lab.</p><br><br>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript" src="../js/focus.js"></script>
</body>
</html>