1585835

City of Richmond Submitted to: UNION OF BRITISH COLUMBIA MUNICIPALITIES 2005 Community Excellence Awards Best Practices – Website Category City of Richmond, BC Canada www.richmond.ca

1585835

City of Richmond 6911 No. 3 Road Richmond, BC V6Y 2C1 Award Submission

UNION OF BRITISH COLUMBIA MUNICIPALITIES 2005 Community Excellence Awards Best Practices – Website Category Project Summary: City of Richmond Website Re-design The goals of this project have been to re-design and re-build our City website in order to enhance its functionality for our customers and to make maintenance more efficient for our staff, so that content remains current and comprehensive. The City of Richmond website has been re-designed with a new look and feel and a more user-friendly navigation. The site has also been migrated to a new dynamic, database driven, system for content management. A visit to our new site is the best way to evaluate the success of this project. The site was launched December 2004 with a new URL: www.richmond.ca Summary Report Contents:

Project Overview…………………………Page1.

Website Architecture…………………….Page 2. Website Design……………………………Page 3.

Content Management System……………Page 4.

Innovations and Improvements………….Page 5. Special Features & New Content………...Page 5. Appendices*

*Appendices are optional pages included for visual illustration. Please disregard them if they are deemed to fall outside the guidelines for this submission.

- 1 -

Project Overview Architecture We believe the new City of Richmond Website illustrates an original and thoughtfully crafted approach to site architecture, and an innovative application of the DHTML (fly-out) navigation system, to effectively meet the challenges of accommodating a very large, comprehensive city website while making all of the site content more accessible to users. Design The design was developed to incorporate our brand identity, to create a positive and welcoming impression of our community and to effectively highlight the key navigation functions of the site in order to orient users and facilitate their access to site content. Standards and guidelines were established for styles and formatting to ensure consistency in appearance and quality. Content Management System The new City of Richmond website demonstrates a significant and successful user implementation of a recently developed technology for Content Management (IronPoint CMS Version 7) for use in a municipal environment. Richmond had significant input into the development of this version of the software and its ongoing enhancements. Innovations and Improvements Site features include innovative uses of technology to address community needs and department requirements such as the new Parks Database Search, which meets both the internal inventory and reporting needs of the Department in addition to providing source data for dynamically generated Parks’ web pages. The site also has new customer friendly tools such as the “Report a Problem/Request a Service” page, and the newly re-designed and more prominent Richmond Service Directory, which streamline and facilitate customer access to the City’s department contacts and information through our site. Special Features & New Content The new site still incorporates popular features such as Archives searches, our GIS system, our online Recreation Registration, online payments for parking tickets, tax certificates and more. The architecture has the flexibility to incorporate our future plans for the site including a new dynamic Community Calendar and more online payments and services. The site has a great deal of new content, particularly in the areas of Public Safety and Parks and Recreation. On this site we have worked hard to fill in the blanks that may have been remaining on our old site. In addition, we have added some useful pages to help customers find what they are looking for. They include the How Do I page, the My Property page and the Publications and Forms section. We are also working on a new section that will list all of the active Public Consultation Programs with links to online surveys and information. The Power of Team Development and maintenance of the City of Richmond website is the result of an ongoing coordinated team effort. Building on past successes, and planning for future development, city staff have worked to improve content and make our site more responsive to our customers. We are submitting our project for consideration for a UBCM award because we are all proud of what we have accomplished together to make a contribution to our vision “For the City of Richmond to be the most appealing, livable, and well-managed community in Canada.”

- 2 -

Website Architecture Organizing content and creating a navigation structure is challenging on any large website, but when the site represents between 25 and 30 business units, as in the case of any City site, the challenges are unique in the general scope of website design. These challenges called for innovative solutions and recognition that many of the common rules and common practices for web design could not be applied to the breadth and depth of content that the Richmond site provides. Richmond’s website currently supports about 3400 html pages, 7000 PDF files, and 2,000 images. Richmond staff laid out a plan for the organization of the site and then worked with a consultant, Graphically Speaking, to provide feedback on the site map and to help design the navigation. Primary Navigation Through analysis of best practices in Canada, the US and some European cities we observed that there were two types of category labels attached to primary navigation. They were customer focused categories and content focused categories. An increasing number of cities were opting for the customer focused option with labels such as resident, visitor, business. However, an analysis of the implementation of this system revealed a lack of consistency in the way that these labels were applied to similar content. There were also some inconsistencies in the types of labels used as many cities used a combination of customer oriented and content oriented labels. After a conducting users surveys and an intensive series of staff focus groups, we elected to use a content focused system for our primary navigation. When surveyed, our customers showed a stronger preference for content focused labels. In addition, this system required less duplication in the secondary navigation, and it allowed for more consistency.

