SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
An iterative redesign of

LAMBETH COUNCIL’S

WEBSITE
INTRODUCTION AND BACKGROUND
What 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.

www.lambeth.gov.uk

Benchmark site GOV.UK

The GDS’ principals
INTRODUCTION AND BACKGROUND
Why?
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.

Post and face-to-face
channels reduced

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

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.

The three designed personas, from left to right: Visitor, Worker and Resident
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.
AIMS
To 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

Consistent link style, in strong

Style guide to define redesigned

inefficient navigation.

contrast with the body content.

aesthetic and interactive link rules.

Create clear, legible paragraph
styles similar to the GOV.UK format.
Poor homepage hierarchy and

It was suggested that key (resident)

Wireframe and prototype

extraneous content leading to slow

tasks like ‘council task’ should

redesigned homepage.

navigation.

precede council communications
or business needs. Redesign
the information architecture to
streamline content to focus on the
users’ information needs.

Language and category headings

Aim the tone of voice at the user

were difficult to understand.

Updated copy for category labels.

with simple, plain English. Category
headings should be labeled as the
user would describe the nested
content or task, not thematic,
industry (Council) language.

Consistent deviation from the

Provide consistent and clear

Task analysis and user journeys

optimal path.

navigation and signposting to

to show navigation, including

improve the task efficiency and

interaction destinations and error /

experience.

content messages.

Poor retention and learnability score

Provide a consistent and intuitive

Redesigned site architecture

– demanding a high cognitive load.

site-wide design language so

and navigation with consistent

it is quick to learn and easy to

interactions.

remember upon returning to reduce
cognitive load and create a more
positive overall experience.
Non-responsive design restricts on-

Create a mobile-first design, built

the-go access.

Design a responsive layout.

with a responsive framework so a
consistent layout can adapt to the
device or media query.

The recommendations and deliverables can be simplified
in the following aims

1
SIMPLE COPY WHICH SPEAKS TO THE USER

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

3
IMPROVE PROMINENCE OF LINKS

4
RESPONSIVE DESIGN

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.
ISSUES

AIM:

Simple copy which speaks to the user
ISSUES
Card 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.
ISSUES
Organising the site map by
users’ service needs
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’.

Business

Resident

Power User

Needs

Users

Visitor

Marriages

Planning Permission

Council Tax

Planning Permission

Waste

Housing Benefits

Schools

Business Rates

Elections

Parking

Parking

Schools

Jobs

Parking
Jobs

Libraries
Waste
Healthcare
Planning Permission
Marriages

Power User would need fast access to the full site map

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.
ISSUES

AIM:

Task-centric homepage and navigation –
designed with users’ requirements first
ISSUES
‘I’M STRUGGLING TO FIND ANYTHING
ABOUT BINS... THERE’S QUITE A LOT OF
LINKS HERE!”
PARTICIPANT 1, TASK 1
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.
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.
ISSUES
Existing 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 3

Level 2.1

Client need?

Target
persona

Need priority

Home
Search

All

5

Cookies and privacy

All

Lambeth by local area

All

1

Maps of Lambeth

All

Resident

1

1

Services
About Lambeth

Moving home

1

Our campaigns

All

1

Publications

All

1

Tourist attractions
Travel
What’s on
Advice and benefits
Benefits

Participant 1:
“This should
be a link on the
homepage”

1
1
Visitor / Resident

1
5

Council Tax

5

Money advice

3

Thinking about work and training?

2

Business rates

5

Business support and development

3

Commercial property

2

Licensing and street trading

2

Markets

2

Tenders and contracts

2

Trading standards

Business

2

Business

Community and living
Births

Visitor / Resident

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
Information for care providers

2

Visitor

2
All

3

Marriages

Visitor / Resident

3

Volunteering

Visitor / Resident

3

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

Council and democracy

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

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

Environment

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
Benefits of working for Lambeth Council

5
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

Arts

Visitor / Resident

2

Leisure and culture
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 information

The Lambeth account login moves
throughout the user journey. This
should be a consistent feature in
the page template. Suggest top
right corner.

4

Get involved could be
nested within the tertiary layer. It is unessential
content.

Contact us

Participant 1:
“This could be
more useful”

Search this site

5

Accessibility
Ease of use

5

My Lambeth account
Account login

5
Account details

5

Register
Top story

5
All

A-Z

1
4

At the moment the social icons
Popular pages
only appear on the homepage.
Latest News
These could be consistent navigaWhat’s on
tion icons throughout the pages.

All

1

All

1

All

1

All

1

e Newsletters

Sign-up (form field)
Follow us Online

*

1

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.
ISSUES
Anatomy 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.

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
Header

Top nav

Content-well

Sidebar

Left nav

•	
•	
•	
•	

•	
•	
•	
•	
•	
•	
•	

•	 Top story
•	 A-Z
•	 Popular pages

•	
•	
•	
•	

•	 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

(consistent)

Site search
Cookies and privacy
Date
Logo / home

(interchangeable field)
Home
A to z
Do it Online
Get involved
Contact us
Search this site
Accessibility

(Interchangeable field)

(interchangeable field)
Latest News
What’s on
e Newsletters
Follow us Online

(consistent)

(Inconsistent)
•	 My Lambeth
account
ISSUES
Anatomy 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.

User content
Filtered content

Client content

User content

Client content

Header

Top nav

Content-well

Client needs

•	 Logo / home
•	 Profile selection
•	 Login (My Lambeth
Account - existing
format)

•	
•	
•	
•	
•	
•	

•	 Services
•	 Popular Links
•	 Lambeth account

•	 News
•	 Get Involved
•	 What’s on

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

Library book search

Wireframes

1!

2!

Homepage
3!

4!
5!

1

Intelligent search bar. Primary navigation for
the Power User

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
ISSUES
The 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.
This is where the user will select the user profile
(persona) that fits their relationship with Lambeth
Home

Social
media links

1.4

Business

1.1.1

00

News

2.1

Login

Resident

1.1.2

Services

2.2

Visitor

Popular
Pages

1.0

Change
User

1.1

Follow

2.4

