.png)
New Plymouth District Council's (NPDC) existing website was uninviting, unintuitive and wasn’t performing its task of delivering publicly important information and engaging the citizenry of New Plymouth.
An organization as large as a District Council has a large number of internal teams and a huge variety of services provided. Connecting these services and communicating this information to the public is a massive challenge. Being a content managed website using Umbraco CMS, our design needed to provide the client a structure that pulled erverything together but also provided flexibility.
About
Design challenge
Design and a build a content managed website that provides a huge range of information coming from many disparate business units. The design needed to enable access to information and services whilst also delivering an identity resonant with the area.
Role and contributions
- Shared role doing Business analysis and Discovery
- Design lead for user interface and user experience design
Discovery
We started the project with a few existing pieces of knowledge. NPDC staff had completed a Voice of the Customer survey and also some starting user stories as a requirements document.
To get our head into the operation of the council and its role in the community, we traveled to NPDC for a week. Our discovery consisted of interviewing a range of council stakeholders and also members of the public who were visiting the council.
To get our head into the operation of the council and its role in the community, we traveled to NPDC for a week. Our discovery consisted of interviewing a range of council stakeholders and also members of the public who were visiting the council.
Stakeholder interviews and requirements workshops
As the most extensive part of our Discovery session we talked with 7-8 critical teams including call centre staff, front desk staff and internal operations.
Along with our interviews of call centre staff we also shadowed call centre operators while they talked to customers live, allowing us to start to build a picture of the most common issues they faced.
Along with our interviews of call centre staff we also shadowed call centre operators while they talked to customers live, allowing us to start to build a picture of the most common issues they faced.
What we learnt
- The reception staff and the call centre staff are the frontline to the public. It wasn't just the problems they were solving that was important but also their attitude and warmth.
- Inside the council there is a non-stop process of uploading documents and updating webpages for critical council processes such as hearings.
- Need to simplify complex processes for the public and reduce jargon.
- Users need to trust the content is relevant or up to date.
Existing research, strategic documents and competitor analysis
In the lead up to the project, NPDC staff had undertaken Voice of the Customer surveys. We also reviewed the main strategic documents for the council and also undertook a competitor analysis of other councils.
What we learnt
- Users loved the existing A-Z search bar.
- Other websites did a great job of interlinking content in various formats: menu, sidebar, related links and wanted this for future websites.
Design: IA and navigation
If NPDC need to communicate and engage with the public effectively and our success lay in our ability to provide a structure to this information. Content is broad in scope of services and business units. Each of those sections also has a large depth of information.
In addition, a system needs to be provided to the content editors that allows them to control it's complexity over time. Large content management websites undergo content drift as things get added or removed, become irrelevant or people leave the organisation.
In addition, a system needs to be provided to the content editors that allows them to control it's complexity over time. Large content management websites undergo content drift as things get added or removed, become irrelevant or people leave the organisation.
Old website issues
- The navigation only has 3 top level categories but the actual content is very vast and deep, this resulted in users having to click through many layers of navigation or page loading.
- NPDC has many separate subsites with their own branding. We need a way of both navigating to them and controlling them. They also need their own content pages and thus add more sitemap complexity.
Research
Using the findings from VoC research, NPDC members had pulled together an initial IA, using desktop research of other national and internationally located councils. Effect then also worked on grouping these topics.
A key decision we made was a category called 'Services' which holds the vast majority of day to day actions people undertake. We then separated content into 5 other major categories grouped by themes releveant to the user and not by any specific business unit.
Home and Property for example contains not only all the building and planning units but also information relating to homeowners' properties such as rates or water infrastructure.
The council is promoting New Plymouth as the 'sustainable lifestyle capital'. The category of 'Leisure and Culture' incorporates all the lifestyle things the council supports including running parks, events and museums.
'Our focus' was more of an informational section allowing the members of the public to understand what the council is doing and why they are spending money. 'Council' in contrast is more operational about how it is run and how you can engage with council.
A key decision we made was a category called 'Services' which holds the vast majority of day to day actions people undertake. We then separated content into 5 other major categories grouped by themes releveant to the user and not by any specific business unit.
Home and Property for example contains not only all the building and planning units but also information relating to homeowners' properties such as rates or water infrastructure.
The council is promoting New Plymouth as the 'sustainable lifestyle capital'. The category of 'Leisure and Culture' incorporates all the lifestyle things the council supports including running parks, events and museums.
'Our focus' was more of an informational section allowing the members of the public to understand what the council is doing and why they are spending money. 'Council' in contrast is more operational about how it is run and how you can engage with council.
IA testing
Our developers built a navigation / IA hybrid tool that would allow the visualisation of the IA and the navigation to be toggled. Content administrators could test using content into the back end and we can also easily copy different versions of the IA out to test them.
An NPDC staff member then undertook guerilla testing at council with members from various teams who would effectively act as members of the public.
We ended up making minor changes to 2nd level items. 'Our focus' was renamed to 'Planning our future' as it wasn't clear what was inside this category.
We ended up making minor changes to 2nd level items. 'Our focus' was renamed to 'Planning our future' as it wasn't clear what was inside this category.
Navigation decisions
With the broadstrokes of the sitemap established, we then needed to structure the website to navigate this board and deep content. The sitemap could be up to 5 levels deep, this information needed to be discoverable. We adopted a multi-pronged approach to navigating and finding information consisting of multiple navigation options, search and A-Z finding linked to tagging pages, and on-page quick links of various sorts to create connections through the content.
Subpages and page template management
A challenge with content managing these deep and wide websites is that new content is being removed and added continuously. A user might make a page and then another admin later will want to add sub-pages. We needed a structure that wasn’t strictly defined by landing page or content page type and instead made a single hybrid page type.
The top level pages such as ‘Services’ or ‘Council’ were fixed and are their own specific landing page type. The vast majority of content pages are added as a ‘standard content page’, which simplifies content creation for editors. We had the option of creating landing page templates and then content templates, however many pages are a mix of both. We wanted to avoid confusion and lack of flexibility in the future if a content page has been added and then needs sub-pages and thus becomes a landing page also. Editors can add or remove pages as they see fit.
<--------------insert page type image wireframes ---->
A user can add content and also sub-pages to any standard content page. The standard content page has a sub-page navigation block which automatically adds to the page if there are any child pages.
The top level pages such as ‘Services’ or ‘Council’ were fixed and are their own specific landing page type. The vast majority of content pages are added as a ‘standard content page’, which simplifies content creation for editors. We had the option of creating landing page templates and then content templates, however many pages are a mix of both. We wanted to avoid confusion and lack of flexibility in the future if a content page has been added and then needs sub-pages and thus becomes a landing page also. Editors can add or remove pages as they see fit.
<--------------insert page type image wireframes ---->
A user can add content and also sub-pages to any standard content page. The standard content page has a sub-page navigation block which automatically adds to the page if there are any child pages.
It is set up that the sub-page component is a requirement page. An editor can change its location if needed to fit the flow of content but cannot remove it from page. This feature is even more essential on our mobile screens where we don’t have room for a full sidebar. This ensures that on each page a user visits that they will always be able to see any subpages. A trade off is that these subpage links can take up extra space on the page.
We discussed whether sub-page links should have images or icons to assist with visual identification on page. However due to the large number of pages and many page snot having a related image we opted not to create a system with a large amount of mess.
We discussed whether sub-page links should have images or icons to assist with visual identification on page. However due to the large number of pages and many page snot having a related image we opted not to create a system with a large amount of mess.
Sidebar
Our desktop designs have a sidebar showing your position in the nested structure of a first level navigation element. So if a user is on the ‘Services’ section it will show how they are sitting within the Services sitemap but not any of the other top level items. This focuses the user on the depth of information within that specific category and aims to not overwhelm them.
We have set this up to be links only, and not an expanding accordion that a user can navigate to. Many opening and closing accordions can be confusing, the clickable structure serves to quickly highlight their current position, acting as a guide post. As some structure are 4 levels deep with many pages, being able to open and close all of these becomes very messy.
We have set this up to be links only, and not an expanding accordion that a user can navigate to. Many opening and closing accordions can be confusing, the clickable structure serves to quickly highlight their current position, acting as a guide post. As some structure are 4 levels deep with many pages, being able to open and close all of these becomes very messy.
Desktop mega nav
A mega menu style for desktop was decided on, giving access to 1st level links when closed and then 2nd level links when opened. We decided to focus the experience and not show 3rd level links, allowing for a wider information architecture at second level.
From the second level users can navigate on page to deeper content with either on page links or the side bar menu allows deeper navigation options.
From the second level users can navigate on page to deeper content with either on page links or the side bar menu allows deeper navigation options.
Design: Visual design as public communication
In addition to an information structure that shapes and delivers information and services, the visual design strategy was part of how we aimed to create a more engaging civic experience. There is no point in a new IA if people don't wan't to be on the site.
NPDC's communication goals
As a result of our Discovery phase we were able to summarise NPDC's communicatoins goals as the following:
- Lifestyle capital - The council needs to tell the story of the great community and lifestyle on offer in New Plymouth, a city with rapid and exciting development.
- Real people in the community - NPDC is not the blank face of bureaucracy, instead it is real people, with real engagement who participate in and are members of the community.
- Building a better city together - NPDC is not a fuddy-duddy stuffy institution, instead it is a team of citizens, professionals and high achievers driven to make New Plymouth a great place to live and work.
- A framework and backbone for New Plymouth - The council provides a framework and backbone for everyone to live better lives, whether it is a building a house, running a business or participating in the community.
Visual design brief
Our brand identity workshop expressed a desire to friendly, approachahle but still professional.
As we walked about New Plymouth we found that NPDC logo and NPDC blue are the most consistent piece of branding, physically adorning the city and even its pamphelets. It will be a solid starting point for our visual identity design.
Our visual design success critera
Based on our discussions with the client our reverse brief we had written had 2 essential pillars: be unique to the region’s environment and heritage and to enhance and strengthen the existing logo that is embedded into the built infrastructure of the city.
These goals were further clarified by the following:
These goals were further clarified by the following:
- Is approachable and welcoming to all and represents the NPDC as a professional, and forward-thinking organisation.
- Builds on the brand continuity stemming from the ubiquitous NPDC logo
- Is ‘clear’ - uncluttered and easy to read, with jargon free content
- Is unique to New Plymouth’s environment and heritage
Visual design workshop
In spirit with NPDC’s aims to work with the community we proposed running a co-design workshop with local New Plymouth artists to develop a meaningful visual identity. Artists work visually to understand, contextualise and express their thoughts and feelings of their world. By co-creating with artists we could develop a visual language that is authentic to the region.
Our two day workshop consisted of some really robust debate about what was important and how to depict it. Pulling from strong imagery of an existing artwork gifted to the council, as a group we started to identify similar motifs that expressed their connection to New Plymouth. The talented group we worked with were also on board with the council’s aim to keep our designs aligned with their existing brand shape that is ubiquitous through the region.
Our two day workshop consisted of some really robust debate about what was important and how to depict it. Pulling from strong imagery of an existing artwork gifted to the council, as a group we started to identify similar motifs that expressed their connection to New Plymouth. The talented group we worked with were also on board with the council’s aim to keep our designs aligned with their existing brand shape that is ubiquitous through the region.
From visual concepts to design language
Based on the proposal put forward by the artists, we created a shape language that symbolized the region. The conceptual shape, the 'Kureitanga' holds and protects all that is important within it. Instead of making a whole new icon for the region we imbued the existing icons with meaning and then developed our own language to express it.
Post workshop, my role was to synthesize a lot of these great ideas into a singular visual language. The common motifs were starting to pull on a similar visual language of strong horizontals offset with swooping curves.
From there these core shapes were part of every visual design decision to build the visual elements of the website. We aimed to embed this visual language into the design instead of decorating the design.
From there these core shapes were part of every visual design decision to build the visual elements of the website. We aimed to embed this visual language into the design instead of decorating the design.
Solution
After putting the visual design together with the wireframes, it was time to mockup the key pages of the website and get it built. We released components and page types to the editors in a rolling release so we could get them using components on real pages. The feedback we got in real time allowed us to update and edit our designs to fit with real content used by real editors.
As we had discussed one of our goals was to create a system of pages and components that would help the content editors keep on top of the complexity. By getting real time feedback we could tune this to the users as we went.
Visit the websiteAs we had discussed one of our goals was to create a system of pages and components that would help the content editors keep on top of the complexity. By getting real time feedback we could tune this to the users as we went.
Homepage mockups
Navigation
Content page
Impact and reflections
Overall this was a really rewarding project. The focus on the citizens that NPDC staff brought was really inspiring and they allowed us to work through a process that was aimed at making a great experience for serving the people of New Plymouth. Working with the artist team to develop a visual language was a huge part of this.
As a result of this work the website won the ALGIM (Association of Local Government Information Management) 2022 "Supreme Website" award.
I would like to have run more testing, particularly user testing some of the search and filtering functionality. Particularly search itself but also things like Hearings, Meetings and Public Notices where users need to find critical legal information.
As a result of this work the website won the ALGIM (Association of Local Government Information Management) 2022 "Supreme Website" award.
I would like to have run more testing, particularly user testing some of the search and filtering functionality. Particularly search itself but also things like Hearings, Meetings and Public Notices where users need to find critical legal information.