Calls to Action Our research suggested that being consistent was a key consideration in navigation design. Labels should be grouped by type, i.e. topic labels together, and “calls to action” grouped together. On Richmond’s home page we have grouped our calls to action below the primary navigation bar and identified them with action verbs. We use action verbs to introduce our GIS and our Service Directory . Other calls to action are divided into two groups, one group contains the interactive site features, and another group lists frequently asked questions in a How Do I format. The home page also contains our vision statement, hot news items, and links to news & events, and our contacts section, site map, help section, and other utilities. Home page space was allocated to best meet customer needs. Secondary Navigation The decision to re-design the site was motivated in part by a desire to apply more current DHTML technology to site menus, allowing for multi-level “fly-out” menus for quicker access to site content. Fly-out menus have gained popularity in recent years, but applying them to a large and very complex site was challenging. It was agreed that with the high number of topics and subtopics under every category, applying this type of navigation on the home page would be impractical and overwhelming for users. An innovative plan to split the site into eight home pages was developed with our consultants. This approach allowed for visible main menus at the start of every main section on the second level, and hidden menus that “fly-out” from left to right when you mouse over main menu topics providing

- 3 -

quick access to the third and fourth level content. In rare cases where content went below the fourth level, or when a fly-out was not desirable, a dynamic, in-page menu would be generated. This approach made the home page content less overwhelming and very quick to download. It also created 7 additional staging areas for main content category topics. These staging areas ensured there would be space to introduce corporate messages and promote our City, something that is much more difficult to achieve when fly-out menus are introduced on the first level in the home page. Another unique aspect of our navigation is that topic labels with fly-outs attached are not clickable. This choice has greatly reduced the costly maintenance of overview pages. A special “category page type” had to be developed in the CMS software to accommodate unique aspects of this menu system. (Please see Appendix A for illustrated information.) Sidebar Quicklinks Again because our site has a great deal of content, it was felt that, for some visitors, even the fly-out menus would be daunting, and that it was important to bring popular content and related topics from other sections to the attention of users. For this reason a system of right side bar “pagelets was created to provide quick links to areas that our research found to be greater demand on the site. In addition, this sidebar includes a site search text field on every page, and a link to the News & Events Page where all current, transient, and topical information can be found. Website Design Design Criteria Graphically Speaking, a web design firm, was hired by the City to design the look and feel for the site. The City provided a detailed criteria by which they were asked to create a look that would position Richmond as a unique, diverse, modern, and dynamic urban centre and an exciting place to live, work and do business. Other criteria included the following:

• The design must fit an 800 X 600 pixel screen with a fixed page width. • The look and feel had to incorporate our Corporate Colours and a strong visible Brand Image on every

page, with our Coat of Arms and the name and location of our City dominant and our popular Heron Logo and marketing message included.

• The main and secondary page templates must include space for images depicting Richmond’s urban and natural environments, our diverse population and active lifestyle.

• The components of the design must be modular and easy to change making it possible for staff to refresh the look and feel with new images from time to time.

The design that was produced met these criteria and established a set of standards for the site that would ensure consistency and effectively support the key navigation elements on the site. Critical to the design philosophy was the elimination of page clutter to allow key site features such as menus and links and topic headings to stand out. A simplified system of visual indicators was applied to identify topics and links. The designer used subtle greys to highlight page divisions without competing with other visual indicators. In addition, styles for headings and subheadings were created with no spacing between headings and paragraph text in order to fit more content in one screen and reduce scrolling. Style Guide To ensure consistent application of styles by all users throughout the site a styles guide was developed and applied to embedded style sheets in the Content Management Software. Styles were applied to fonts for headings, subheads, emphasis text, photo captions, and body text, as well as photo border, table borders and table cell backgrounds.

- 4 -

Content Management System Goals & Objectives The decision to migrate our City website to a Content Management System (CMS) was driven by our goal to ensure the site content remains current by achieving the following:

