Lambeth Council's Website Redesign

of 36
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report
Category:

Design

Published:

Views: 41 | Pages: 36

Extension: PDF | Download: 0

Share
Description
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…
Transcript
  • 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 Sit
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x