-
Notifications
You must be signed in to change notification settings - Fork 0
/
case-study-cbc.html
116 lines (83 loc) · 6.75 KB
/
case-study-cbc.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
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BZQWJ07CQL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BZQWJ07CQL');
</script>
<title>Rob McCarthy - Interaction Designer</title>
<link href="./style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f2082d0580.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
</head>
<body>
<a name="top"></a>
<!-- header -->
<div id="header">
<!-- logo -->
<div id="header-container">
<a class="logo" href="./index.html">Rob McCarthy</a>
<!-- main navigation -->
<a class="linkone" href="./blog.html">Blog</a>
<a class="linktwo" href="./index.html">Home</a>
</div>
</div>
<!-- body -->
<div class="profile-text">
<h1 class="profile">Improving the customer experience of self-serve transactions at local government level.</h1>
</div>
<div id="profile-picture">
<img class="rob-profile" src="./images/cs-cbc-1.jpg">
</div>
<div class="profile-text">
<h3 class="profile-heading">The challenge</h3>
<p class="profile"><a href="https://www.colchester.gov.uk/">colchester.gov.uk</a> serves 185,000 residents each week in carrying out many self-serve transactions, inc; reporting missed bins, paying council tax, reporting anti-social behaviour, + many more!</p>
<p class="profile">In 2016, Colchester Borough Council made a move away from a previous website supplier which led to a rapid program of in-house design and development. During that time of speedy digital transformation, consideration for quality assurance, usability, web standards, accessibility, and user experience, was heavily sacrificed for speed of delivery.</p>
<p class="profile"><strong>My role(s):</strong> Digital Project Manager, Digital Designer</p>
<p class="profile"><strong>Project length:</strong> 18 months</p>
<h3 class="profile-heading">The project</h3>
<p class="profile">With such a vast programme of work being delivered in such a short period of time, there were a number of issues with the website, notably to the usability and UX. But with 70 different service areas, 5,000+ web pages, and 4,500 inaccessible PDFs - where do you start?</p>
<p class="profile">I needed to bring stakeholders along the journey I was proposing. I was keen for the Council to move away from the 'big bang' approach to website design. Rather than rip up what had been done and go on a 2 year+ crusade to design and develop a new site, I suggested that we approach the project in an iterative manner.</p>
<p class="profile">This iterative manner began by highlighting patterns across the site; recurring page types, transactions, processes, and user journeys. Improving these patterns would make highly noticeable changes to the website. We also analysed customer feedback in combination with website analytics, so we could prioritise (a) where the most pain for customers was, (b) where the most pain/contact was for the organisation, and (c) where improvements would have the biggest impact - this created our roadmap.</p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-2.jpg">
</div>
<p class="caption"><strong><i>Customer feedback</strong><br>Feedback was measured at 90% negative for CX</i></p>
<p class="profile">A pattern library was developed in order to create much needed consistency that was not previously present. As an example, during a review of the website, we recorded 15 different action styles (buttons and links) on a single page - this inconsistency in usability results in customers having to work extremely hard to know where to interact with the site.</p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-3.jpg">
</div>
<p class="caption"><strong><i>Pattern library</strong><br>Self-serve transactions and processes</i></p>
<p class="profile">We consciously and blatantly took inspiration from the Gov.uk design system which GDS actively encourage. Central Government have spent a lot of time and money to create a design system (and service language) that meet the needs of customers. Rather than ignore their learnings and start again, we intelligently used the Gov.uk design system to inform our own.</p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-4.jpg">
</div>
<p class="caption"><strong><i>Pattern library</strong><br>Notices, updates, and messages</i></p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-6.jpg">
</div>
<p class="caption"><strong><i>Pattern library</strong><br>Cards, confirmation messages, and subscriptions</i></p>
<p class="profile">This pattern library has improved the usability of many self-serve transactions as well as drive improvements to the web templates used for presenting information to customers. A number of landing pages, series and content pages have been created to roll out to the 5,000+ pages on colchester.gov.uk as part of the overall implementation roadmap.</p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-8.jpg">
</div>
<p class="caption"><strong><i>Page template</strong><br>Home page</i></p>
<div id="profile-picture">
<img class="picture" src="./images/cs-cbc-9.jpg">
</div>
<p class="caption"><strong><i>Page template</strong><br>Services listing page</i></p>
<h3 class="profile-heading">What was learnt?</h3>
<p class="profile">With 70 different service areas, this project had 70 different stakeholders. This was a lot to manage but I learnt the importance of having a roadmap laid out at the start, not only to communicate the stages of implementation, but to also communicate the overall strategy, vision and goal of the project. In addition to a roadmap, we also defined a set of digital principles that we would ensure the project adhered to.</p>
<p class="profile">With the roadmap and principles created, we were able to communicate and involve the project stakeholders whilst managing their input carefully. This has been so important on this project due to the scale and breadth of the Council’s different service areas.</p>
<h3 class="profile-heading">More case studies</h3>
<p class="profile"><a href="./case-study-w4p.html"><strong>Product design</strong></a><br>Rebuilding the UK Pub industry's leading specialist website builder.</p>
</div>
<div class="arrow-icon"><a class="arrow-icon-hover" href="#top"><img src="back-to-top.svg"></a></div>
</body>
</html>