• Provide a more user-friendly, browser based, system for creating and maintaining web pages so that departments can become more independent in managing their web content.

• Create a database driven site so that menus and templates are generated and updated dynamically, and that future changes to look and feel and site architecture can be achieved more efficiently.

• Provide for scheduled publishing, monitoring, reviewing, and archiving of content. • Enable the retrieval and the restoration of older versions of pages previously published on the site. • Manage and control user access to site content for editing and publishing. • Automate the application of styles for fonts and colours to ensure consistency in their application within

the site. • Publish the site in html with user friendly page addresses.

IronPoint CMS The City purchased the IronPoint Content Management System and implemented the newest version of this software in 2004. This was an emerging technology promising fairly robust capabilities compatible with our needs and with a comparably simplified interface, and it sold for a price that was considerably less than software from some of the major competitors in this field. In early 2004 while the look and feel was being developed, the files on our existing site were re-organized to conform to the new site architecture, then after several months of testing a migration script that was written by IronPoint, the old site content was imported into the CMS database in June 2004. Following the migration new templates, styles and images were applied using the editing tools imbedded in the CMS. Development of this version of the software was still ongoing while we were converting our site. Working closely with the software developer we were able to have considerable input regarding many of the software features. Currently, we have 27 people actively using the software to create and update content. In the month of May alone we published 480 routine site updates. Departments are becoming increasingly independent in the management of their site content.

- 5 -

Innovations and Improvements Richmond’s new web site contains examples of innovative uses of technology to address community needs and department requirements such as the new Parks Database Search, which meets both the internal inventory and reporting needs of the Department in addition to providing source data for Parks’ web pages. Initiated by the Website Coordinator and developed by Parks and IT staff the Parks Database was created to manage Parks inventories and information such as amenities, maps, plans photos etc. to meet the needs of the Parks Department for storing and updating information and generating reports. Because the data is collected and managed in a way that meets ongoing department needs, Parks staff are motivated to maintain the information in the database. The benefit for the Website is that web pages are created directly from selected database content. (See Appendix B) The new site also has new customer friendly tools such as the “Report a Problem/Request a Service” link from the Home page to the more efficiently designed Customer Feedback page (see Appendix C), and the newly re-designed and more prominently displayed Richmond Service Directory. The new Service Directory database is easier for staff to maintain which leads to better upkeep of the content (see Appendix D). Special Features & New Content Popular features which have been migrated from the original site include Archives seaches, our GIS Map, Recreation Registration, the Heritage Inventory database, online payments for parking tickets, tax certificates and more. Our news section continues to be the hub of current information. Our future plans for the site include a new dynamic Community Calendar and more online payments and services. New content was created in many areas of the site, particularly in the areas of Public Safety and Parks and Recreation. In addition, we have added some useful pages to help customers find what they are looking for. They include the How Do I page, the My Property page and the Publications and Forms section. We are also working on a new section that will list all the active Public Consultation Projects with links to surveys and information. The Parks and Recreation section has more detailed information on schedules and fees and they now provide virtual tours of many facilities, a feature that will help attract sporting events to our City. The Power of Team Building on earlier achievements, and planning for future site development, City staff have worked to improve site usability for our customers. Response to date has been generally positive with the site receiving over 350 thousand external hits in May. Excellence Can be Found in the Details: continually striving for incremental improvements, enhancing and maintaining content and online services, establishing and maintaining standards for page layout, and providing tools and training to ensure long term sustainability. Our website is the result of an ongoing coordinated team effort. The steering committee for this current project was made up of staff from our Communications and IT Departments. A representative advisory body was consulted on key issues, and staff focus groups were interviewed for input. The Administrators Group (TAG) approved the final design and an outline of the main architecture. Divisional staff worked hands on with IT staff to refine the architecture, complete the site conversion, and to create and format new content. The site was approved for launch in December 2004. City staff continue to work daily on site development and maintenance. We wish to acknowledge and thank consultants at Graphically Speaking and IronPoint for helping us contribute toward our vision “For the City of Richmond to be the most appealing, livable, and well-managed community in Canada.”

Appendix A Navigation Model Home

Discover Richmond

City Hall

City Services