Get
Involved

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.

What’s on

1.3

This content is
consistent and non
specific to profile type

1.1.2

2.3

1.2

Search

e Newsletter

2.7

Cookies /
Policy

2.5

Contact us

2.8

2.6
Hi, tell us who you are

Lambeth Council: A cooperative Council

Services

News

Log in

Get Involved

Visitor, Resident
or Business

What’s on

Search Lambeth Council’s website

Services
Council tax

Benefits

Transport

Libraries

Waste

Parking

Healthcare

Schools & education

Marriages, births & deaths

Planning

Jobs

Popular links
Council tax
Waste collection days
Pay a parking fine

Get Involved

News

Nelson Mandela visits
Lambeth

What’s on

Abor Day in Brockwell Park

Make you voice heard

<read more >

<read more >

<read more >

Accessibility

Sitemap

eNewsletter

Contact us
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
ISSUES
Improving task flow and cognitive load with intelligent
content management systems
Existing task flow

“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

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.

Improved task flow
was wireframed with
Omnigraffle.

Screen shot of a recorded wireframe interaction sequence using Silverback
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.
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.
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
Lambeth Council's Website Redesign
ISSUES

AIM:

Improve links and paragraph styles
ISSUES

“IS THIS A LINK... OH YES, IT IS. THEY ALL
LOOK DIFFERENT!”
PARTICIPANT 3, TASK 3
Hi, tell us who you are

Log in

rative Council

News

Log in

Get Involved

Visitor, Resident
or Business

ISSUES

What’s on

Visitor, Resident or
A style guide to the redesigned link scheme
Business
Search Lambeth Council

g in

The
A
h Council’s website redesign has created a consistent site-wide link scheme.us simple and recognisable
Hi, tell
who you are
scheme will improve learnability and memorability, as well task efficiency.

volved

What’s on

s

Log in

What’s on

Lambeth Council: A cooperative Council

e

Benefits

Services
iMac
Services

iPad

Get Involved
Transport

What’s on

iPhone

Ser vices

Search Lambeth Council’s website

Jobs

Council Tax

Services
Libraries

Services

Council tax

Council tax
Benefits

Healthcare

Visitor, Resident or
Business

Log in

What’s
Links styles on
What’s on
across the
Search Lambeth Council’s website
Services
Get involved
Waste
responsive
Popular Links
Services
family
Schools

Services
Marriages, births & deaths

Schools & education

Visitor, Resident
or Business

Search Lambeth Council

Parking

Category heading.

links
ion days

Log in

Get involved
Lambeth Council: A cooperative Council

News

Waste

r Links

Hi, tell us who you ar

Get Involved

Council Tax Transport
Schools & education

Waste tax
Council

Education
Jobs

The scheme uses
Libraries
Waste
Libraries Parking
Schoolscollection days
Libraries
Waste
the font Neue Haas
Healthcare & education Transport
Pay a parking fine
Healthcare
Schools
Healthcare Marriages, births & deaths Grotesk Display Nelson Mandela visits Lambeth
Education
Std 55
Planning
Jobs
Planning
Parking
<More results>
Planning
Jobs
Roman throughout.
Planning
Jobs
Nelson Mandela visits Lambeth
‘Client content’.
Marriages, births
Benefits Benefits
Transport & deaths Transport Their are two point sizes:
Benefits
Waste
<Mee more results>
content-well links are
Make your voice
Abor day in
heard
Brockwell Park
larger than the standard
elsewhere for page
Accessibility
Contact us
prominence.
Accessibility
Footer, header and
Council tax
your
Abor day in What’s on
Contact us
GetMakeheardvoice
Involved
client content are white.
Brockwell Park
Waste collection days
All others are navy. The
Pay a parking fine
Log in
active state is universally
Hi, tell us who Hi, tell us who you are
you are
cyan.
Hi, tell us who you are

fine
>

Popular links

Nav bar headings.

Get Involved

News
Log in

cooperative Council
Council
Council: A cooperative Council

Log in

Log in
Visitor,Visitor, Resident
Resident or
Search Lambeth
or Business
Business Log in

What’s on tell us who you are
Hi,

Council

Visitor, Resident
or Business

Log in
What’s on

Lambeth Council:
Get Involved
Services What’s on Get Involved A cooperative Council
What’s on
Services
News
Get Involved
What’s on

Abor Day in Brockwell Park

Make you voice heard
Search Lambeth Council
Services

Search Lambeth>Council’s website
<read more

<read more >

Services

ncil’s website
Search Lambeth Council’s website

Popular Links

<read more >

Ser vices Links
Popular
Schools

Contact us

Pay a parking fine

Parking
Benefits

<read more >

Libraries

eNewsletter
Services

Sitemap

Ser vices

Healthcare

Education

Nelson Mandela visits Lambeth

<More results>
Transport

Council
Waste
Planning
Jobs
Benefits
Transport Tax
Council tax
Schools & education
Council tax
Marriages,
Waste births & deaths
Parking
Accessibility
Sitemap
Contact
Libraries eNewsletter Waste collection days
Schools us
Waste Libraries
Parking
Benefits
Transport
Jobs
<Mee more results>
Schools & education
Marriages, births & your voice
deaths Abor day in
Make
Schools & education
heardMarriages, births & deaths Pay a parking fine
Healthcare
Transport Brockwell Park
Healthcare
Education
Jobs
Jobs Planning
Parking Planning
<MoreJobs
results>

ax

e

What’s on

Abor Day in Brockwell Park
Make you voice heard
Services
Get involved
Search Lambeth Council’s website
Council Tax
Waste

Schools & education
Content-well links Council tax
<read more >
Jobs
Waste collection days

sibility
Transport

Get Involved

What’s on

Nelson Mandela visits
Lambeth

rvices

Get involved

Visitor, Resident or
Ac
Businesstiv
e
colo link
ur

Inac
l i n k t i ve
colo
ur
Nelson Mandela visits Lambeth

Accessibility

Benefits

Marriages, births & deaths

Waste

<Mee more results>

Benefits

Transport

nks links
pular

Contact us

Make your voice
heard

