Ministry of Pacific Island Affairs

MPIA - homepage redesign

Website: mpia.govt.nz (site has since been redesigned) - view screenshots

Size: IA restructure and 3 new templates for an existing 300+ page website

Government status: Government Ministry

My professional status: independent web designer/developer

Website client: Ministry of Pacific Island Affairs

Dates: July - December 2012, with ongoing support and updates after delivery

Categories: Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Website designer, Front-end developer, Govt web standards tester, Writing for the web, Content-loader, CSS-based layout, CSS3, jQuery/JavaScript, e-govt/WCAG compliance, SilverStripe, Government websites, Large sites

Brief: the Ministry of Pacific Island Affairs is Government's premier adviser on policies and interventions to promote the social, economic and cultural development of Pacific peoples in New Zealand. All of their work is designed to enable and foster their vision of successful Pacific peoples.

A recent survey had indicated that visitors found the website confusing and difficult to navigate, and the Ministry also felt that they were unable to feature and highlight the most important areas of the site on their existing homepage, so wanted to remedy both these issues with a limited-budget upgrade.

The Ministry initially approached Optimation for a quote, who recommended that they talk to us instead. They asked us for three quotes: a) homepage, header and footer refresh; b) homepage, header, footer, page styles redesign; and c) complete website redesign.

I provided these, and also identified a fourth option, d) homepage and sitemap redesign, section homepage design, and information architecture & content organisation re-structure; which I felt would achieve their goals for the website update in a way that options a) to c) could not. We were then asked to quote for option e) homepage and sitemap redesign, section homepage design and reduced scope IA restructure. This was the option that was finally chosen by the client.

Achievements:

  • Identified a better solution to MPIA's website problems than they themselves had suggested, and further developed and quoted for this solution following consultations with the client
  • Improved the homepage experience, enabling visitors to more easily find what they were looking for, and also allowing MPIA to highlight content that was important to them
  • Improved the overall Information Architecture and content/sectional arrangement of the site, resulting in a much improved experience for both the web editors and users.

My responsibilities included:

  • Writing five quotes for the website fixed-price contract
  • Creation and refinement of the information architecture and site schematics including template wireframes; providing the client with an overview of how I thought the IA of the site should be rearranged and ideas about best practice in terms of navigation and sub-navigation; and then supporting Jane Keig from MPIA as she put together a new sitemap based on my recommendations, and wireframing the sitemap once it was complete
  • Providing information and guidelines for Jane about the best ways to re-arrange and organise the files & folders section of the site in SilverStripe
  • Project management and ongoing liaison with the MPIA team in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Project management of the WebWeaver team (myself and developer Tom St George, together with Robert at SilverStripe where the website is hosted) including producing design/development timelines within a programme of work and ensuring that we achieved all our project milestones in a timely fashion
  • Design of the new homepage - including the look & feel, graphics, and navigation following a meeting with the MPIA team where we identified the new site sections and sub-sections that needed to be featured
  • Design of the new section homepages - the existing site didn't include this template type, and we feel that it's an important element in creating an easily-navigable website
  • Design of a new sitemap page - the existing sitemap page wasn't automatically generated and didn't work very well
  • Tweaking the design of various general formatting elements throughout the site, such as subnavigation, headers h1-h6 and bulleted lists to match the new homepage design
  • Development of the 3 new templates (homepage, section homepage and sitemap) in pure CSS and XHTML 1.1, which Tom then integrated into the existing SilverStripe CMS
  • Hand-coding in XHTML 1.1 to a high level of accessibility and e-government compliance
  • Incorporating a homepage slider via jQuery - and ensuring that this element was still accessible in older browsers (IE6) and/or when Javascript was disabled
  • Incorporating a range of CSS3 effects within my stylesheets including border-radius and box-shadow
  • Ensuring that in older non-compliant browsers the styling/display still looked good without the CSS3 enhancements
  • Extensive testing of the site at all stages of the development process, ensuring graded consistency across the following browsers and platforms:
    • Windows XP: Internet Explorer IE6, IE7, IE8; Firefox (latest)
    • Windows 7: Internet Explorer IE9, Chrome (latest), Firefox (latest)
    • Mac OSX: Chrome (latest), Firefox (latest), Safari (latest)
  • Ensuring that my new templates had been validated using the W3C Markup Validation Service and that they conformed to XHTML 1.1 requirements
  • Post-integration testing, proofreading and tidying up formatting sitewide, in order to ensure that the whole site looked its best before we switched from the old version to the new
  • Post-integration formatting of the "people pages" within SilverStripe, including the addition of a couple of new HTML formatting styles to help with this; and the production of a set of instructions for the web team to follow when updating these pages (long-term goal will be to create a new "people page" template, so that the team don't need to do the HTML themselves)
  • Ongoing liaison with the MPIA team, to ensure that the new templates and backend functionality were working as expected, and to provide additional HTML, CSS and content graphics as required
  • Liaising with Robert at SilverStripe, which was in charge of setting up and updating the test version of the MPIA website that Tom and I were working on.

I enjoyed working on this project - not least because Jane Keig at MPIA was a real joy to work with - she's very capable and hands-on and we got along famously.

It's an interesting challenge for me to do a partial website redesign/rebuild, because I'm such a perfectionist that in some ways I'd prefer to re-do the whole thing from scratch. However, in many cases this simply isn't possible due to timeline and/or budgetary limitations, and so I focus instead on getting the best result for the client within those constraints, and looking for ways in which I can most effectively improve the overall visitor and web editor experience.

For the MPIA project this meant re-doing the IA and re-designing a couple of important templates, and then tweaking the rest of the site's general formatting and design within the other existing templates. In this situation I can't guarantee the overall e-govt compliance of those templates I haven't changed, but I am able to ensure that the new templates meet e-govt standards and that my IA and design tweaks improve accessibility for the rest of the website.

I'm really pleased that MPIA saw the logic in restructuring the IA/sitemap before doing anything else, and the end result is a website that not only looks better (it's amazing how effective a bit of restyling can be) but, more importantly, it's now much easier for visitors to navigate, and much easier for the web team to update. Cheers all round!