ETSWAP (Emissions Trading Scheme Workflow Automation Project) is a web-based application operated by the UK Environment Agency for emitters to manage their emissions of Carbon Dioxide as required by the EU Emissions Trading Scheme. The brief was to prototype key screens and show a simpler and easier user journey. It's also required to be in line with GDS style to build an alpha service.

Service transformation to GDS standard

Don't let a 20 years old IT system ask users Yes or No questions.

Users are from organisations who work at construction sites or aviation facilities. They need to open their accounts first before they can report emissions in ETSWAP. Questions on the forms were not grouped nor ordered in a way that makes sense to users.

Toni uses her analytical thinking to tackle this kind of 'operation driven design'. Data audit and information architecture analysis were carried out, aiming to break them down into small pieces of information.

Next design task was to assemble each attribute of data into small groups that users can understand why they need to fill in and know what to do next. Those user experience patterns were used throughout the whole website.

Design process followed:

1. Audit user flows and site flows as is
2. Understand why users will need each item of information
3. Refine a question protocol
4. Restructure forms
5. Create new user flows
6. Sketch key templates
8. Prototype in GDS guidelines
9. Validate

DEFRA-etswap-prototype_Page_03
DEFRA-etswap-prototype_Page_04
DEFRA-etswap-prototype_Page_05
DEFRA-etswap-prototype_Page_06

Prototype in code

Validate design with end users.

The prototype was to test a new journey from opening a new account to reviewing an application for a permit.

Username: toni-kim
Password: 2341

ETSWAP-1-Start
ETSWAP-2-End

login screen before and after

ETSWAP-3-Old-Sign-In
ETSWAP-4-New-Sign-In

My Work Queue screens before and after

ETSWAP-5-Old-My-Work-Queue-1
ETSWAP-5-Old-My-Work-Queue-2
ETSWAP-6-New-My-Work-Queue

My tasks and workflow screens before and after

ETSWAP-7-Old-My-Tasks
ETSWAP-7-Old-My-Tasks-2
ETSWAP-8-New-My-Tasks

Operator details form component before and after

ETSWAP-9-Old-Opperator-Details
ETSWAP-9-Opperator-Details-1
ETSWAP-9-Opperator-Details-2

Date picker component before and after

ETSWAP-10-Old-Date-Picker-1
ETSWAP-10-Old-Date-Picker-2
ETSWAP-10-Date-Picker-1
ETSWAP-10-Date-Picker-2

Copyright ©SingBlue 2019. All rights reserved.