Lambeth Council's Website Redesign

36
An iterative redesign of LAMBETH COUNCIL’S WEBSITE

description

An iterative user-centred redesign of Lambeth Council's website.

Transcript of Lambeth Council's Website Redesign

Page 1: Lambeth Council's Website Redesign

An iterative redesign of LAMBETH COUNCIL’S

WEBSITE

Page 2: Lambeth Council's Website Redesign

INTRODUCTION AND BACKGROUNDWhat is redesigned?

This presentation outlines the redesign of Lambeth Council’s website based on the findings

and recommendations of the Evaluation Report. This evaluated the usability and user

experience of the website via a standard CIF format and a benchmarking method against the

(user-centered) Government Digital Service’s (GDS) design principles.

Benchmark site GOV.UK The GDS’ principalswww.lambeth.gov.uk

Page 3: Lambeth Council's Website Redesign

The primary user groups are people with a connection to the London Borough of Lambeth.

User research indicated that the biggest factor influencing users’ service needs, interactions

and behaviour was their connection to Lambeth. These distinct groups defined 3 personas:

Visitor, Worker and Resident.

INTRODUCTION AND BACKGROUNDWhy?

Lambeth Council is initiating a paperless, self-service culture by cutting posted communication

and offline touch points – and instead the community is directed towards Lambeth’s website to

carry out tasks. It is therefore imperative that this channel is designed to be accessible to the

entire community: providing intuitive ease-of-use similar to the former offline channels.

www.lambeth.gov.uk is now the main touch

point

Post and face-to-face channels reduced

The three designed personas, from left to right: Visitor, Worker and Resident

Page 4: Lambeth Council's Website Redesign

INTRODUCTION AND BACKGROUND

Design concerns

Lambeth Council website has an extensive number of pages and information which will

be difficult to analyse and model in full and the following is representation of the top level

navigation. Some content may not be not have been included in this process.

Page 5: Lambeth Council's Website Redesign

AIMSTo what end?

The projects scope is to redesign and prototype Lambeth Council’s website.

The design aims reflect the Evaluation Report’s recommendations, which are listed in the

following table.

Users’ Pain Points Redesign Deliverables

Poor distinction of links resulting in

inefficient navigation.

Consistent link style, in strong

contrast with the body content.

Create clear, legible paragraph

styles similar to the GOV.UK format.

Style guide to define redesigned

aesthetic and interactive link rules.

Poor homepage hierarchy and

extraneous content leading to slow

navigation.

It was suggested that key (resident)

tasks like ‘council task’ should

precede council communications

or business needs. Redesign

the information architecture to

streamline content to focus on the

users’ information needs.

Wireframe and prototype

redesigned homepage.

Language and category headings

were difficult to understand.

Aim the tone of voice at the user

with simple, plain English. Category

headings should be labeled as the

user would describe the nested

content or task, not thematic,

industry (Council) language.

Updated copy for category labels.

Consistent deviation from the

optimal path.

Provide consistent and clear

navigation and signposting to

improve the task efficiency and

experience.

Task analysis and user journeys

to show navigation, including

interaction destinations and error /

content messages.

Poor retention and learnability score

– demanding a high cognitive load.

Provide a consistent and intuitive

site-wide design language so

it is quick to learn and easy to

remember upon returning to reduce

cognitive load and create a more

positive overall experience.

Redesigned site architecture

and navigation with consistent

interactions.

Non-responsive design restricts on-

the-go access.

Create a mobile-first design, built

with a responsive framework so a

consistent layout can adapt to the

device or media query.

Design a responsive layout.

The recommendations and deliverables can be simplified in the following aims

IMPROVE PROMINENCE OF LINKS

3

TASK-CENTRIC HOMEPAGE AND NAVIGATION, DESIGNED WITH USERS’ REQUIREMENTS FIRST, LEADING THE PAGE HIERARCHY

2

SIMPLE COPY WHICH SPEAKS TO THE USER

1

RESPONSIVE DESIGN

4

The presentation will aim to explain how the aims are achieved in the user interface and

wireframe designs, explaining the thought and rationale behind the decisions.

Page 6: Lambeth Council's Website Redesign

ISSUES