Brand ID Navigation Bar Vision Help Contact Us GIS Map Service Directory Interactive City Register for Rec. Programs Order Tax Certificates …... How Do I: Report a Problem/ Request a Service Get Agendas…… Utilities Links: Site Map, Disclaimer, Copyright, Privacy Policy Related Links City Hall Address

• Overview • About Richmond • Maps & GIS • Tourist Guide • Transit & Airport Services • Photo Gallery • Community Organizations • Demographic Facts • Schools & Education • Health & Wellness • Housing • Special Events

• Overview • City Council • City Administration • City Departments • City Archives • City Buildings • City Bylaws • Finance, Taxes & Budgets • Corporate Plan & Achievements • Employment & Volunteering • Partners in Government • Local Elections

• Overview • About City Services • Planning & Zoning • Social Planning • Protecting the Environment • Recycling & Garbage • Roads, Dykes, Water & Sewers • Transportation, Traffic & Parking • Partners for Beautification • Land & Property • Permits & Licences

Business & Development

Parks & Recreation

Culture & Heritage

Public Safety

• Overview • Building • Development & Rezoning • conomic Development • Business Directory • Business Licences • Business Signage • Publications & Forms • Selling to the City • Tenders, & Proposals • Filming on Location

• Overview • About Parks & Recreation • Arenas • Pools & Waterplay • Community Centres • Sports & Fitness • Parks,Trails & Cycling • 5+ / Seniors • Youth

• Overview • About Culture & Heritage • Arts Centre • Art Gallery • Museums & Heritage • Gateway Theatre • Public Library • Public Art

• About Public Safety • Who to Call in Emergencies • Police/ RCMP • Fire-Rescue • Emergency Preparedness • Parking Services • Property Bylaw Violations • Pets & Animals • Environmental Health

Note: 3rd and 4th levels are not shown above. An example of the Fly-Out is shown below.

http://www.richmond.ca/cityhall/overview.htm

Appendix B Parks Database Data Base Search Page: http://www.richmond.ca/parksrec/ptc/parks/amenities.htm This Page: http://www.richmond.ca/asp/parks/park.asp?ID=68

Appendix C Report a Problem/Request a Service Report a Problem/Request a Service is a link on the home page and in other pages that takes you to a one stop customer feedback form that is directed to departments for follow up. http://cms.city.richmond.bc.ca//Page2466.aspx?PageMode=Hybrid

Appendix D Service Directory – New Database Content Maintenance Interface for Internal Use

COMMUNITY EXCELLENCE AWARDS

Small Community (population under 5,000) Mid-Size Community (population between 5,000 - 20,000) Large Community (population over 20,000) Regional District

LEADERSHIP & INNOVATION

APPLICATION FORM

SELECT THE CATEGORY YOU ARE ENTERING: - Use ONE application form per project - Choose only ONE category below

Name of Local Government: _______________________________________

Project or Program Title: __________________________________________

PARTNERSHIPS: Local Government and School Board Collaboration

DEADLINE: JUNE 20, 2005Questions? Call Joslyn at 604-270-8226, Ext. 103

Best Practices Best Practices - Website (Address: www._________________________) Best Practices - Best Annual Reporting

BEST PRACTICES

By making this application, I understand that all materials will be kept by UBCM and are available for viewing by other UBCM members through the UBCM Community Excellence Awards library.

Signature: _______________________ Name (print): ___________________ Date: ___________

Phone: ________________________ Fax: __________________________

Contact Person: ________________________________________________

Contact Title: ___________________ Email: ________________________

My submission contains:__ 8 copies of the completed application form__ 8 copies of the one-paragraph summary of the project/program being submitted__ 8 copies of the five-page summary report__ 8 copies of the resolution supporting the application from council/RD board__ 1 CD/electronic copy of my entire submission__ 1 copy of annual report (if applicable)

Application Check-list:

City of Richmond City Council Resolution Excerpted from the Minutes of June 13th, 2005 20.

UBCM COMMUNITY EXCELLENCE AWARDS (Report: June 6/05, File No.: 01-0083-01) (REDMS No. 1589618)

R05/11-22

It was moved and seconded

That the City’s entries in the Union of British Columbia Municipalities’ 2005 Community Excellence Awards, be supported, including:

(1) Best Practices/General: RAV Public Consultation; (2) Best Practices/Website: Redesign and re-launch of City of Richmond Website; and

(3) Best Practices/Best Annual Reporting: City of Richmond 2004 Annual Report. CARRIED