Showcase sites
If you only have time to look at a few of the websites I've had a hand in creating, these are the ones I'd like you to see first. These sites are listed in reverse chronological order, with the most recent at the top.
Case studies in this category
MacDiarmid Institute
Website: macdiarmid.ac.nz
Client: The MacDiarmid Institute
Dates: January - March 2017 and August 2018 - July 2019 with ongoing support after launch
Government status: Centre of Research Excellence (CoRE)
My professional status: independent web designer/developer
The MacDiarmid Institute for Advanced Materials and Nanotechnology is one of New Zealand's oldest Centres of Research Excellence (CoREs). It brings together almost 100 research investigators along with graduate and PhD students from seven institutions across Aotearoa. Their research focus is materials science and new technology, especially the unexplored territory where chemistry, physics, biology and engineering meet.
I was responsible for the initial proposal and quote, client liaison, project management, information architecture and UX design, content design, responsive design development and front-end development, browser and device testing, content-loading, post-integration testing, QA, proof-reading, web editor training and ongoing support.
I've included this site as an example of a large web project built in SilverStripe, and as a demonstration of my abilities in responsive design development and front-end dev. It also showcases my ability to manage a large project with multiple teams and multiple workstreams happening simultaneously. I think it's a great website for a wonderful organisation.
Find out more about the MacDiarmid Institute project
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Content-loader, Responsive web design/dev, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, SilverStripe, Government websites, Large sites
TradeMe
Website: trademe.co.nz
Client: TradeMe
Dates: October 2017 - March 2018
My professional status: contractor at TradeMe
TradeMe has spent the last couple of years working on a new responsive website to replace their current arrangement of separate mobile and desktop sites, with the design teams working on a redesign of the look and feel of the website at the same time.
The new site was initially available to the public as a Preview version, and the TradeMe team actively solicited feedback from their users, so that they could make improvements to the new site on an ongoing basis. The new site is built in AngularJS by the back-end dev team, with the front-end devs working on templated elements within pages that contain a combination of Angular and HTML5.
TradeMe wanted some help getting their latest set of updates to a point where they could be added to the live Preview site, and took on myself and two other contractors for six months to help them get there.
I was responsible for HTML5 and CSS3 coding, as well as peer reviews, accessibility compliance, browser and device testing, and bug-fixing. I began as a member of the Tangram Squad, responsible for building individual elements that could be re-used on multiple pages within the site. After two months I switched to the Design Vision team, where we worked on whole example pages, tweaking and improving on the design and functionality of individual elements in situ.
I've included this case study in my showcase set because, well, it's TradeMe!
Find out more about the TradeMe project
Categories: Showcase sites, Front-end developer, Govt web standards tester, Responsive web design/dev, CSS-based layout, CSS3, HTML5, e-govt/WCAG compliance, Other CMS, E-commerce, Large sites
Govt.nz
Website: govt.nz (site has since been redesigned)
Client: Department of Internal Affairs
Dates: December 2013 - June 2014
Government status: Government Department
My professional status: contractor at DIA
Govt.nz is a ground-breaking project run by the Department of Internal Affairs, that seeks to improve the way that government communicates with citizens online. Govt.nz aims to enable visitors to find the government information they are seeking, quickly and easily. It is based on the UK all-of-government website, gov.uk, and both sites are user-focused, with user testing as their foundation.
I was taken on to replace the original designer/front-end developer halfway through the Beta phase. I was responsible for UX research, UX proposal-writing and UX design, content design, responsive web design, responsive front-end development within an instance of the Government's Common Web Platform (CWP), browser and device testing, government web standards accessibility compliance and testing to the very highest level, post-integration testing and QA, attending regular team meetings and doing regular "show and tell" updates for the major stakeholders within DIA.
The project was run using Agile methods, with daily standups and two-week sprints, the team being managed by experienced scrum masters. This Agile methodology was completely new to DIA. The website was on-line and available to the public throughout the Beta phase, and we welcomed feedback and comments from visitors, all of which we investigated further and acted upon as necessary.
I have chosen this site as an example of my abilities and experience with responsive design/dev, using an instance of the CWP, and within an Agile project management environment. This is the most "watched" I've been on a project, with complete strangers feeling justified in critiqueing my work at every opportunity. It was an exciting and worthwhile project to be involved with, and I was thrilled to have been given the opportunity to be a part of the team.
Find out more about the Govt.nz project
Categories: Showcase sites, Client liaison, IA & UX, Content designer, Website designer, Front-end developer, Govt web standards tester, Writing for the web, Responsive web design/dev, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, SilverStripe, Government websites, Medium sites
WebWeaver Productions
Website: webweaver.co.nz (site has since been redesigned)
Client: me
Dates: August 2013 - April 2015 onwards until September 2024
My professional status: independent web designer/developer
I've decided to include my own website because it shows my style of design and development when I'm free to do what I like. It's a work in progress.
Commissioned, designed, architecture-d, developed, built, written, edited and project-managed by me. The site is designed to be fully accessible, is written in valid HTML5 and CSS3, and has been fully tested and displays consistently across a wide range of operating systems, browsers and devices.
The latest iteration of the site is responsive, designed for ease of reading in whatever device it's being viewed, and fully tested across a range of devices and platforms. It runs on the SilverStripe Content Management System, built and integrated by my WebWeaver colleague, Tom St George.
Find out more about the WebWeaver Productions project
Categories: Showcase sites, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Govt web standards tester, Writing for the web, Content-loader, Webmaster, Responsive web design/dev, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, SilverStripe, Large sites
Radio New Zealand
Website: radionz.co.nz (site has since been redesigned)
Client: Radio New Zealand
Dates: October 2012 and February/May 2013
Government status: Crown Entity
My professional status: contractor at Radio New Zealand
Radio New Zealand is a Crown Entity established under the Radio New Zealand Act 1995. It provides listeners with independent radio programmes in accordance with the Radio New Zealand Charter. I had first met Richard Hulse, RadioNZ's webmaster, when we were both up for the same ONYA awards in 2010. The Radio New Zealand website had won both awards, and now that it was in need of an update, Richard decided to ask me to build the templates for him.
I was honoured! I was responsible for the HTML (HTML5), CSS (including CSS3 and LESS) and jQuery for the new design, incorporating a very high level of accessibility compliance into the build. I also did some design development, plus testing and QA of the completed templates, and a couple of days of additional templating once the web team had begun to integrate their existing content into the new templates.
I have included this site as an example of a huge content-migration project (the site is emormous!), as well as showcasing my skills in HTML5, CSS3 and LESS - and as an example of cutting-edge highest-level e-govt accessibility compliance.
Find out more about the Radio New Zealand project
Categories: Showcase sites, Client liaison, Website designer, Front-end developer, Govt web standards tester, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, Other CMS, Government websites, Large sites
Kirkaldie & Stains
Website: no longer online
Client: Kirkaldie & Stains
Dates: August - October 2012
My professional status: contractor at Heyday
Kirkcaldie & Stains is an icon of the New Zealand retail industry with a singularly distinctive character, and is renowned for its consistent standards of excellence. The existing website was in need of refurbishment - and the company felt it was time to develop part of the website into an Online Store, as well as re-designing their brochure and news content.
Heyday were invited to design and develop the new website, and I was asked to join the team for a few weeks to carry out the front-end development. I was responsible for the HTML (HTML5), CSS (CSS3 and LESS) and some of the jQuery, and also for integrating my new code into SilverStripe, building the CMS's layout and include files which were then programmed by Heyday's Glenn Bautista.
I have included this site as an example of an e-commerce project, and also as an example of a site that I have integrated into Silverstripe, in addition to doing the front-end development.
Find out more about the Kirkaldie & Stains project
Categories: Showcase sites, Scoping/pitching/quoting, Website designer, Front-end developer, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, SilverStripe, E-commerce, Large sites
WellingtonNZ
Website: wellingtonnz.com (site has since been redesigned)
Client: Positively Wellington Tourism
Dates: April - June 2010
Government status: Council-Controlled Organisation
My professional status: contractor at Chrometoaster
I was invited to work with the Chrometoaster team to help them with the rebuild of the entire WellingtonNZ website. This was a massive job with over 60 templates, and a team of three front-end developers all working together on the new site.
I was responsible for developing the website's main page structure, including all the chrome, background layers, header, footers and navigation elements and then building a range of templates and modular elements in XHTML/CSS, incorporating existing jQuery effects and preparing these for integration into the existing CMS, as well as ensuring a very high level of e-government and accessibility compliance.
I have chosen this site as an example of a large collaborative effort, where I was one of a number of developers working together on the same files, and in which the proper use of SVN was vitally important, and where extremely high standards of best-practice XHTML/CSS were required.
The WellingtonNZ site was a finalist in the 2011 ONYAs web awards, in the Most Outstanding Website category, the ONYAS' top award.
Find out more about the WellingtonNZ project
Categories: Showcase sites, Front-end developer, Govt web standards tester, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Drupal, Government websites, Large sites
Holmes Consulting Group
Website: holmesgroup.com (site has since been redesigned)
Client: Holmes Consulting Group
Dates: September 2009 - April 2010, with ongoing support until December 2013
My professional status: independent web designer/developer
The international structural engineering firm Holmes Consulting Group asked for a completely new photography-centered design, new HTML/CSS templates, and a new CMS, which would be populated with all-new content.
I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, web design, HTML and CSS, jQuery, testing, putting together the skeleton site in SilverStripe, training, QA and proof-reading, and ongoing support.
I have selected this site as an example of one that showcases my design style, which is crisp, clean, minimalist, aesthetically-pleasing and easy to use.
Find out more about the Holmes Consulting Group project
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Website designer, Front-end developer, Writing for the web, Content-loader, CSS-based layout, jQuery/JavaScript, SilverStripe, Medium sites
EPA
Website: epa.govt.nz (site has since been redesigned)
Client: Ministry for the Environment
Dates: July - September 2009, with ongoing support after delivery
Government status: Government Ministry
My professional status: independent web designer/developer
The HTML for the EPA site was based on our Ministry for the Environment templates, with the CSS re-skinned within a completely different design. The HTML/CSS is best-practice e-government compliant and the site was tested for accessibility once it was built.
I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery, e-government and accessibility compliance, site build and content-coding, testing, site delivery and ongoing support.
I have selected this site as an example of excellent coding, and also as an example of extremely high accessibility.
The EPA site was a double-finalist in the 2010 ONYAs web awards, in the Best Use of HTML & CSS category, and in the Best Accessibility category.
Find out more about the EPA project
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Front-end developer, Govt web standards tester, Content-loader, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Dreamweaver templates, Government websites, Medium sites
Optimation
Website: optimation.co.nz (site has since been redesigned)
Client: Optimation
Dates: May - November 2009, with ongoing support after delivery
My professional status: independent web designer/developer
In contrast to the old Optimation website, which was largely passive and not well integrated with Optimation's other marketing activities, the new site needed to work much more actively as well as being an interactive space between the company and its clients - and it had to be designed to enable busy clients to get what they need in the minimum time possible.
I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery, accessibility compliance, testing, QA, CMS training and ongoing support.
I have selected this site as an example of excellent coding, showing the range of functionality that can be achieved using the SilverStripe CMS.
The Optimation site was a finalist in the 2010 ONYAs web awards, in the Best Use of HTML & CSS category.
Find out more about the Optimation project
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Front-end developer, Writing for the web, CSS-based layout, jQuery/JavaScript, SilverStripe, Medium sites
Ministry for the Environment
Website: mfe.govt.nz (site has since been redesigned)
Client: Ministry for the Environment
Dates: April - June 2009, with ongoing support after delivery
Government status: Government Ministry
My professional status: independent web designer/developer
The Ministry for the Environment wanted a medium-term redesign solution for their 13,000-page website that would allow them to keep their old legacy content, while bringing the look & feel up to date. Their web team needed to be able to seamlessly transfer the entire site into our new design and set of best-practice e-government compliant Dreamweaver templates, and the CSS had to include matching styles for all their old content code.
I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery and JavaScript, e-government and accessibility compliance, testing, site delivery and ongoing support.
I have selected this site as an example of a large reverse-engineering project for a Government agency - and because I'm proud of the way we rose to this very tricky challenge and produced an excellent result.
Find out more about the Ministry for the Environment project
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Front-end developer, Govt web standards tester, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Dreamweaver templates, Government websites, Large sites
Cavalier Bremworth
Website: cavbrem.co.nz (site has since been redesigned)
Client: Cavalier Bremworth
Dates: January - February 2009
My professional status: contractor at DNA
This website represented the first roll-out of the new Cavalier Bremworth branding by DNA. My responsibility was to build a large set of template pages within a very tight timeframe and budget, and prepare them for integration into a custom-built .net CMS.
The new site incorporated a very high level of interactivity for visitors and included a large amount of jQuery and Shadowbox programming, for which I was also responsible.
I've included this site as an example of a highly technical build, with an extremely steep learning curve when it came to extending my jQuery skills.
Find out more about the Cavalier Bremworth project
Categories: Showcase sites, Scoping/pitching/quoting, Front-end developer, CSS-based layout, jQuery/JavaScript, ASP or ASP.NET, E-commerce, Large sites
HPT forms
Website: historicplaces.org.nz (site has since been redesigned)
Client: Historic Places Trust
Dates: July - October 2008
Government status: Crown Entity
My professional status: employee at Shift
The Historic Places Trust needed a set of 7 membership forms for their corporate website. The IA and design originally called for a large master form, which I built in XHTML and CSS and which was controlled by a JavaScript file.
As the functionality requirements became more and more complex I broke the master into 7 separate forms and rewrote the JavaScript. The programming and integration of the forms was carried out by Datacom using the Sitecore CMS.
I'm showcasing this project as an example of my ability to lay out complex forms using XHTML and CSS, to indicate my experience with Sitecore, and to show my ability to adapt and rewrite JavaScript where necessary. As an added bonus you might also like to view the Historic Places Trust - Our Properties project.
Find out more about the HPT forms project
Categories: Showcase sites, Front-end developer, Govt web standards tester, Writing for the web, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Sitecore, Government websites, Small sites
New Zealand Educated
Website: newzealandeducated.com (site has since been redesigned)
Client: Education New Zealand
Dates: May - September 2007
Government status: Crown Entity
My professional status: employee at Shift
New Zealand Educated wanted a fun, compelling and informative website that would encourage overseas students to study in New Zealand. I built a set of 36 complex templates for the site in HTML and CSS, which were tested across a wide range of browsers and platforms and which achieved a high level of compliance with e-government accessibility guidelines. Education New Zealand is a Crown Entity funded by the New Zealand Government.
I'm showcasing this site as an example of a large, complex build, with high e-government and accessibility requirements - and as an example of my extensive experience with the ExpressionEngine CMS.
Find out more about the New Zealand Educated project
Categories: Showcase sites, Front-end developer, Govt web standards tester, Writing for the web, CSS-based layout, e-govt/WCAG compliance, ExpressionEngine, Government websites, Large sites
The Gathering Archives
Website: thegathering.co.nz
Client: me
Dates: October 2006 - present
My professional status: independent web designer/developer
In October 2006 I began The Gathering Archives website and accompanying WordPress blog, with the aim of becoming the authoritative source of information on the history and background of iconic New Zealand dance party, The Gathering. The site includes sections for each of the six New Years parties, with the design for each being based on the official artwork from that year.
I'm showcasing this site as an example of my ability to see a project through from concept to completion - including project management, site scope, design, HTML/CSS build, research, writing and WordPress blog design and development and webhost management.
The Gathering Archives site was a finalist in the 2010 ONYAs web awards, in the Best Content (Personal) category.
Find out more about the The Gathering Archives project
Categories: Showcase sites, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Content-loader, Webmaster, CSS-based layout, WordPress, No CMS, Large sites