AIM: Simple copy which speaks to the user

Page 7: Lambeth Council's Website Redesign

ISSUESCard sorting to guide the language and site architecture

Optimal Sort A group of participants took part in a card sorting exercise to :

A / Reduce the site content into essential needs and simplify the language, and B / Divide the services into their chosen headings using the online sorting tool

(www.apps.optimalworkshop.com).

Optimal Workshop is an online card sorting tool

A screen shot of one participant’s

card sorting results. They chose top

level headings of: Unsorted, Visitor, Residents, All and

Businesses.

In the first task participants were asked to rename the categories to simplify the language as they saw fit, and place them in an order of importance. The categories were taken from the website’s content list (sitemap) which is used as a navigation tool. Page hierarchy was

not indicated. The subcategory Council Tax repeatedly came above Benefits where this is currently nested. The results helped to create a new collection of page names and site-wide

vocabulary based on the terms’ frequency of use or an average of results.

With the new page terms, participants were asked to group them under appropriate headings. The results were varied, and it was difficult to find common patterns. However, one revealing result grouped the pages by user type. This closely mirrors the personas generated through

the user research: Resident, Visitor & Worker (which is ‘Business’ in the card sort). In the exercise, participants were unable to duplicate the services and place them under more than one heading. However, in reality there might be a crossover. For example, both Business’ and

Residents would need information on refuse collections.

Page 8: Lambeth Council's Website Redesign

ISSUESOrganising the site map by

users’ service needs

Power UserResidentVisitor Business

Marriages

Planning Permission

Schools

Parking

Power User would need fast access to the full site map

Council Tax

Housing Benefits

Elections

Schools

Parking

Jobs

Libraries

Waste

Healthcare

Planning Permission

Marriages

Planning Permission

Waste

Business Rates

Parking

Jobs

Nee

dsU

sers

Following the card sorting exercise, the top level navigation divides the task flow by users’

personas. The site map has been organised by the personas’ needs, and some services have

been repeated where their use is shared by multiple personas. The persona ‘Worker’ has been

renamed to reflect the card sorting definition of ‘Business’.

Persona 4: The Power User

An additional persona was designed for the Power user (hunter) who is defined by the need

for fast access to content and not their relationship to Lambeth. This persona knows exactly

what he/she is looking for, and requires it on-the-go and quickly. Accessible links for key

services and device-responsive content is their priority.

Non-service categories have been grouped separately on the sitemap. These are:

News, Logo, Popular links, Social media links, What’s on, Get involved, Accessibility and

Contact us. None of these would be considered user needs – but necessary for all users.

Page 9: Lambeth Council's Website Redesign

ISSUES

AIM: Task-centric homepage and navigation – designed with users’ requirements first

Page 10: Lambeth Council's Website Redesign

ISSUES

‘I’M STRUGGLING TO FIND ANYTHING ABOUT BINS... THERE’S QUITE A LOT OF

LINKS HERE!”PARTICIPANT 1, TASK 1

Page 11: Lambeth Council's Website Redesign

ISSUES

User testing: pain points

The media clip shows Participant 1, a Lambeth Visitor, on the first task. She scans the homepage for more than a minute before finding the correct link. In a natural scenario the participant might have abandoned the task before completing her end-goal.

Page 12: Lambeth Council's Website Redesign

ISSUES

Reduce extraneous homepage content

Participants’ found it difficult to navigate through the first interface.

On average, it took one minute to locate the desired link on the homepage. Thereafter, the user

journey sped up at each subsequent page . No participants followed the optimum path.

Page 13: Lambeth Council's Website Redesign

ISSUESExisting sitemap model

In order to redesign the navigation and homepage content, it is important to analyse the information layers within the existing model. Due to the large scale and CMS-driven nature of

the site, a spreadsheet sitemap was the best way to account for all the content of Lambeth Council’s existing model. This is arranged in a tree structure. The Target Persona column is

a colour key to indicate which persona the information targets. At a glance you can see that Residents have a much larger range of information needs than Visitors - and the user research suggested that their frequency of use is higher. Client (Lambeth Council) focused information

is highlighted in pink. This content will be nested below the users’ content in the user-centric category hierarchy.

Level 1 Level 2 Level 2.1 Level 3 Client need? Target persona Need priority

Home

Search All 5

Cookies and privacy All 1

Services

About Lambeth

Lambeth by local area All 1

Maps of Lambeth All 1

Moving home 1

Our campaigns All 1

Publications All 1

Tourist attractions 1

Travel 1

What’s on Visitor / Resident 1

Advice and benefits

Benefits 5

Council Tax 5

Money advice 3

Thinking about work and training? 2

Business

Business rates 5

Business support and development 3

Commercial property 2

Licensing and street trading 2

Markets 2

Tenders and contracts 2

Trading standards 2

Community and living

Births Visitor / Resident 2

Civil partnerships, nationality checking and civil Visitor / Resident 2

Community groups, centers and facilities Visitor / Resident 2

Crime prevention Visitor / Resident 2

Deaths, funerals and cremations Visitor / Resident 2

Emergencies Visitor / Resident 4

Equality and diversity Visitor / Resident 3

Faith in Lambeth 2

Information for care providers All 3

Marriages Visitor / Resident 3

Volunteering Visitor / Resident 3

Council and democracy

Comments and complaints All 1

Consultations All 1

Councilors, MPs and MEPs and Mayor of Lambeth All 1

Data Protection and Freedom of Information All 1

Democracy and elections All 1

Lambeth First All 1

Making a difference - our aims and priorities All 1

Scrutiny All 1

Statistics and census information All 1

Youth council All 1

Education and learning

14 to 19 learning 5

Adult education 5

Education Estates and Capital Projects 3

Looked after children’s education achievement 4

Parental support 4

Schools 5

Under fives 5

Youth courses and activities 5

Environment

Animal welfare 3

Cleaner Streets 4

Environmental crime 4

Environmental health 3

Food safety 3

Get involved to improve your neighbourhood 3

Parks and green spaces 3

Pollution 3

Recycling, rubbish and waste 5

Regeneration 2

Health and social care

Accessible transport Business / Residents 4

Carers Visitor / Resident 4

Children, young people and families Visitor / Resident 3

Healthcare 5

How to get social care support 5

Missing persons 3

Self Directed Support 2

Services for adults 2

Support groups and boards 2

Housing and planning

Building control All 5

Council housing 5

Council leaseholders and freeholders 3

Estate regeneration programme 2

Homeless support and advice 5

Housing options 5

Land and premises All 3

Planning All 5

Private housing All 3

Save energy in your home All 3

Supported and sheltered housing 5

Jobs and careers

Adults’ and Community Services careers 5

Benefits of working for Lambeth Council All 5

Careers and educational advice 3

Children and Young People’s Social Care careers 3

How to apply 3

Lambeth working Visitor / Resident 2

More jobs Visitor / Resident 2

Leisure and culture

Arts Visitor / Resident 2

Libraries 4

Local and family history 3

Sports and recreation 4

Transport and streets

Cycling and walking 5

Nuisance vehicles All 1

Parking All 5

Road Danger Reduction All 3

Roads, highways and pavements All 2

Street care and cleaning All 2

Transport design consultations All 2

Transport events and campaigns All 2

Transport projects All 1

Transport strategy All 1

Get involved

Be part of the cooperative council 1

Businesses can get involved 1

Funding opportunities 1

Influence decisions 1

Lambeth champions award 1

Local volunteering opportunities 2

Get involved in crime prevention 2

Snow wardens 1

Contact us

Contact information 4

Search this site 5

Accessibility

Ease of use 5

My Lambeth account

Account login 5

Account details 5

Register 5

Top story All 1

A-Z 4

Popular pages All 1

Latest News All 1

What’s on All 1

e Newsletters

Sign-up (form field) All 1

Follow us Online 1

Participant 1:“This could be

more useful”

The Lambeth account login moves

throughout the user journey. This

should be a consistent feature in

the page template. Suggest top

right corner.

Participant 1: “This should

be a link on the homepage”

Resident

Visitor

Business

Get involved could be

nested within the tertia-

ry layer. It is unessential

content.

At the moment the social icons

only appear on the homepage.

These could be consistent naviga-

tion icons throughout the pages.

*The Need priority scores and the Target Persona results were based on participant feedback and user research questionnaires, however, this was generated from a small

research sample and therefore, the validity of this information would be improved with a larger research sample.

Page 14: Lambeth Council's Website Redesign

ISSUESAnatomy of the existing homepage

The site’s top level elements are shown in boxed-out, colour coded sections. All but the central

content-well are navigation elements. The positioning and labeling of these elements is not

consistent from page to page.

Left nav (consistent)

• Services• About Lambeth• Advice and

benefits• Business• Community and

living• Council and

democracy• Education and

learning• Environment• Health and social

care• Housing and

planning• Jobs and careers• Leisure and

culture• Transport and

streets

(Inconsistent)

• My Lambeth account

Header (consistent)

• Site search• Cookies and privacy• Date• Logo / home

Top nav (interchangeable field)

• Home• A to z• Do it Online• Get involved• Contact us• Search this site• Accessibility

Content-well(Interchangeable field)

• Topstory• A-Z• Popularpages

Sidebar (interchangeable field)

• Latest News• What’s on• e Newsletters• Follow us Online

In user testing, participants’ missed the optimum journey when links were

nested in the right sidebar which lead to confused and inefficient user journeys.

It was a blind spot and should not contain important information in the redesigned

layout.

The content-well contains local news items. Participants saw this as a PR strategy, satisfying clients’ (Lambeth Council) needs over theirs. This would be

considered high value ‘retail space’ as it is a sizable and central content area, which would gain a large number of fixations.

This is where links to the users’ task-needs should be consistently located to provide the most efficient user journey.

Categories and subcategories

Page 15: Lambeth Council's Website Redesign

Library book search

Homepage

ISSUESAnatomy of the new (desktop) homepage

Separating client needs and user needs

In addition to filtering the content by persona, the site will separate client content from users’ needs. User needs (services and popular links) will head every page and client content (PR,

news) will follow. The client content will be attractive with media, event and news imagery with balanced prominence within the page hierarchy, but not disrupting the user journey.

User Content:The header will be clean and sparse comprising of a consistent: logo, persona profile icon and

login form. The nav bar will contain standard unfiltered links which access to the full site map. This comprises: Services, News, Get involved and What’s on and a large, intelligent search bar.

This will consolidate three existing a-z search functions. Via cookies and popular searches, the search bar will predict results from the first letter entered in the form field. It will auto-correct

spelling errors and pull thematic results. For example, typing in ‘benefits’ would pull up council tax exemption results if that was a common connection.

The content-well will contain the filtered content. The personas’ common tasks will populate the Services and Popular results sections.

Client Information:This separates content that is of less value to the user but necessary for the client to include.

Wireframes

User content

Client content

Filtered content

Header

• Logo / home• Profile selection• Login (My Lambeth

Account - existing format)

Top nav

• Home• Search• Get involved• What’s on• Social network links• Search field

Content-well

• Services• PopularLinks• Lambethaccount

Client needs

• News• Get Involved• What’s on

User content Client content

2!

1!

3!

Intelligent search bar. Primary navigation for the Power User

1

2 Intelligent content search. This is not navigational it is information seeking.

3 Client section with large attractive image / media boxes

4 Filtered services

5 Profile selection to filter content

4!

5!

Page 16: Lambeth Council's Website Redesign

ISSUESThe new persona-driven site map with dynamic content

The figure below shows the primary and secondary layers of the site architecture.

The information is tailored to each personas’ needs to create dynamic and meaningful content

based on personas’ search patterns. It will create intelligent user profiling; populating a profile’s

page with only the content they need. No extraneous content. This will be achieved through the

content management system. By default the user will adopt the Power User persona which is

anonymous and have full access to the site map. Although the content is unfiltered they would

tend to navigate directly to the relevant areas via the search bar.

Alternatively, to filter the content, the user has the option to select their appropriate user profile,

i.e. choose Visitor, Resident or Business? The homepage will repopulate with information

specific to that users’ category needs.

The results for News, Service and Popular pages will be filtered according to that profiles’

statistical need. Profile activity and user journeys will be recorded to feedback into the way

the tailored results are filtered. Therefore, the more the website is accessed, the more refined

the profile filters will become and in time, the content selection will be a perfect match for that

profiles’ task needs. On page load, the optimum result will reside top right of the content well

and the user will unconsciously click through to the subcategory pages. This will reduce both

the cognitive load and the pause time on the homepage where previously participants’ spent

an average of one minute before locating their first link in user testing.

These pages will filter content specific to the users selected profile. If they choose no profile, the Power User, they will access the full site map. This will mean there is more extraneous content on the page but this persona

however is expected to use the search function over click-through navigation as their interaction pattern is to retrieve specific content at speed.

This is where the user will select the user profile (persona) that fits their relationship with Lambeth

This content is consistent and non

specific to profile type

Services 2.2News 2.1Popular

Pages 2.3 Follow 2.4Cookies /

Policy 2.6e Newsletter 2.5

Get Involved 2.7 Contact us 2.8

Login 1.0Change

User 1.1 Search 1.2 What’s on 1.3Social

media links 1.4

Home 00

Resident 1.1.2 Visitor 1.1.2Business 1.1.1

Page 17: Lambeth Council's Website Redesign

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Page 18: Lambeth Council's Website Redesign
Page 19: Lambeth Council's Website Redesign
Page 20: Lambeth Council's Website Redesign
Page 21: Lambeth Council's Website Redesign
Page 22: Lambeth Council's Website Redesign

ISSUESImproving task flow and cognitive load with intelligent

content management systems

Improving the task flow and modes of interaction The task journey occurs with one category page and no click-throughs. New (requested)

content populates beneath the interaction (click) and the page will continuously grow, and

expand vertically. This interaction pattern is to scroll for information which will be repeated

through the site to for consistent and fast navigation.

Existing task flow

Improved task flow was wireframed with

Omnigraffle.

“OH –THERE’S NO WHERE TO PUT MY POSTCODE IN”PARTICIPANT 3, TASK 1: FIND YOUR BIN COLLECTION DAY

The participant expected to locate the day of his rubbish collection via a postcode entry field.

With an intelligent CMS system that could cross reference residential addresses with the

borough’s rubbish collection routes, the task could be resolved immediately. Instead, the user

journey involved cross referencing these online PDF spreadsheet of these details yourself. A

slow and inefficient process demanding a high cognitive load. I

Screen shot of a recorded wireframe interaction sequence using Silverback

Page 23: Lambeth Council's Website Redesign

ISSUES

User testing: pain points

The media clip shows Participant 3 on a information seeking exercise (task 1) to find details on his local bin collection day. He found this the most difficult task. The user must “deep-dive” through multiple layers and pop-up windows and cross reference the disparate content.

Page 24: Lambeth Council's Website Redesign

ISSUES

Redesigning Task 1 with scrolling navigation

The media clip demonstrates the redesign principle of scrolling navigation where key user journeys exist within one category page. As the user clicks though the content, it populates below their interaction, essentially growing downwards. This addresses the pain point participants experienced with multiple

pages and and windows on this task.

Page 25: Lambeth Council's Website Redesign
Page 26: Lambeth Council's Website Redesign
Page 27: Lambeth Council's Website Redesign
Page 28: Lambeth Council's Website Redesign
Page 29: Lambeth Council's Website Redesign
Page 30: Lambeth Council's Website Redesign

ISSUES

AIM: Improve links and paragraph styles

Page 31: Lambeth Council's Website Redesign

ISSUES

“IS THIS A LINK... OH YES, IT IS. THEY ALL LOOK DIFFERENT!”

PARTICIPANT 3, TASK 3

Page 32: Lambeth Council's Website Redesign

ISSUESA style guide to the redesigned link scheme

The redesign has created a consistent site-wide link scheme. A simple and recognisable

scheme will improve learnability and memorability, as well task efficiency.

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

‘Client content’.

Category heading.

Nav bar headings.

Content-well links

Footer / header links.

iPadiMac iPhone

Link active

Link normal

Link active

Link normal

Links styles across the responsive

family

Drop down links are consistent interaction pattern across the responsive family. The fill colour reflects the link background colour. For example, a header link drop down would be navy blue on

navy blue.

Active link colour

Inactive link colour

Footer inactive colour

