-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcase-study-calendar.html
187 lines (141 loc) · 11.5 KB
/
case-study-calendar.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
182
183
184
185
186
187
<!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">Providing online, user-friendly, and accessible recycling calendars for all.</h1>
</div>
<div id="profile-picture">
<img class="rob-profile" src="./images/calendar-image-1.jpg">
</div>
<div class="profile-text">
<h3 class="profile-heading">The challenge</h3>
<p class="profile">Colchester Borough Council provides recycling and rubbish collections for 85,000 properties. Collections are complicated with properties being on a number of different routes, resulting in complex collections for different households on different days and different weeks.</p>
<p class="profile"><strong>My role(s):</strong> Designer and Project Lead<br><strong>Project length:</strong> 6 months</p>
<p class="profile">As a self initiated project, I was leading a team to improve usability, accessibility, and customer experience across colchester.gov.uk. Our team identified the recycling calendar as being one of the top drivers of traffic to the website, making it a priority for us to improve.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-2.jpg">
</div>
<h3 class="profile-heading">The starting point</h3>
<p class="profile">For the past 5+ years, Colchester residents have received their recycling calendars through the post or as a downloadable PDF via colchester.gov.uk.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-3.jpg">
</div>
<h3 class="profile-heading">Problems identified</h3>
<p class="profile">
<ul>
<li>Print and postage of 45,000 calendars costing the Council in excess of £50,000 per year.</li>
<li>To use the calendar, residents needed to know their collection day and what collection week they are on. Without that knowledge, residents could not use the calendar.</li>
<li>Residents were required to correspond their collection week (blue or green) with a key on the calendar so they know what items to put out for collection.</li>
<li>Residents could request an audio version of the calendar but this was upon request, and took months to be provided.</li>
<li>The calendar was failing 20,000 households as it did not fit their collection days or weeks.</li>
</ul>
</p>
<h3 class="profile-heading">Using data and research to inform decisions</h3>
<p class="profile">We used a combination of quantatative and qualatative data sources to help us make decisions during the project, including:</p>
<p class="profile">
<ul>
<li>Route and address data.</li>
<li>Information on households served and not served by the current calendar capability (e.g. the most complex collection was analysed where an address received black bag and food waste collections on a Tuesday, paper and card on a Thursday and garden waste on a Friday, followed by the second week being food waste on a Tuesday, plastic and glass/cans on a Wednesday).</li>
<li>Customer feedback provided through an online complaints and comments form.</li>
<li>Customer feedback provided through telephony and captured and stored in a CRM.</li>
</ul>
</p>
<h3 class="profile-heading">Prototyping</h3>
<p class="profile">By analysing the gathered data and research to inform ideation, storyboards, and initial designs were developed to create a prototype of a digital recycling calendar.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-4.jpg">
</div>
<p class="profile">Internally within the project team, and with service representatives, we discussed and critiqued the work. An early decision was made that the only way the calendar could work for all residents was if the calendar was informed by the route and address data.</p>
<p class="profile">As we weren't sure if we had the inhouse capabilities to deliver complex and bespoke development, a minimal working prototype was developed to test ours, and the route and address data capabilities. This ensured that minimal time was spent before taking the project further.</p>
<p class="profile">I worked with the developer and data specialist to lead an integration with the services route data supplier at a one-off-cost of £1,100. This integration reduced the need for any future manual uploading of the route and address database, and reflected any changes to routes or addresses within a 2 hour timeframe - resulting in accurate calendars for all residents at all times.</p>
<h3 class="profile-heading">UI & UX</h3>
<p class="profile">Once the integration was completed, work on the hi-fidelity prototype began. The UI for the calendar was developed using a design system that we were using to redevelop the entire colchester.gov.uk website. This created consistency, and ensured any future UI improvements could easily and speedily be rolled out across the entire website.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-5.jpg">
</div>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-6.jpg">
</div>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-7.jpg">
</div>
<h3 class="profile-heading">Key UI and UX decisions</h3>
<p class="profile">
<ul>
<li>Enable the resident to lookup their calendar with minimal upfront knowledge and information.</li>
<li>Display the residents address when viewing the calendar to provide the customer with reassurance.</li>
<li>Display the day, date and items for collection in an easy-to-view format (enabling a quick glance).</li>
<li>Provide future collection dates so residents can look ahead and plan for holidays.</li>
<li>Enable residents to download a PDF of their calendar without a reliance on colour printing.</li>
</ul>
</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-8.jpg">
</div>
<h3 class="profile-heading">Printing calendars for those who need it</h3>
<p class="profile">An early decision was made to create a digital calendar that would provide all residents with accurate and up-to-date calendars, meet accessibility and usability needs, and reduce cost for the organisation.</p>
<p class="profile">However, we were aware that to create a completely inclusive calendar, we needed to cater for all. Some residents in Colchester do not have access to a computer and relied on printed calendars being posted out to them.</p>
<p class="profile">To address this, I worked with our developer and CSC team to translate the digital calendar into a PDF (still informed by the same up-to-date route and address data), which the CSC could download and use in combination with a database of approximately 3,000 customers known to require printed calendars.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-9.jpg">
</div>
<p class="profile">Residents could also download an A4 sized PDF when viewing their digital calendar, as we were aware from customer feedback that it was common practice for residents to 'print and pin' their calendar to their fridge.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-10.jpg">
</div>
<h3 class="profile-heading">Iteration</h3>
<p class="profile">I was aware that this was a drastic and wholesale change to how Colchester Borough Council provided recycling calendars to more than 85,000 households.</p>
<p class="profile">Such a drastic change in behaviour was a concern for both the service and the project team so I decided that we would introduce a 'Beta banner' into the digital calendar process, enabling customers to provide feedback. We could then analyse and address any concerns provided by customers.</p>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-11.jpg">
</div>
<div id="profile-picture">
<img class="picture" src="./images/calendar-image-12.jpg">
</div>
<h3 class="profile-heading">Future improvements and enhancements</h3>
<p class="profile">
<ul>
<li>Change the layout of how the collection information is shown so there is not a need for tables. Even simple HTML tables can be difficult for screen readers.</li>
<li>Enable residents to sign-up for email or SMS reminders. Initial investigations have begun, and functionally it's viable, but costs for SMS reminders may be prohibitive.</li>
</ul>
</p>
<h3 class="profile-heading">Challenges throughout the project</h3>
<p class="profile">The biggest challenge we faced was that the waste and recycling service is a political hot potato in local authorities, and we wanted to keep politics (uppercase and lowercase) from negatively effecting the end result of a usable and accessible calendar targetted at meeting the needs of residents.</p>
<p class="profile">To address this, we delivered at pace which meant we were at a point of delivery before the politics could creep in. We also had in our back pocket the data to show that 20,000 households were not being serviced with the existing calendar, and with a ready-to-go digital calendar, we had a solution that served all residents.</p>
<p class="profile">Lastly, we were openly and vocally approaching this in an iterative manner with a clear mindset that this was a phase 1, and we would improve and change the calendar based on customer feedback gathered after delivery.</p>
<h3 class="profile-heading">The result</h3>
<p class="profile">On reflection, I made a complex problem, simple. I saved the organisation £50,000 per year, and most importantly, I helped to deliver an inclusive service that works for every household in Colchester.</p>
<h3 class="profile-heading">More case studies</h3>
<p class="profile"><a href="./case-study-cbc.html"><strong>Creating consistency</strong></a><br>Improving the customer experience of self-serve transactions at local government level.</p>
</div>
<div class="arrow-icon"><a class="arrow-icon-hover" href="#top"><img src="back-to-top.svg"></a></div>
</body>
</html>