Footer / header links.
Accessibility

inac Foote
t i ve r
colo
ur

Contact us

Hi, tell us who you are

Hi, tell us who you are

ax

Abor day in
Brockwell Park

lection days

king fine
Lambeth Council: A cooperative Council
Log in

What’s on

News

Get Involved

Visitor, Resident
or Business

Services

Get Involved

Visitor, Resident or in
Log
Business

Log in

Get Involved
What’s on

What’s on

What’s on

Search Lambeth Council

Search Lambeth Council’s website

Services

Popular Links

Link active

What’s on
Services

Council tax

Schools & education

Council tax

Libraries

Jobs

Waste collection days

Healthcare

Transport

Pay a parking fine

Link normal

Nelson Mandela visits Lambeth

<More results>
in BrockwellParking
Park
Make you voice heard
Transport
andela visits
Abor Day in Brockwell Park
Make you voice heard
Benefits
<read more >
<read
ParkingMarriages, births & deathsmore >
Link active

ion

PlanningDay
Abor

Waste

<read more >
<Mee more results>

<read more >

Marriages, births & deaths

Link normal

Get involved

Ser vices
Council Tax

Waste

Drop down links are consistent interaction pattern across the responsive family. The fill colour
Libraries
Schools
Make your voice
in
reflects the link background colour.Abor dayPark
For example, a header link drop down would be navy blue on
heard
Brockwell
navy blue.
Healthcare
Education

Planning
Sitemap
Accessibility

eNewsletter
Sitemap

Contact us
eNewsletter

Contact us

Jobs

Benefits

Transport
ISSUES

AIM:

Responsive design
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
ISSUES
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.

4 column grid

iPad
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
A more modular
format than the
desktop version

iPhone
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

Log in

rch Lambeth Council

What’s on
Services

Get involved

Ser v i ces

Planning

As this interaction
is designed for the
Waste
power user, it is not
expected that they
Schools
will select a profile.
The picture icon
Educationadditional
remain but
information has been
Jobs
removed.

Benefits

Transport

iMac

Accessibility
Contact us

Hi, tell us who you are

Lambeth Council: A cooperative Council

Services

News

Log in

Get Involved

Visitor, Resident
or Business

What’s on

iOS

Responsive
family

Search Lambeth Council’s website
Log in

Services

Final homepage UI
layouts for desktop,
iPad (tablet), and
Nokia Lumia (mobile)

Search Lambeth Council

What’s on

Council tax

Benefits

Transport

Libraries

Waste

Parking

Healthcare

Schools & education

Marriages, births & deaths

Planning

Jobs

Services

Get involved

Ser vi ces
Council Tax
Libraries

Schools

Healthcare

Education

Planning

Jobs

Benefits

Popular links

Waste

Transport

Council tax
Waste collection days
Pay a parking fine

Accessibility
Contact us

Get Involved

News

What’s on

Lambeth Council: A cooperative Council

Services

Hi, tell us who you are

Log in

Visitor, Resident or
Business

Get Involved

What’s on

Search Lambeth Council’s website

Services
Abor Day in Brockwell Park

Make you voice heard

<read more >

<read more >

Pay a parking fine

Parking

<More results>

Marriages, births & deaths

Waste

<Mee more results>

Nelson Mandela visits Lambeth

Make your voice
heard

Abor day in
Brockwell Park

g n i k r aP
t r o p s n a rT

e n i f g n i k r a p a y aP

sboJ

s y a d n o i t c e l l o c e t s aW

noita cude & sloohcS

xat licnuoC

sk n i L r a l u p oP

su tcatnoC

r ette l swe N e

pametiS

y t i l i b i s s e c cA

stifene B

shtaed & shtrib ,segairraM
> s t l u s er er o M <

Contact us

Transport

e t s aW

eNewsletter

Waste collection days

Benefits
Sitemap

Council tax

Jobs

Planning

Accessibility

Schools & education

Libraries
Healthcare

<read more >

Council tax

htebmaL stisiv alednaM no sleN

Nelson Mandela visits
Lambeth

Popular Links

> s t l u s er er o m e e M <

gninnalP
er a c h t l a e H
s e i r ar b i L
xat licnuoC

secivreS

> er o m d a er <
> er o m d a er <

d r a e h e c i o v u o y ek a M

> er o m d a er <

k r aP l l e w k c or B n i y a D r o b A

stisiv alednaM nosleN
htebmaL

Healthcare

e c i o v r u o y ek a M
dr a e h

Libraries

ni yad robA
k r aP l l e w k c or B

Council Tax

iPad
DISCUSSION
Limitations
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 necessary
The 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.
Susanna Willis

Log in

Search Lambeth Council

What’s on
Services

Get involved

Ser vices
Council Tax

Waste

Libraries

Schools

Healthcare

Education

Planning

Jobs

Benefits

Transport

Accessibility
Contact us

su tca tno C
y t i l i b i s s e c cA

stfiene B
stfiene B
stfiene B

t r o p s n a rT
t r o p s n a rT
t r o p s n a rT

gninnalP

sboJ

er a c h t l a e H

n o i ta c u dE

s e i r ar b i L

sloohcS

x aT l i c n u o C

e t s aW

secivreS
d ev l ovn i te G
d ev l ovn i te G
d ev l ovn i te G

secivreS
secivreS
secivreS

n o s’ t a h W

l i c n u o C h t e b m a L h cr a e S

Weitere ähnliche Inhalte

Was ist angesagt?

WordCamp Atlanta 2015: Planning your website from concept to launch
WordCamp Atlanta 2015: Planning your website from concept to launchWordCamp Atlanta 2015: Planning your website from concept to launch
WordCamp Atlanta 2015: Planning your website from concept to launchMickey Mellen
 
How to Launch a Website
How to Launch a WebsiteHow to Launch a Website
How to Launch a WebsiteLinkedIn
 
Proposal to get website ad
Proposal to get website adProposal to get website ad
Proposal to get website adA.J Siddique
 
HiKitchen website restyling & new strategy
HiKitchen website restyling & new strategyHiKitchen website restyling & new strategy
HiKitchen website restyling & new strategyWhale Lab
 
