Simon Griffee
Department of graphic design, art direction, and photography.

International Plant Protection Convention Website

Published 2014 October 10

User experience design, graphic and identity design, HTML markup, CSS, JavaScript, user testing, debugging.

The IPPC is an international agreement on plant health to protect cultivated and wild plants by preventing the introduction and spread of pests.

Problem

The existing IPPC site contained a wealth of information which was difficult to access in an unclear hierarchy. Navigation was difficult for visitors, content updates were complex for staff and the site lacked a visual voice.

Solution

I worked with IPPC staff to produce a new www.ippc.int design based on web standards. (The website today does not look like the one I worked on years ago any longer, but you can see the prior design using archive.org’s Waybackmachine).

International Plant Protection Convention website homepage sketch.

International Plant Protection Convention website redesign.

IPPC website page elements template.

The 2009 redesign happened before the wide availability of templates like Bootstrap, so all elements were designed, coded by hand, and tested extensively.

International Plant Protection Convention website redesign admin page.

International Plant Protection Convention design docs example.

A design process was carried out which consisted of the following:

  1. Identify main site user groups
  2. Understand site content and organize it into logical sections
  3. Create wireframe and visual design mockups based on findings from the above
  4. Create code templates based on the visual designs
  5. User testing and modifications
  6. Site launch

After the IPPC’s main audiences were identified the information architecture was drawn out and a wireframe prototype was created which allowed direct use in a browser and better initial feedback.

A visual design was chosen from a series of mockups which were presented to the IPPC Secretariat.

Site elements were separated into clean code consisting of semantic HTML for content, CSS for layout and visual presentation and JavaScript for accessibility-enhancing behaviors such as text-resizing. Page templates using this code were produced for the IPPC programmer to implement.

I then created a custom backend administration interface design for the website which makes management and updates much easier for IPPC and countries’ staff to use.

User testing was carried out with members of the www.ippc.int audience and modifications were made based on test results before the new site launch.

Throughout the project I worked closely with IPPC staff both remotely and in the Food and Agriculture Organization offices which he eventually joined as a staff member.

Work Done

User experience design, graphic and identity design, HTML markup, CSS, JavaScript, user testing, debugging.

See also: