Lambeth Council's Website Redesign
-
Upload
susanna-willis -
Category
Design
-
view
277 -
download
0
description
Transcript of Lambeth Council's Website Redesign
An iterative redesign of LAMBETH COUNCIL’S
WEBSITE
INTRODUCTION AND BACKGROUNDWhat is redesigned?
This presentation outlines the redesign of Lambeth Council’s website based on the findings
and recommendations of the Evaluation Report. This evaluated the usability and user
experience of the website via a standard CIF format and a benchmarking method against the
(user-centered) Government Digital Service’s (GDS) design principles.
Benchmark site GOV.UK The GDS’ principalswww.lambeth.gov.uk
The primary user groups are people with a connection to the London Borough of Lambeth.
User research indicated that the biggest factor influencing users’ service needs, interactions
and behaviour was their connection to Lambeth. These distinct groups defined 3 personas:
Visitor, Worker and Resident.
INTRODUCTION AND BACKGROUNDWhy?
Lambeth Council is initiating a paperless, self-service culture by cutting posted communication
and offline touch points – and instead the community is directed towards Lambeth’s website to
carry out tasks. It is therefore imperative that this channel is designed to be accessible to the
entire community: providing intuitive ease-of-use similar to the former offline channels.
www.lambeth.gov.uk is now the main touch
point
Post and face-to-face channels reduced
The three designed personas, from left to right: Visitor, Worker and Resident
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.
AIMSTo what end?
The projects scope is to redesign and prototype Lambeth Council’s website.
The design aims reflect the Evaluation Report’s recommendations, which are listed in the
following table.
Users’ Pain Points Redesign Deliverables
Poor distinction of links resulting in
inefficient navigation.
Consistent link style, in strong
contrast with the body content.
Create clear, legible paragraph
styles similar to the GOV.UK format.
Style guide to define redesigned
aesthetic and interactive link rules.
Poor homepage hierarchy and
extraneous content leading to slow
navigation.
It was suggested that key (resident)
tasks like ‘council task’ should
precede council communications
or business needs. Redesign
the information architecture to
streamline content to focus on the
users’ information needs.
Wireframe and prototype
redesigned homepage.
Language and category headings
were difficult to understand.
Aim the tone of voice at the user
with simple, plain English. Category
headings should be labeled as the
user would describe the nested
content or task, not thematic,
industry (Council) language.
Updated copy for category labels.
Consistent deviation from the
optimal path.
Provide consistent and clear
navigation and signposting to
improve the task efficiency and
experience.
Task analysis and user journeys
to show navigation, including
interaction destinations and error /
content messages.
Poor retention and learnability score
– demanding a high cognitive load.
Provide a consistent and intuitive
site-wide design language so
it is quick to learn and easy to
remember upon returning to reduce
cognitive load and create a more
positive overall experience.
Redesigned site architecture
and navigation with consistent
interactions.
Non-responsive design restricts on-
the-go access.
Create a mobile-first design, built
with a responsive framework so a
consistent layout can adapt to the
device or media query.
Design a responsive layout.
The recommendations and deliverables can be simplified in the following aims
IMPROVE PROMINENCE OF LINKS
3
TASK-CENTRIC HOMEPAGE AND NAVIGATION, DESIGNED WITH USERS’ REQUIREMENTS FIRST, LEADING THE PAGE HIERARCHY
2
SIMPLE COPY WHICH SPEAKS TO THE USER
1
RESPONSIVE DESIGN
4
The presentation will aim to explain how the aims are achieved in the user interface and
wireframe designs, explaining the thought and rationale behind the decisions.
ISSUES
AIM: Simple copy which speaks to the user
ISSUESCard sorting to guide the language and site architecture
Optimal Sort A group of participants took part in a card sorting exercise to :
A / Reduce the site content into essential needs and simplify the language, and B / Divide the services into their chosen headings using the online sorting tool
(www.apps.optimalworkshop.com).
Optimal Workshop is an online card sorting tool
A screen shot of one participant’s
card sorting results. They chose top
level headings of: Unsorted, Visitor, Residents, All and
Businesses.
In the first task participants were asked to rename the categories to simplify the language as they saw fit, and place them in an order of importance. The categories were taken from the website’s content list (sitemap) which is used as a navigation tool. Page hierarchy was
not indicated. The subcategory Council Tax repeatedly came above Benefits where this is currently nested. The results helped to create a new collection of page names and site-wide
vocabulary based on the terms’ frequency of use or an average of results.
With the new page terms, participants were asked to group them under appropriate headings. The results were varied, and it was difficult to find common patterns. However, one revealing result grouped the pages by user type. This closely mirrors the personas generated through
the user research: Resident, Visitor & Worker (which is ‘Business’ in the card sort). In the exercise, participants were unable to duplicate the services and place them under more than one heading. However, in reality there might be a crossover. For example, both Business’ and
Residents would need information on refuse collections.
ISSUESOrganising the site map by
users’ service needs
Power UserResidentVisitor Business
Marriages
Planning Permission
Schools
Parking
Power User would need fast access to the full site map
Council Tax
Housing Benefits
Elections
Schools
Parking
Jobs
Libraries
Waste
Healthcare
Planning Permission
Marriages
Planning Permission
Waste
Business Rates
Parking
Jobs
Nee
dsU
sers
Following the card sorting exercise, the top level navigation divides the task flow by users’
personas. The site map has been organised by the personas’ needs, and some services have
been repeated where their use is shared by multiple personas. The persona ‘Worker’ has been
renamed to reflect the card sorting definition of ‘Business’.
Persona 4: The Power User
An additional persona was designed for the Power user (hunter) who is defined by the need
for fast access to content and not their relationship to Lambeth. This persona knows exactly
what he/she is looking for, and requires it on-the-go and quickly. Accessible links for key
services and device-responsive content is their priority.
Non-service categories have been grouped separately on the sitemap. These are:
News, Logo, Popular links, Social media links, What’s on, Get involved, Accessibility and
Contact us. None of these would be considered user needs – but necessary for all users.
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.
ISSUESExisting sitemap model
In order to redesign the navigation and homepage content, it is important to analyse the information layers within the existing model. Due to the large scale and CMS-driven nature of
the site, a spreadsheet sitemap was the best way to account for all the content of Lambeth Council’s existing model. This is arranged in a tree structure. The Target Persona column is
a colour key to indicate which persona the information targets. At a glance you can see that Residents have a much larger range of information needs than Visitors - and the user research suggested that their frequency of use is higher. Client (Lambeth Council) focused information
is highlighted in pink. This content will be nested below the users’ content in the user-centric category hierarchy.
Level 1 Level 2 Level 2.1 Level 3 Client need? Target persona Need priority
Home
Search All 5
Cookies and privacy All 1
Services
About Lambeth
Lambeth by local area All 1
Maps of Lambeth All 1
Moving home 1
Our campaigns All 1
Publications All 1
Tourist attractions 1
Travel 1
What’s on Visitor / Resident 1
Advice and benefits
Benefits 5
Council Tax 5
Money advice 3
Thinking about work and training? 2
Business
Business rates 5
Business support and development 3
Commercial property 2
Licensing and street trading 2
Markets 2
Tenders and contracts 2
Trading standards 2
Community and living
Births Visitor / Resident 2
Civil partnerships, nationality checking and civil Visitor / Resident 2
Community groups, centers and facilities Visitor / Resident 2
Crime prevention Visitor / Resident 2
Deaths, funerals and cremations Visitor / Resident 2
Emergencies Visitor / Resident 4
Equality and diversity Visitor / Resident 3
Faith in Lambeth 2
Information for care providers All 3
Marriages Visitor / Resident 3
Volunteering Visitor / Resident 3
Council and democracy
Comments and complaints All 1
Consultations All 1
Councilors, MPs and MEPs and Mayor of Lambeth All 1
Data Protection and Freedom of Information All 1
Democracy and elections All 1
Lambeth First All 1
Making a difference - our aims and priorities All 1
Scrutiny All 1
Statistics and census information All 1
Youth council All 1
Education and learning
14 to 19 learning 5
Adult education 5
Education Estates and Capital Projects 3
Looked after children’s education achievement 4
Parental support 4
Schools 5
Under fives 5
Youth courses and activities 5
Environment
Animal welfare 3
Cleaner Streets 4
Environmental crime 4
Environmental health 3
Food safety 3
Get involved to improve your neighbourhood 3
Parks and green spaces 3
Pollution 3
Recycling, rubbish and waste 5
Regeneration 2
Health and social care
Accessible transport Business / Residents 4
Carers Visitor / Resident 4
Children, young people and families Visitor / Resident 3
Healthcare 5
How to get social care support 5
Missing persons 3
Self Directed Support 2
Services for adults 2
Support groups and boards 2
Housing and planning
Building control All 5
Council housing 5
Council leaseholders and freeholders 3
Estate regeneration programme 2
Homeless support and advice 5
Housing options 5
Land and premises All 3
Planning All 5
Private housing All 3
Save energy in your home All 3
Supported and sheltered housing 5
Jobs and careers
Adults’ and Community Services careers 5
Benefits of working for Lambeth Council All 5
Careers and educational advice 3
Children and Young People’s Social Care careers 3
How to apply 3
Lambeth working Visitor / Resident 2
More jobs Visitor / Resident 2
Leisure and culture
Arts Visitor / Resident 2
Libraries 4
Local and family history 3
Sports and recreation 4
Transport and streets
Cycling and walking 5
Nuisance vehicles All 1
Parking All 5
Road Danger Reduction All 3
Roads, highways and pavements All 2
Street care and cleaning All 2
Transport design consultations All 2
Transport events and campaigns All 2
Transport projects All 1
Transport strategy All 1
Get involved
Be part of the cooperative council 1
Businesses can get involved 1
Funding opportunities 1
Influence decisions 1
Lambeth champions award 1
Local volunteering opportunities 2
Get involved in crime prevention 2
Snow wardens 1
Contact us
Contact information 4
Search this site 5
Accessibility
Ease of use 5
My Lambeth account
Account login 5
Account details 5
Register 5
Top story All 1
A-Z 4
Popular pages All 1
Latest News All 1
What’s on All 1
e Newsletters
Sign-up (form field) All 1
Follow us Online 1
Participant 1:“This could be
more useful”
The Lambeth account login moves
throughout the user journey. This
should be a consistent feature in
the page template. Suggest top
right corner.
Participant 1: “This should
be a link on the homepage”
Resident
Visitor
Business
Get involved could be
nested within the tertia-
ry layer. It is unessential
content.
At the moment the social icons
only appear on the homepage.
These could be consistent naviga-
tion icons throughout the pages.
*The Need priority scores and the Target Persona results were based on participant feedback and user research questionnaires, however, this was generated from a small
research sample and therefore, the validity of this information would be improved with a larger research sample.
ISSUESAnatomy of the existing homepage
The site’s top level elements are shown in boxed-out, colour coded sections. All but the central
content-well are navigation elements. The positioning and labeling of these elements is not
consistent from page to page.
Left nav (consistent)
• Services• About Lambeth• Advice and
benefits• Business• Community and
living• Council and
democracy• Education and
learning• Environment• Health and social
care• Housing and
planning• Jobs and careers• Leisure and
culture• Transport and
streets
(Inconsistent)
• My Lambeth account
Header (consistent)
• Site search• Cookies and privacy• Date• Logo / home
Top nav (interchangeable field)
• Home• A to z• Do it Online• Get involved• Contact us• Search this site• Accessibility
Content-well(Interchangeable field)
• Topstory• A-Z• Popularpages
Sidebar (interchangeable field)
• Latest News• What’s on• e Newsletters• Follow us Online
In user testing, participants’ missed the optimum journey when links were
nested in the right sidebar which lead to confused and inefficient user journeys.
It was a blind spot and should not contain important information in the redesigned
layout.
The content-well contains local news items. Participants saw this as a PR strategy, satisfying clients’ (Lambeth Council) needs over theirs. This would be
considered high value ‘retail space’ as it is a sizable and central content area, which would gain a large number of fixations.
This is where links to the users’ task-needs should be consistently located to provide the most efficient user journey.
Categories and subcategories
Library book search
Homepage
ISSUESAnatomy of the new (desktop) homepage
Separating client needs and user needs
In addition to filtering the content by persona, the site will separate client content from users’ needs. User needs (services and popular links) will head every page and client content (PR,
news) will follow. The client content will be attractive with media, event and news imagery with balanced prominence within the page hierarchy, but not disrupting the user journey.
User Content:The header will be clean and sparse comprising of a consistent: logo, persona profile icon and
login form. The nav bar will contain standard unfiltered links which access to the full site map. This comprises: Services, News, Get involved and What’s on and a large, intelligent search bar.
This will consolidate three existing a-z search functions. Via cookies and popular searches, the search bar will predict results from the first letter entered in the form field. It will auto-correct
spelling errors and pull thematic results. For example, typing in ‘benefits’ would pull up council tax exemption results if that was a common connection.
The content-well will contain the filtered content. The personas’ common tasks will populate the Services and Popular results sections.
Client Information:This separates content that is of less value to the user but necessary for the client to include.
Wireframes
User content
Client content
Filtered content
Header
• Logo / home• Profile selection• Login (My Lambeth
Account - existing format)
Top nav
• Home• Search• Get involved• What’s on• Social network links• Search field
Content-well
• Services• PopularLinks• Lambethaccount
Client needs
• News• Get Involved• What’s on
User content Client content
2!
1!
3!
Intelligent search bar. Primary navigation for the Power User
1
2 Intelligent content search. This is not navigational it is information seeking.
3 Client section with large attractive image / media boxes
4 Filtered services
5 Profile selection to filter content
4!
5!
ISSUESThe new persona-driven site map with dynamic content
The figure below shows the primary and secondary layers of the site architecture.
The information is tailored to each personas’ needs to create dynamic and meaningful content
based on personas’ search patterns. It will create intelligent user profiling; populating a profile’s
page with only the content they need. No extraneous content. This will be achieved through the
content management system. By default the user will adopt the Power User persona which is
anonymous and have full access to the site map. Although the content is unfiltered they would
tend to navigate directly to the relevant areas via the search bar.
Alternatively, to filter the content, the user has the option to select their appropriate user profile,
i.e. choose Visitor, Resident or Business? The homepage will repopulate with information
specific to that users’ category needs.
The results for News, Service and Popular pages will be filtered according to that profiles’
statistical need. Profile activity and user journeys will be recorded to feedback into the way
the tailored results are filtered. Therefore, the more the website is accessed, the more refined
the profile filters will become and in time, the content selection will be a perfect match for that
profiles’ task needs. On page load, the optimum result will reside top right of the content well
and the user will unconsciously click through to the subcategory pages. This will reduce both
the cognitive load and the pause time on the homepage where previously participants’ spent
an average of one minute before locating their first link in user testing.
These pages will filter content specific to the users selected profile. If they choose no profile, the Power User, they will access the full site map. This will mean there is more extraneous content on the page but this persona
however is expected to use the search function over click-through navigation as their interaction pattern is to retrieve specific content at speed.
This is where the user will select the user profile (persona) that fits their relationship with Lambeth
This content is consistent and non
specific to profile type
Services 2.2News 2.1Popular
Pages 2.3 Follow 2.4Cookies /
Policy 2.6e Newsletter 2.5
Get Involved 2.7 Contact us 2.8
Login 1.0Change
User 1.1 Search 1.2 What’s on 1.3Social
media links 1.4
Home 00
Resident 1.1.2 Visitor 1.1.2Business 1.1.1
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
ISSUESImproving task flow and cognitive load with intelligent
content management systems
Improving the task flow and modes of interaction The task journey occurs with one category page and no click-throughs. New (requested)
content populates beneath the interaction (click) and the page will continuously grow, and
expand vertically. This interaction pattern is to scroll for information which will be repeated
through the site to for consistent and fast navigation.
Existing task flow
Improved task flow was wireframed with
Omnigraffle.
“OH –THERE’S NO WHERE TO PUT MY POSTCODE IN”PARTICIPANT 3, TASK 1: FIND YOUR BIN COLLECTION DAY
The participant expected to locate the day of his rubbish collection via a postcode entry field.
With an intelligent CMS system that could cross reference residential addresses with the
borough’s rubbish collection routes, the task could be resolved immediately. Instead, the user
journey involved cross referencing these online PDF spreadsheet of these details yourself. A
slow and inefficient process demanding a high cognitive load. I
Screen shot of a recorded wireframe interaction sequence using Silverback
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.
ISSUES
AIM: Improve links and paragraph styles
ISSUES
“IS THIS A LINK... OH YES, IT IS. THEY ALL LOOK DIFFERENT!”
PARTICIPANT 3, TASK 3
ISSUESA style guide to the redesigned link scheme
The redesign has created a consistent site-wide link scheme. A simple and recognisable
scheme will improve learnability and memorability, as well task efficiency.
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
‘Client content’.
Category heading.
Nav bar headings.
Content-well links
Footer / header links.
iPadiMac iPhone
Link active
Link normal
Link active
Link normal
Links styles across the responsive
family
Drop down links are consistent interaction pattern across the responsive family. The fill colour reflects the link background colour. For example, a header link drop down would be navy blue on
navy blue.
Active link colour
Inactive link colour
Footer inactive colour
The scheme uses
the font Neue Haas
Grotesk Display Std 55
Roman throughout.
Their are two point sizes:
content-well links are
larger than the standard
elsewhere for page
prominence.
Footer, header and
client content are white.
All others are navy. The
active state is universally
cyan.
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
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
ISSUES
Responsive family
Final homepage UI
layouts for desktop,
iPad (tablet), and
Nokia Lumia (mobile)
The responsive grid layout for mobile and tablet
When a media query is run, the 12 column desktop layout will flex to a 4 column grid system on both tablet and mobile devices. Some content is reduced in the tablet version to create white space around user services. The client content is pushed to the left side
bar. This was a blind spot in user testing so we would avoid user placing user content here.
The mobile version is designed for the on-the-go Power User and the search field is the primary navigation function for direct task seeking. This framework holds 50% less
content than the desktop version to maintain white space around Services.
A more modular format than the
desktop version
A fixed scroll tab. This is above the main
content and can be removed with a slide
and swipe gesture off the canvas / screen
iPad
Lambeth Council: A cooperative Council
Council tax
Libraries
Healthcare
Planning
Benefits
Waste
Council tax
Waste collection days
Pay a parking fine
<More results>
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
<Mee more results>
Services Get Involved What’s on
Services Popular Links
Search Lambeth Council’s website
Log in
Hi, tell us who you are
Visitor, Resident or Business
Nelson Mandela visits Lambeth
Make your voice heard
Abor day in Brockwell Park
iPad
iMac
iOS
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
Lambeth Council: A cooperative Council Log in Visitor, Resident or Business
Hi, tell us who you are
ServicesCouncil tax
Libraries
Healthcare
Planning
Popular linksCouncil tax
Waste collection days
Pay a parking fine
Search Lambeth Council’s website
Services Get InvolvedNews What’s on
Accessibility Sitemap eNewsletter Contact us
News
Nelson Mandela visits Lambeth <read more >
Abor Day in Brockwell Park
<read more >
Get Involved
Make you voice heard <read more >
What’s on
Benefits
Waste
Schools & education
Jobs
Transport
Parking
Marriages, births & deaths
A larger reduction in content. The mobile version is designed for the Power User – retrieving
information fast. The search bar is much larger it is central to the
mobile version’s interactions
iPad
iPhone
4 column grid
As this interaction is designed for the
power user, it is not expected that they will select a profile.
The picture icon remain but additional information has been
removed.
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
DISCUSSIONLimitations
The aims lack statistical validity The user research and summative (site) evaluation, on which the scoped aims are based,
were collected from a very small number of participants and therefore lack validity. A next step would be to collect a much larger sample, and with repeated user testing to either support or rule out the aims and redesign. If the aims were validated, the next phase would be to create a
testing plan to user test the redesigned prototype.
Beta user testing necessaryThe functionality of streamlining extraneous page content for profile users is based on user
research data on task popularity. This suffices for ideation prototyping – but it does lack accuracy and would not be fit for commercial use.
The live product would be able to collect the same data based on real user interactions. The intelligent profiling would be achieved through a CMS (content management system) to create dynamic content personalization based on users’ search patterns. As usage and interactions
increase, the more advanced and accurate the intelligent profiling system will become. To move forward with project, extensive user testing of an iterative beta is necessary. A rich set of profiles’
pattern data would lead to improved efficiency, satisfaction and delight! Volunteers welcome!
Thank you for your time. S u s a n n a W i l l i s
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved
Log in
Accessibility
Contact us
Search Lambeth Council
Council Tax
Libraries
Healthcare
Planning
Benefits
Waste
Schools
Education
Jobs
Transport
S e r v i c e s
What’s on
Services Get involved