Website development proposal
Website development proposalWebsite development proposal
Website development proposalTriptiatri
 
Website re-design-best-practices
Website re-design-best-practices Website re-design-best-practices
Website re-design-best-practices Chuck Bowen
 
Jobzella.com Website UX Map Proposal Presentation
Jobzella.com Website UX Map Proposal Presentation Jobzella.com Website UX Map Proposal Presentation
Jobzella.com Website UX Map Proposal Presentation Ahmed Alshair
 
Real Estate application & Website Detailed Features & Functionalities Proposal
Real Estate application & Website  Detailed Features & Functionalities ProposalReal Estate application & Website  Detailed Features & Functionalities Proposal
Real Estate application & Website Detailed Features & Functionalities ProposalJaya Kumari
 
Back & Spine Pain Management Doctors, Surgeon Website Marketing Proposal
Back & Spine Pain Management Doctors, Surgeon Website Marketing ProposalBack & Spine Pain Management Doctors, Surgeon Website Marketing Proposal
Back & Spine Pain Management Doctors, Surgeon Website Marketing Proposalbasicspine
 
Sample Website Proposal- Airline Example
Sample Website Proposal- Airline ExampleSample Website Proposal- Airline Example
Sample Website Proposal- Airline ExampleDr Matt McDougall
 
Time To Revamp Your Website
Time To Revamp Your WebsiteTime To Revamp Your Website
Time To Revamp Your WebsitePrakash Ranjan
 
Request For Proposal: The Web Site Redesign
Request For Proposal: The Web Site RedesignRequest For Proposal: The Web Site Redesign
Request For Proposal: The Web Site RedesignLuke Robinson
 
Web Site Development - Project Proposal
Web Site Development - Project ProposalWeb Site Development - Project Proposal
Web Site Development - Project ProposalNoel Flowers
 
Web Development proposal
Web Development proposalWeb Development proposal
Web Development proposalnephtalie
 

Was ist angesagt? (20)

ABT - Final Presentation
ABT - Final PresentationABT - Final Presentation
ABT - Final Presentation
 
WordCamp Atlanta 2015: Planning your website from concept to launch
WordCamp Atlanta 2015: Planning your website from concept to launchWordCamp Atlanta 2015: Planning your website from concept to launch
WordCamp Atlanta 2015: Planning your website from concept to launch
 
How to Launch a Website
How to Launch a WebsiteHow to Launch a Website
How to Launch a Website
 
Proposal to get website ad
Proposal to get website adProposal to get website ad
Proposal to get website ad
 
HiKitchen website restyling & new strategy
HiKitchen website restyling & new strategyHiKitchen website restyling & new strategy
HiKitchen website restyling & new strategy
 
Website development proposal
Website development proposalWebsite development proposal
Website development proposal
 
Website re-design-best-practices
Website re-design-best-practices Website re-design-best-practices
Website re-design-best-practices
 
Jobzella.com Website UX Map Proposal Presentation
Jobzella.com Website UX Map Proposal Presentation Jobzella.com Website UX Map Proposal Presentation
Jobzella.com Website UX Map Proposal Presentation
 
Real Estate application & Website Detailed Features & Functionalities Proposal
Real Estate application & Website  Detailed Features & Functionalities ProposalReal Estate application & Website  Detailed Features & Functionalities Proposal
Real Estate application & Website Detailed Features & Functionalities Proposal
 
Website Presentation for Corporate
Website Presentation for Corporate Website Presentation for Corporate
Website Presentation for Corporate
 
Sample Website Proposal Presentation
Sample Website Proposal PresentationSample Website Proposal Presentation
Sample Website Proposal Presentation
 
Back & Spine Pain Management Doctors, Surgeon Website Marketing Proposal
Back & Spine Pain Management Doctors, Surgeon Website Marketing ProposalBack & Spine Pain Management Doctors, Surgeon Website Marketing Proposal
Back & Spine Pain Management Doctors, Surgeon Website Marketing Proposal
 
Sample Website Proposal- Airline Example
Sample Website Proposal- Airline ExampleSample Website Proposal- Airline Example
Sample Website Proposal- Airline Example
 
Time To Revamp Your Website
Time To Revamp Your WebsiteTime To Revamp Your Website
Time To Revamp Your Website
 
Server side proposal
Server side proposalServer side proposal
Server side proposal
 
Request For Proposal: The Web Site Redesign
Request For Proposal: The Web Site RedesignRequest For Proposal: The Web Site Redesign
Request For Proposal: The Web Site Redesign
 
Web Site Development - Project Proposal
Web Site Development - Project ProposalWeb Site Development - Project Proposal
Web Site Development - Project Proposal
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
 
Web Development proposal
Web Development proposalWeb Development proposal
Web Development proposal
 
Sample proposal
Sample proposalSample proposal
Sample proposal
 

Andere mochten auch

Website Development and Design Proposal
Website Development and Design ProposalWebsite Development and Design Proposal
Website Development and Design ProposalCreative 3D Design
 
Website Redesign PowerPoint Presentation by David Wojdyla
Website Redesign PowerPoint Presentation by David Wojdyla Website Redesign PowerPoint Presentation by David Wojdyla
Website Redesign PowerPoint Presentation by David Wojdyla (and)vertisinginc
 
Guidestar Website Redesign Proposa
Guidestar Website Redesign ProposaGuidestar Website Redesign Proposa
Guidestar Website Redesign Proposamediaworkman
 
Website design pitch for Take 2 Movie Reviews
Website design pitch for Take 2 Movie ReviewsWebsite design pitch for Take 2 Movie Reviews
Website design pitch for Take 2 Movie Reviewsrosolinsk1
 
Nyc metro rid website development proposal
Nyc metro rid website development proposalNyc metro rid website development proposal
Nyc metro rid website development proposaldarylcrouse
 
Doing a Website Redesign for Marketing Results
Doing a Website Redesign for Marketing ResultsDoing a Website Redesign for Marketing Results
Doing a Website Redesign for Marketing ResultsHubSpot
 
