The MacDiarmid Institute for Advanced Materials and Nanotechnology

Website: macdiarmid.ac.nz

Size: 48 page templates and variations for an 800+ page website

Government status: Centre of Research Excellence (CoRE)

My professional status: independent web designer/developer

Website client: The MacDiarmid Institute

Dates: January - March 2017 and August 2018 - July 2019 with ongoing support after launch

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

Brief: The MacDiarmid Institute for Advanced Materials and Nanotechnology is one of New Zealand's oldest Centres of Research Excellence (CoREs). These are inter-institutional research networks, with researchers working together on commonly agreed work programmes.

The MacDiarmid Institute 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. Researchers collaborate to bring innovations to the marketplace where they can help address the big problems of our time and contribute to the New Zealand economy. The Institute's ultimate aim is to help the transition to a more sustainable way of life.

Their existing website was old, messy, out-of-date and hard to maintain. The navigation architecture wasn't well organised and it had become difficult for visitors to find the information they were looking for. It was time for a new website with a new logical architecture and a much stronger focus on the institute's researchers, with the majority of the pages being re-written prior to launch. We also wanted to migrate and incorporate news articles and magazine items from the old site, as much of this content - although needing to be re-formatted - was valuable as an ongoing archive of the Institute's research projects and progress.

The website brief placed a focus on showcasing the MacDiarmid Institute's work; highlighting their people with a bio page for each researcher linked across multiple areas of the site including news articles and research information; providing exceptional search functionality to identify researchers and their research areas; allowing editors to upload and promote news and events effectively; and integrating their social media properties with the site. They wanted their new website to tell their story, using words and images accessible to all.

Yeah looks amazing. Thanks everyone! - Vanessa

Just wanted to say that I'm referring to the investigator pages a lot while working on the science plan, and it's soooooo much easier to navigate! - Justin

You made the project a pleasure to be part of and I learned so much from the whole process. Thank you so much - Kirsty

Vanessa Young, Strategic Engagement Manager and Professor Justin Hodgkiss, Co-Director, The MacDiarmid Institute; and Kirsty Fyfe, Web content writer, Matai Partners

Achievements:

• Received feedback from Vanessa Young at the MacDiarmid Institute who was in charge of the project and was my main point of contact, that having me manage the project from our side made her feel very safe and secure, and confident that it would get done properly.
• Project-managed this substantial web project efficiently and effectively, including managing ongoing communications between the Webweaver team, Kirsty Fyfe the content writer, and Vanessa at the MacDiarmid Institute. There were a million questions to be asked, answered and tracked, and I was responsible for ensuring that the questions were all asked, and the answers all acted upon.
• Worked closely with Tom St George, my WebWeaver developer, to figure out the best way to feature the MacDiarmid Institute people, and how to facilitate updating and editing the staff and researcher profiles. This turned out to be fairly complex, both in terms of the front-end search and display capabilities, and also in terms of the editing screens. This included content design for both front- and back-end. Some people have more than one role within the Institute, and we needed to be able to show this in various page displays and also find a way that the editors only had to edit one person, with multiple roles.
• Wrangled over 500 news and other media items imported from the old website, working with MacDiarmid Institute to decide on a chronological  cutoff point for display, while still keeping older items in the new site for archive purposes.
• Working through a substantial post-integration testing and functionality development process with Tom, using Trello as our bug-tracker. As we added more content and refined various sections such as Our People and News we made a number of improvements to the way the website displays, and also to the editing functionality in the CMS. As web editors ourselves, we know how important it is to create a good web editing environment.

My responsibilities included:

• Writing the original proposal and quote for the website fixed-price contract, plus a revision of work processes and costs on request from the client after they reduced the scope of the brief
• 18 months later, reviewing the original quotes and updating the project timeline after the client returned to us, having unsuccessfully worked with another web design company in the interim
• Creation and refinement of the information architecture and site schematics, including 18 template wireframes and the sitemap - these went through multiple iterations as we refined the design and build
• Content design - writing the microcopy, introductory text and help text across technical and search-based templates such as in the people and news & events sections
• Project management and ongoing liaison with the MacDiarmid Institute 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, Sue Quigley the designer, and developer Tom St George) including the development of design/development timelines within a programme of work and ensuring that we achieved all our project milestones in a timely fashion
• Support and liaison with Sue Quigley our designer as she worked through the design process with the MacDiarmid Institute team
• Ongoing liaison with the web content writer Kirsty Fyfe from Matai Partners, whom we had recommended for the job - including answering questions about best practice web design and development; discussing content in relation to design, layout and formatting; and making suggestions about content I thought should be included
• Design review with Sue once I had built the templates and incorporated my responsive design elements, to ensure she was happy with my work
• Development of a set of 48 templates and template variations in CSS3 and HTML5 using LESS as my pre-processor, which Tom then integrated into the SilverStripe CMS
• Hand-coding in HTML5 to a high level of accessibility and fully testing accessibility compliance using WAVE
• Ensuring that every template had been validated using the W3C Markup Validation Service and that it conformed to HTML5 requirements
• Various types of more recent CSS3 coding and styling including Flexbox, and ensuring that this coding was fully responsive and that fallback styling for earlier versions of IE and Safari in older iOS environments was included
• Incorporating dynamic graphical effects using jQuery - including specific styling of parent and grandparent elements in the main navigation, various accordions in the people and news sections, styling of the SilverStripe-generated sitemap, and various styling and layout tweaks to take account of a range of content scenarios
• Programming the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
• Incorporating the AddThis plugin into the templates and ensuring that this functioned correctly in all browsers and devices
• Extensive testing of the website at all stages of the development process, ensuring display consistency and correct responsive functionality across the following browsers and platforms:
  • PC (testing in Win 7 and Win 10): Internet Explorer IE9, IE10, IE11, Edge (latest); Firefox (latest), Chrome (latest)
  • Mac: Firefox, Opera, Safari (all latest)
