Designing with IntentCamden website redesign project

Alasdair ManghamHead of Information systems and development

A bit about Camden

The Challenge

Insert picture of city of London

The Internet is a disruptive technology

But governments are only disrupted by revolution

Insert picture of Marx in Highgate cemetery

E-government breaks all the rules of E-Business

E-Government• Monopoly with regulatory

protection• Controls all of the supply

chain• Can regulate demand• Is based upon a

permanence of bureaucratic process

E-Business• Seeks to gain competitive

advantage• Disrupts established

supply chains• Opens up previously

untapped demand• Is agile and responsive to

change

You become the business you measure

• Picture of chernobyl

Meetings with Hippos

Reading recommendation

Service Design Principals

• Good service design depends on a good understanding of your customer are

• Good service design depends on understanding how your customers currently use your product and comparative products in the market

• Good service design is evidence based• Good service design is based upon iterative

improvements• Good service design will enable the business to

meet its objectives

Design process - Outcomes v Intent

• Outcome orientated design is better suited for making specific changes to a website

• The process identifies key KPI’s that require changing and sets parameters for success

• Through utilising usability studies and in some cases A/B testing it identifies specific elements of a site that need changing

• The changes are implemented and measured against the KPIs that have been determined as part of the process.

Outcome orientated design – Payments

pages rebuild Usability review

• Cluttered design

• Unclear instructions and field labelling

• Too many “ejector seat levers” – user could leave the transaction process without being aware

• Lack of clear focus on the payment process

• Unnecessary steps and features

• Unclear error handling and messages

Homepage

Homepage

•New uncluttered design throughout:left and right hand navigation columns have been removed allowing customers to focus on payments process

•Payment links on homepage now sorted into logical groups

•Security information clearer and listed in one place

Account confirmation & amount to pay

Account summary and amount to pay

•Brown boxes removed throughout system as they focussed users attention away from other important items

•System now automatically strips out other symbols from the amount to enter box

•Increased accessibility by removing JavaScript function that automatically focused and selected the contents of the “pounds” field

Enter payment details

Payment details

•Card details layout changed and made clearer

•Select card type drop down added and accepted cards shown

•Start date/issue number” advice moved next to relevant field

•Address information separated into separate fields and clearly labelled

Payment success

Payment success

•Main heading changed from “Pay” (which gave impression user still had something to pay)

•Transaction reference number clearly displayed

•Transaction summary presented in a table

•Downloadable receipt provided

•New information on how to correct a mistake

•Clear call to actions on what to do next

Designing with Intent – Camden website

Informational

Transactional

Approach

Capturing Camden’s residents requirements

• Street surveysReach unengaged

• Focus groupsGenerate ideas

• Home interviewsUnderstand experiences

• Usability testing ‘in situ’Observe behaviour & identify issues

• Create a research report & supporting documentation

Research

What did we learn?

• Key improvements in website usability & visual design will significantly assist user engagement & productivity

• Digital service delivery innovation should target leisure and library services first

• Transparency of decision-making and conflict resolution improves understanding and positive sentiment

• Digital channels can improve on the ability to resolve tasks

Resolution

Imm

edia

cy

What’s happening now?

web

in person

phone

email

letter

Resolution

Imm

edia

cy

web

in person

phone

email

letter

web

email

What shouldbe happening

Research

How do we continue to learn?

• Interviewsprovide deep understanding of complex experiences

• Create and evolve personasto understand goals and behaviours across common groups of residents

• Create user journeysto understand sentiment and mindset during service use

Design

What are the 3 guiding principals of the user experience?

1. Crystal clear: Lucid and transparent

2. Don’t call on the phone to action: Enabling easy task resolution online. No unnecessary diverting to other channels

3. Keep in touch: Feeling connected and informed

Nobody knows anything…

• 73% of the test group rated the general look and feel of the new design as Excellent

• But when asked to perform tasks relating to planning the majority of participants expressed uncertainty as to which area of the website they should be going to.

• “Business”, “Community & living”, “Council & democracy”, “Education”, “Environment”, “Housing”, “Leisure”, “Policing & public safety”, “Social care & health” and “Transport & streets”—might house the Planning area.

• It took them 57 seconds (on average)to find out.

FC mood boards

until you go live

• The headings in the main navigation dropdown menus were missed by participants

• Analysis of the eye-tracking data that we captured during the

• testing reveals that most participants did not read the• headings that appear at the top of the main navigation• dropdown menus, namely “Popular” and “In this section”.

Further steps

IMPROVE CONVERSION…

Disconnect between action navigation and transactions

?

IMPROVE CONVERSION…

Inconsistent and confusing transaction user journeys

IMPROVE CONVERSION…

Streamline transaction process

Challenge parking fineSTEP 1

STEP 2 STEP 3

STEPS 4 - 17STEP 18

IMPROVE CONVERSION…

Reduce content, and improve separation of FAQs, screening steps & transactions

IMPROVE CONVERSION…

Improve form design and and create screening tools

IMPROVE CONVERSION…

Improve calls to action

?

IMPROVE CONVERSION…

...on this page the user is unsure of the best next step:

Next steps

Contact:Alasdair ManghamHead of Information Systems and DevelopmentAlasdair.mangham@camden.gov.uk