Redesign Proposal: Novaspaceart.com
Redesign Proposal: Novaspaceart.comRedesign Proposal: Novaspaceart.com
Redesign Proposal: Novaspaceart.comGary Schroeder
 
Website Redesign Presentation
Website Redesign PresentationWebsite Redesign Presentation
Website Redesign Presentationjoanat
 
The Website Redesign Process
The Website Redesign ProcessThe Website Redesign Process
The Website Redesign ProcessGary Schroeder
 
Putuadi Creative Web Development Proposal
Putuadi Creative Web Development ProposalPutuadi Creative Web Development Proposal
Putuadi Creative Web Development ProposalArlen Christian
 
Code Optimization
Code OptimizationCode Optimization
Code Optimizationguest9f8315
 
Web design proposal pdf
Web design proposal pdfWeb design proposal pdf
Web design proposal pdfMarathi Vivah
 
How to Prepare a Website Redesign Proposal
How to Prepare a Website Redesign ProposalHow to Prepare a Website Redesign Proposal
How to Prepare a Website Redesign ProposalSay WOW Marketing
 
Web design proposal sample
Web design proposal sampleWeb design proposal sample
Web design proposal sampleAdviacent
 

Andere mochten auch (16)

Website Development and Design Proposal
Website Development and Design ProposalWebsite Development and Design Proposal
Website Development and Design Proposal
 
Website Redesign PowerPoint Presentation by David Wojdyla
Website Redesign PowerPoint Presentation by David Wojdyla Website Redesign PowerPoint Presentation by David Wojdyla
Website Redesign PowerPoint Presentation by David Wojdyla
 
Guidestar Website Redesign Proposa
Guidestar Website Redesign ProposaGuidestar Website Redesign Proposa
Guidestar Website Redesign Proposa
 
Website design pitch for Take 2 Movie Reviews
Website design pitch for Take 2 Movie ReviewsWebsite design pitch for Take 2 Movie Reviews
Website design pitch for Take 2 Movie Reviews
 
Nyc metro rid website development proposal
Nyc metro rid website development proposalNyc metro rid website development proposal
Nyc metro rid website development proposal
 
Doing a Website Redesign for Marketing Results
Doing a Website Redesign for Marketing ResultsDoing a Website Redesign for Marketing Results
Doing a Website Redesign for Marketing Results
 
Bank Personas
Bank PersonasBank Personas
Bank Personas
 
Redesign Proposal: Novaspaceart.com
Redesign Proposal: Novaspaceart.comRedesign Proposal: Novaspaceart.com
Redesign Proposal: Novaspaceart.com
 
Website Redesign Presentation
Website Redesign PresentationWebsite Redesign Presentation
Website Redesign Presentation
 
The Website Redesign Process
The Website Redesign ProcessThe Website Redesign Process
The Website Redesign Process
 
Putuadi Creative Web Development Proposal
Putuadi Creative Web Development ProposalPutuadi Creative Web Development Proposal
Putuadi Creative Web Development Proposal
 
Code Optimization
Code OptimizationCode Optimization
Code Optimization
 
Web design proposal pdf
Web design proposal pdfWeb design proposal pdf
Web design proposal pdf
 
Web site proposal
Web site proposalWeb site proposal
Web site proposal
 
How to Prepare a Website Redesign Proposal
How to Prepare a Website Redesign ProposalHow to Prepare a Website Redesign Proposal
How to Prepare a Website Redesign Proposal
 
Web design proposal sample
Web design proposal sampleWeb design proposal sample
Web design proposal sample
 

Ähnlich wie Lambeth Council's Website Redesign

Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceRichard Harbridge
 
Usability review
Usability reviewUsability review
Usability reviewsayedshiban
 
Website Presentation
Website PresentationWebsite Presentation
Website PresentationAndrew Berg
 
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdf
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdfDLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdf
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdfJonhyWhite
 
Avnet_SharePointAnalyticsSolution_Datasheet
Avnet_SharePointAnalyticsSolution_DatasheetAvnet_SharePointAnalyticsSolution_Datasheet
Avnet_SharePointAnalyticsSolution_DatasheetGavin Jones
 
Website analysis basic tools and illustration
Website analysis basic tools and illustrationWebsite analysis basic tools and illustration
Website analysis basic tools and illustrationPriyanka Sharma
 
Web Live! Developing a Web Information Service
Web Live! Developing a Web Information ServiceWeb Live! Developing a Web Information Service
Web Live! Developing a Web Information ServiceJesús Tramullas
 
Advisor Finder User Testing debrief v0.4
Advisor Finder User Testing debrief v0.4Advisor Finder User Testing debrief v0.4
Advisor Finder User Testing debrief v0.4Pablo Gil
 
Redesigning TCS.com with Remote Research
Redesigning TCS.com with Remote ResearchRedesigning TCS.com with Remote Research
Redesigning TCS.com with Remote ResearchChris Farnum
 
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...Glenn Teneycke
 
Mobile Advertising - making money from mobile
Mobile Advertising - making money from mobileMobile Advertising - making money from mobile
Mobile Advertising - making money from mobileMartin Wilson
 
Information Architecture
Information ArchitectureInformation Architecture
Information ArchitectureOlivier Tripet
 
Digital strategy for ebusiness
Digital strategy for ebusinessDigital strategy for ebusiness
Digital strategy for ebusinessVirtu Institute
 
Synapseindia web site design for E Commerce development
Synapseindia web site design for E Commerce developmentSynapseindia web site design for E Commerce development
Synapseindia web site design for E Commerce developmentSynapseindiappsdevelopment
 
Increasing Usability By Creating An Actionable Websitev5
Increasing Usability By Creating An Actionable Websitev5Increasing Usability By Creating An Actionable Websitev5
Increasing Usability By Creating An Actionable Websitev5sarakirsten
 
INT103 Intranets With Office 365 What You Need To Know #365EDUCon
INT103 Intranets With Office 365 What You Need To Know #365EDUConINT103 Intranets With Office 365 What You Need To Know #365EDUCon
INT103 Intranets With Office 365 What You Need To Know #365EDUConKanwal Khipple
 