The scheme uses

the font Neue Haas

Grotesk Display Std 55

Roman throughout.

Their are two point sizes:

content-well links are

larger than the standard

elsewhere for page

prominence.

Footer, header and

client content are white.

All others are navy. The

active state is universally

cyan.

Page 33: Lambeth Council's Website Redesign

ISSUES

AIM: Responsive design

Page 34: Lambeth Council's Website Redesign

ISSUES

“THIS REALLY SHOULD BE MORE MOBILE FRIENDLY... I CAN ONLY LOOK AT THE SITE

PROPERLY AT HOME OR IN THE OFFICE”PARTICIPANT 3, TASK 3

Page 35: Lambeth Council's Website Redesign

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

ISSUES

Responsive family

Final homepage UI

layouts for desktop,

iPad (tablet), and

Nokia Lumia (mobile)

The responsive grid layout for mobile and tablet

When a media query is run, the 12 column desktop layout will flex to a 4 column grid system on both tablet and mobile devices. Some content is reduced in the tablet version to create white space around user services. The client content is pushed to the left side

bar. This was a blind spot in user testing so we would avoid user placing user content here.

The mobile version is designed for the on-the-go Power User and the search field is the primary navigation function for direct task seeking. This framework holds 50% less

content than the desktop version to maintain white space around Services.

A more modular format than the

desktop version

A fixed scroll tab. This is above the main

content and can be removed with a slide

and swipe gesture off the canvas / screen

iPad

Lambeth Council: A cooperative Council

Council tax

Libraries

Healthcare

Planning

Benefits

Waste

Council tax

Waste collection days

Pay a parking fine

<More results>

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

<Mee more results>

Services Get Involved What’s on

Services Popular Links

Search Lambeth Council’s website

Log in

Hi, tell us who you are

Visitor, Resident or Business

Nelson Mandela visits Lambeth

Make your voice heard

Abor day in Brockwell Park

iPad

iMac

iOS

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

Lambeth Council: A cooperative Council Log in Visitor, Resident or Business

Hi, tell us who you are

ServicesCouncil tax

Libraries

Healthcare

Planning

Popular linksCouncil tax

Waste collection days

Pay a parking fine

Search Lambeth Council’s website

Services Get InvolvedNews What’s on

Accessibility Sitemap eNewsletter Contact us

News

Nelson Mandela visits Lambeth <read more >

Abor Day in Brockwell Park

<read more >

Get Involved

Make you voice heard <read more >

What’s on

Benefits

Waste

Schools & education

Jobs

Transport

Parking

Marriages, births & deaths

A larger reduction in content. The mobile version is designed for the Power User – retrieving

information fast. The search bar is much larger it is central to the

mobile version’s interactions

iPad

iPhone

4 column grid

As this interaction is designed for the

power user, it is not expected that they will select a profile.

The picture icon remain but additional information has been

removed.

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Page 36: Lambeth Council's Website Redesign

DISCUSSIONLimitations

The aims lack statistical validity The user research and summative (site) evaluation, on which the scoped aims are based,

were collected from a very small number of participants and therefore lack validity. A next step would be to collect a much larger sample, and with repeated user testing to either support or rule out the aims and redesign. If the aims were validated, the next phase would be to create a

testing plan to user test the redesigned prototype.

Beta user testing necessaryThe functionality of streamlining extraneous page content for profile users is based on user

research data on task popularity. This suffices for ideation prototyping – but it does lack accuracy and would not be fit for commercial use.

The live product would be able to collect the same data based on real user interactions. The intelligent profiling would be achieved through a CMS (content management system) to create dynamic content personalization based on users’ search patterns. As usage and interactions

increase, the more advanced and accurate the intelligent profiling system will become. To move forward with project, extensive user testing of an iterative beta is necessary. A rich set of profiles’

pattern data would lead to improved efficiency, satisfaction and delight! Volunteers welcome!

Thank you for your time. S u s a n n a W i l l i s

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved

Log in

Accessibility

Contact us

Search Lambeth Council

Council Tax

Libraries

Healthcare

Planning

Benefits

Waste

Schools

Education

Jobs

Transport

S e r v i c e s

What’s on

Services Get involved