• Extensive device testing to ensure that the responsive aspects of the site were working beautifully in as wide a range of devices as possible, including:
  • Actual devices: iPhone 6s (Safari and Chrome), iPad Pro, Samsung Galaxy Mini Pocket S5300 (Android 2.3), Samsung Galaxy Ace 2 I8160 (Android 2.3.6), Samsung I9100 Galaxy S II (Android 4.1), LG C900 Optimus 7Q (Windows Phone 7), Nokia Lumia 710 (Windows Phone 7.5)
  • Devices on BrowserStack: iPad Air (iOs v7 Safari), iPad Air 2 (iOs v8 Safari and Chrome), iPad Pro (iOS v12.9 2018 Safari), iPad 6th (iOS v11 Safari), iPad Mini 4 (iOS v11 Safari), Samsung Galaxy S5 (Android 4.4 Chrome), Samsung Galaxy S8 (Android 7 Chrome), Samsung Galaxy S9+ (Android 8 Chrome), Nokia Lumia 630 (Windows phone 8.1)
• The creation of a sitewide CSS print stylesheet - tested in IE9, IE10, IE11, Edge, (PC only) Firefox, Chrome (Mac and PC) and Safari (Mac only)
• Creating a full set of touch icons and favicons for the site
• Ongoing project management once we had designed, built and integrated the website, in response to client requests for changes
• Undertaking an extensive period of post-integration testing and feedback, as Tom and I content-loaded the website ready for launch, and worked through a number of display and editing requirements that became apparent as we delved more deeply into the content - particularly in the Our People section of the site
• Doing a QA and proof-read of the entire site once it had been content-loaded, logging all corrections and updates in a spreadsheet and ensuring that everything was perfect prior to launch
• A series of training sessions for the three MacDiarmid Institute web editors after the website was launched, to ensure that they would be able to maintain and develop all aspects of the website going forward
• Ongoing support for the web editors as they learned to use SilverStripe
• Ongoing liaison with the MacDiarmid Institute web 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.

This was a three-person WebWeaver project. I did the client liaison, quotes and UX wireframing. Sue Quigley did the design, I did the responsive design and front-end dev, and Tom St George integrated the site into SilverStripe, having first migrated all the news and people content across from the old site as a starting point.

I did the post-integration testing, Tom and I shared the content-loading, and I carried out the QA processes and then trained the MacDiarmid web team to edit their new website. The new content was written by our friend Kirsty Fyfe from Matai Partners, with whom we had worked on the Bloomsbury Associates website.

The website is looking superb – a real team effort from you all.

Amanda Woodbridge, Matai Partners

It was an excellent team effort, with a huge amount of work also being carried out (and a million questions answered) by Vanessa Young at the MacDiarmid Institute. My dear friend Alexandra Lutyens was also involved in the project, as she advises the MacDiarmid Institute on strategy, and had invited me to pitch for the work in the first place.

I'm incredibly proud of this website. Firstly because I think the MacDiarmid Institute is an incredible organisation, of enormous value to both New Zealand and to the planet as a whole. I'm somewhat shocked that they have to go back to Government every few years, cap in hand, to ask for their funding to be continued - and I hope the new website goes some way to helping them to state their case for ongoing financial support.

I'm also very proud of this site because of the sheer scope of it, and the huge amount of effort that was put in by every member of the WebWeaver, Matai and MacDiarmid teams. Really - this was a very big project carried out by a small number of people, and I think we did an excellent job.

Looking at the site now, six months after launch, I can see that the editors have picked it up and run with it. The site still looks as beautiful as it did the day it was launched, and there are heaps of new and interesting news articles, podcasts and videos appearing every month. It's great!