Ähnlich wie Lambeth Council's Website Redesign (20)

Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
 
Usability review
Usability reviewUsability review
Usability review
 
Website Presentation
Website PresentationWebsite Presentation
Website Presentation
 
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdf
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdfDLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdf
DLcase-study2_UNDERDOG_georgeK-skoolkidd_finaledit.pdf
 
Advanced Internet
Advanced InternetAdvanced Internet
Advanced Internet
 
Avnet_SharePointAnalyticsSolution_Datasheet
Avnet_SharePointAnalyticsSolution_DatasheetAvnet_SharePointAnalyticsSolution_Datasheet
Avnet_SharePointAnalyticsSolution_Datasheet
 
Website analysis basic tools and illustration
Website analysis basic tools and illustrationWebsite analysis basic tools and illustration
Website analysis basic tools and illustration
 
Web Live! Developing a Web Information Service
Web Live! Developing a Web Information ServiceWeb Live! Developing a Web Information Service
Web Live! Developing a Web Information Service
 
Advisor Finder User Testing debrief v0.4
Advisor Finder User Testing debrief v0.4Advisor Finder User Testing debrief v0.4
Advisor Finder User Testing debrief v0.4
 
Redesigning TCS.com with Remote Research
Redesigning TCS.com with Remote ResearchRedesigning TCS.com with Remote Research
Redesigning TCS.com with Remote Research
 
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
 
Web design
Web designWeb design
Web design
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Mobile Advertising - making money from mobile
Mobile Advertising - making money from mobileMobile Advertising - making money from mobile
Mobile Advertising - making money from mobile
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
 
Digital strategy for ebusiness
Digital strategy for ebusinessDigital strategy for ebusiness
Digital strategy for ebusiness
 
Arb Website
Arb WebsiteArb Website
Arb Website
 
Synapseindia web site design for E Commerce development
Synapseindia web site design for E Commerce developmentSynapseindia web site design for E Commerce development
Synapseindia web site design for E Commerce development
 
Increasing Usability By Creating An Actionable Websitev5
Increasing Usability By Creating An Actionable Websitev5Increasing Usability By Creating An Actionable Websitev5
Increasing Usability By Creating An Actionable Websitev5
 
INT103 Intranets With Office 365 What You Need To Know #365EDUCon
INT103 Intranets With Office 365 What You Need To Know #365EDUConINT103 Intranets With Office 365 What You Need To Know #365EDUCon
INT103 Intranets With Office 365 What You Need To Know #365EDUCon
 

Kürzlich hochgeladen

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Kürzlich hochgeladen (19)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Lambeth Council's Website Redesign

  • 1. An iterative redesign of LAMBETH COUNCIL’S WEBSITE
  • 2. INTRODUCTION AND BACKGROUND What 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. www.lambeth.gov.uk Benchmark site GOV.UK The GDS’ principals
  • 3. INTRODUCTION AND BACKGROUND Why? 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. Post and face-to-face channels reduced www.lambeth.gov.uk is now the main touch point 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. The three designed personas, from left to right: Visitor, Worker and Resident
  • 4. 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.
  • 5. AIMS To 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 Consistent link style, in strong Style guide to define redesigned inefficient navigation. contrast with the body content. aesthetic and interactive link rules. Create clear, legible paragraph styles similar to the GOV.UK format. Poor homepage hierarchy and It was suggested that key (resident) Wireframe and prototype extraneous content leading to slow tasks like ‘council task’ should redesigned homepage. navigation. precede council communications or business needs. Redesign the information architecture to streamline content to focus on the users’ information needs. Language and category headings Aim the tone of voice at the user were difficult to understand. Updated copy for category labels. with simple, plain English. Category headings should be labeled as the user would describe the nested content or task, not thematic, industry (Council) language. Consistent deviation from the Provide consistent and clear Task analysis and user journeys optimal path. navigation and signposting to to show navigation, including improve the task efficiency and interaction destinations and error / experience. content messages. Poor retention and learnability score Provide a consistent and intuitive Redesigned site architecture – demanding a high cognitive load. site-wide design language so and navigation with consistent it is quick to learn and easy to interactions. remember upon returning to reduce cognitive load and create a more positive overall experience. Non-responsive design restricts on- Create a mobile-first design, built the-go access. Design a responsive layout. with a responsive framework so a consistent layout can adapt to the device or media query. The recommendations and deliverables can be simplified in the following aims 1 SIMPLE COPY WHICH SPEAKS TO THE USER 2 TASK-CENTRIC HOMEPAGE AND NAVIGATION, DESIGNED WITH USERS’ REQUIREMENTS FIRST, LEADING THE PAGE HIERARCHY 3 IMPROVE PROMINENCE OF LINKS 4 RESPONSIVE DESIGN 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.
  • 6. ISSUES AIM: Simple copy which speaks to the user
  • 7. ISSUES Card 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.
  • 8. ISSUES Organising the site map by users’ service needs 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’. Business Resident Power User Needs Users Visitor Marriages Planning Permission Council Tax Planning Permission Waste Housing Benefits Schools Business Rates Elections Parking Parking Schools Jobs Parking Jobs Libraries Waste Healthcare Planning Permission Marriages Power User would need fast access to the full site map 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.
  • 9. ISSUES AIM: Task-centric homepage and navigation – designed with users’ requirements first
  • 10. ISSUES ‘I’M STRUGGLING TO FIND ANYTHING ABOUT BINS... THERE’S QUITE A LOT OF LINKS HERE!” PARTICIPANT 1, TASK 1
  • 11. 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.
  • 12. 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.
  • 13. ISSUES Existing 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 3 Level 2.1 Client need? Target persona Need priority Home Search All 5 Cookies and privacy All Lambeth by local area All 1 Maps of Lambeth All Resident 1 1 Services About Lambeth Moving home 1 Our campaigns All 1 Publications All 1 Tourist attractions Travel What’s on Advice and benefits Benefits Participant 1: “This should be a link on the homepage” 1 1 Visitor / Resident 1 5 Council Tax 5 Money advice 3 Thinking about work and training? 2 Business rates 5 Business support and development 3 Commercial property 2 Licensing and street trading 2 Markets 2 Tenders and contracts 2 Trading standards Business 2 Business Community and living Births Visitor / Resident 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 Information for care providers 2 Visitor 2 All 3 Marriages Visitor / Resident 3 Volunteering Visitor / Resident 3 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 Council and democracy 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 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 Environment 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 Benefits of working for Lambeth Council 5 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 Arts Visitor / Resident 2 Leisure and culture 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 information The Lambeth account login moves throughout the user journey. This should be a consistent feature in the page template. Suggest top right corner. 4 Get involved could be nested within the tertiary layer. It is unessential content. Contact us Participant 1: “This could be more useful” Search this site 5 Accessibility Ease of use 5 My Lambeth account Account login 5 Account details 5 Register Top story 5 All A-Z 1 4 At the moment the social icons Popular pages only appear on the homepage. Latest News These could be consistent navigaWhat’s on tion icons throughout the pages. All 1 All 1 All 1 All 1 e Newsletters Sign-up (form field) Follow us Online * 1 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.
  • 14. ISSUES Anatomy 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. 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 Header Top nav Content-well Sidebar Left nav • • • • • • • • • • • • Top story • A-Z • Popular pages • • • • • 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 (consistent) Site search Cookies and privacy Date Logo / home (interchangeable field) Home A to z Do it Online Get involved Contact us Search this site Accessibility (Interchangeable field) (interchangeable field) Latest News What’s on e Newsletters Follow us Online (consistent) (Inconsistent) • My Lambeth account
  • 15. ISSUES Anatomy 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. User content Filtered content Client content User content Client content Header Top nav Content-well Client needs • Logo / home • Profile selection • Login (My Lambeth Account - existing format) • • • • • • • Services • Popular Links • Lambeth account • News • Get Involved • What’s on Home Search Get involved What’s on Social network links Search field Library book search Wireframes 1! 2! Homepage 3! 4! 5! 1 Intelligent search bar. Primary navigation for the Power User 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
  • 16. ISSUES The 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. This is where the user will select the user profile (persona) that fits their relationship with Lambeth Home Social media links 1.4 Business 1.1.1 00 News 2.1 Login Resident 1.1.2 Services 2.2 Visitor Popular Pages 1.0 Change User 1.1 Follow 2.4 Get Involved 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. What’s on 1.3 This content is consistent and non specific to profile type 1.1.2 2.3 1.2 Search e Newsletter 2.7 Cookies / Policy 2.5 Contact us 2.8 2.6
  • 17. Hi, tell us who you are Lambeth Council: A cooperative Council Services News Log in Get Involved Visitor, Resident or Business What’s on Search Lambeth Council’s website Services Council tax Benefits Transport Libraries Waste Parking Healthcare Schools & education Marriages, births & deaths Planning Jobs Popular links Council tax Waste collection days Pay a parking fine Get Involved News Nelson Mandela visits Lambeth What’s on Abor Day in Brockwell Park Make you voice heard <read more > <read more > <read more > Accessibility Sitemap eNewsletter Contact us
  • 22. ISSUES Improving task flow and cognitive load with intelligent content management systems Existing task flow “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 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. Improved task flow was wireframed with Omnigraffle. Screen shot of a recorded wireframe interaction sequence using Silverback
  • 23. 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.
  • 24. 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.
  • 30. ISSUES AIM: Improve links and paragraph styles
  • 31. ISSUES “IS THIS A LINK... OH YES, IT IS. THEY ALL LOOK DIFFERENT!” PARTICIPANT 3, TASK 3
  • 32. Hi, tell us who you are Log in rative Council News Log in Get Involved Visitor, Resident or Business ISSUES What’s on Visitor, Resident or A style guide to the redesigned link scheme Business Search Lambeth Council g in The A h Council’s website redesign has created a consistent site-wide link scheme.us simple and recognisable Hi, tell who you are scheme will improve learnability and memorability, as well task efficiency. volved What’s on s Log in What’s on Lambeth Council: A cooperative Council e Benefits Services iMac Services iPad Get Involved Transport What’s on iPhone Ser vices Search Lambeth Council’s website Jobs Council Tax Services Libraries Services Council tax Council tax Benefits Healthcare Visitor, Resident or Business Log in What’s Links styles on What’s on across the Search Lambeth Council’s website Services Get involved Waste responsive Popular Links Services family Schools Services Marriages, births & deaths Schools & education Visitor, Resident or Business Search Lambeth Council Parking Category heading. links ion days Log in Get involved Lambeth Council: A cooperative Council News Waste r Links Hi, tell us who you ar Get Involved Council Tax Transport Schools & education Waste tax Council Education Jobs The scheme uses Libraries Waste Libraries Parking Schoolscollection days Libraries Waste the font Neue Haas Healthcare & education Transport Pay a parking fine Healthcare Schools Healthcare Marriages, births & deaths Grotesk Display Nelson Mandela visits Lambeth Education Std 55 Planning Jobs Planning Parking <More results> Planning Jobs Roman throughout. Planning Jobs Nelson Mandela visits Lambeth ‘Client content’. Marriages, births Benefits Benefits Transport & deaths Transport Their are two point sizes: Benefits Waste <Mee more results> content-well links are Make your voice Abor day in heard Brockwell Park larger than the standard elsewhere for page Accessibility Contact us prominence. Accessibility Footer, header and Council tax your Abor day in What’s on Contact us GetMakeheardvoice Involved client content are white. Brockwell Park Waste collection days All others are navy. The Pay a parking fine Log in active state is universally Hi, tell us who Hi, tell us who you are you are cyan. Hi, tell us who you are fine > Popular links Nav bar headings. Get Involved News Log in cooperative Council Council Council: A cooperative Council Log in Log in Visitor,Visitor, Resident Resident or Search Lambeth or Business Business Log in What’s on tell us who you are Hi, Council Visitor, Resident or Business Log in What’s on Lambeth Council: Get Involved Services What’s on Get Involved A cooperative Council What’s on Services News Get Involved What’s on Abor Day in Brockwell Park Make you voice heard Search Lambeth Council Services Search Lambeth>Council’s website <read more <read more > Services ncil’s website Search Lambeth Council’s website Popular Links <read more > Ser vices Links Popular Schools Contact us Pay a parking fine Parking Benefits <read more > Libraries eNewsletter Services Sitemap Ser vices Healthcare Education Nelson Mandela visits Lambeth <More results> Transport Council Waste Planning Jobs Benefits Transport Tax Council tax Schools & education Council tax Marriages, Waste births & deaths Parking Accessibility Sitemap Contact Libraries eNewsletter Waste collection days Schools us Waste Libraries Parking Benefits Transport Jobs <Mee more results> Schools & education Marriages, births & your voice deaths Abor day in Make Schools & education heardMarriages, births & deaths Pay a parking fine Healthcare Transport Brockwell Park Healthcare Education Jobs Jobs Planning Parking Planning <MoreJobs results> ax e What’s on Abor Day in Brockwell Park Make you voice heard Services Get involved Search Lambeth Council’s website Council Tax Waste Schools & education Content-well links Council tax <read more > Jobs Waste collection days sibility Transport Get Involved What’s on Nelson Mandela visits Lambeth rvices Get involved Visitor, Resident or Ac Businesstiv e colo link ur Inac l i n k t i ve colo ur Nelson Mandela visits Lambeth Accessibility Benefits Marriages, births & deaths Waste <Mee more results> Benefits Transport nks links pular Contact us Make your voice heard Footer / header links. Accessibility inac Foote t i ve r colo ur Contact us Hi, tell us who you are Hi, tell us who you are ax Abor day in Brockwell Park lection days king fine Lambeth Council: A cooperative Council Log in What’s on News Get Involved Visitor, Resident or Business Services Get Involved Visitor, Resident or in Log Business Log in Get Involved What’s on What’s on What’s on Search Lambeth Council Search Lambeth Council’s website Services Popular Links Link active What’s on Services Council tax Schools & education Council tax Libraries Jobs Waste collection days Healthcare Transport Pay a parking fine Link normal Nelson Mandela visits Lambeth <More results> in BrockwellParking Park Make you voice heard Transport andela visits Abor Day in Brockwell Park Make you voice heard Benefits <read more > <read ParkingMarriages, births & deathsmore > Link active ion PlanningDay Abor Waste <read more > <Mee more results> <read more > Marriages, births & deaths Link normal Get involved Ser vices Council Tax Waste Drop down links are consistent interaction pattern across the responsive family. The fill colour Libraries Schools Make your voice in reflects the link background colour.Abor dayPark For example, a header link drop down would be navy blue on heard Brockwell navy blue. Healthcare Education Planning Sitemap Accessibility eNewsletter Sitemap Contact us eNewsletter Contact us Jobs Benefits Transport
  • 34. 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
  • 35. ISSUES 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. 4 column grid iPad 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 A more modular format than the desktop version iPhone 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 Log in rch Lambeth Council What’s on Services Get involved Ser v i ces Planning As this interaction is designed for the Waste power user, it is not expected that they Schools will select a profile. The picture icon Educationadditional remain but information has been Jobs removed. Benefits Transport iMac Accessibility Contact us Hi, tell us who you are Lambeth Council: A cooperative Council Services News Log in Get Involved Visitor, Resident or Business What’s on iOS Responsive family Search Lambeth Council’s website Log in Services Final homepage UI layouts for desktop, iPad (tablet), and Nokia Lumia (mobile) Search Lambeth Council What’s on Council tax Benefits Transport Libraries Waste Parking Healthcare Schools & education Marriages, births & deaths Planning Jobs Services Get involved Ser vi ces Council Tax Libraries Schools Healthcare Education Planning Jobs Benefits Popular links Waste Transport Council tax Waste collection days Pay a parking fine Accessibility Contact us Get Involved News What’s on Lambeth Council: A cooperative Council Services Hi, tell us who you are Log in Visitor, Resident or Business Get Involved What’s on Search Lambeth Council’s website Services Abor Day in Brockwell Park Make you voice heard <read more > <read more > Pay a parking fine Parking <More results> Marriages, births & deaths Waste <Mee more results> Nelson Mandela visits Lambeth Make your voice heard Abor day in Brockwell Park g n i k r aP t r o p s n a rT e n i f g n i k r a p a y aP sboJ s y a d n o i t c e l l o c e t s aW noita cude & sloohcS xat licnuoC sk n i L r a l u p oP su tcatnoC r ette l swe N e pametiS y t i l i b i s s e c cA stifene B shtaed & shtrib ,segairraM > s t l u s er er o M < Contact us Transport e t s aW eNewsletter Waste collection days Benefits Sitemap Council tax Jobs Planning Accessibility Schools & education Libraries Healthcare <read more > Council tax htebmaL stisiv alednaM no sleN Nelson Mandela visits Lambeth Popular Links > s t l u s er er o m e e M < gninnalP er a c h t l a e H s e i r ar b i L xat licnuoC secivreS > er o m d a er < > er o m d a er < d r a e h e c i o v u o y ek a M > er o m d a er < k r aP l l e w k c or B n i y a D r o b A stisiv alednaM nosleN htebmaL Healthcare e c i o v r u o y ek a M dr a e h Libraries ni yad robA k r aP l l e w k c or B Council Tax iPad
  • 36. DISCUSSION Limitations 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 necessary The 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. Susanna Willis Log in Search Lambeth Council What’s on Services Get involved Ser vices Council Tax Waste Libraries Schools Healthcare Education Planning Jobs Benefits Transport Accessibility Contact us su tca tno C y t i l i b i s s e c cA stfiene B stfiene B stfiene B t r o p s n a rT t r o p s n a rT t r o p s n a rT gninnalP sboJ er a c h t l a e H n o i ta c u dE s e i r ar b i L sloohcS x aT l i c n u o C e t s aW secivreS d ev l ovn i te G d ev l ovn i te G d ev l ovn i te G secivreS secivreS secivreS n o s’ t a h W l i c n u o C h t e b m a L h cr a e S