BNZ Community

BNZ Community - homepage

Website: no longer online - view screenshots

Size: 27 templates, some with multiple tab screens

My professional status: contractor at the Bank of New Zealand

Website client: Bank of New Zealand

Dates: September - December 2014

Categories: Front-end developer, Writing for the web, Responsive web design/dev, CSS-based layout, CSS3, HTML5, Lithium, Medium sites

Brief: the Bank of New Zealand was nearing completion with their Community web project - an interactive community/forum for BNZ customers, hosted within the main BNZ website. They needed someone to finish it off, tidy it up, and get it over the line.

I was originally asked to join the in-house web team for four weeks to carry out the front-end development, and my contract was eventually extended to 12 weeks so that I could continue to tidy and improve the site after it went online. I was responsible for the HTML5 and CSS3 coding, as well as browser and device testing.

The Community sub-site had its own responsive design and its own set of templates and was run on the Lithium CMS, which has a whole range of unique eccentricities and challenges - not least of which is that it uses a coding language all of its own. Erk!

Ali - thanks for all your help on the Community project. A challenging one but great to get it nailed. Your input was really appreciated.

Russell Mildon, Project Manager - Online Sales, BNZ Digital

Achievements:

  • Picked up this project at a crucial (and late) stage of its development, figured out what needed doing to get it ready for launch, and delivered this to the client within a month
  • My contract was twice extended for an additional month beyond the original contract period, as the client liked my work and wanted me to continue to improve the site post-launch.

My responsibilities included:

  • Identifying the full list of templates to be worked on, and ensuring that these were all completed (even after the site went live I was finding new ones I'd never seen before)
  • Liaising with designer and original front-end developer to ensure that I had all the background info I needed, and to check that the templates were displaying as they expected
  • Responsive front-end development - HTML5 and CSS3 (using SASS as my preprocessor with Gulp set up through Terminal to trigger CSS re-writes) all done within the Lithium CMS system
  • Learning how Lithium worked (it's unique!) including doing a bit of coding in Lithium's very own (very odd) programming language, FreeMarker
  • Creating SVG graphics for elements such as icons, with PNG fallbacks for IE8
  • Redoing some of the more esoteric CSS3 styles, to take into account the requirements of IE8, as the original front-end dev had not had a chance to do this
  • Compiling the list of tasks using Trello as our bug- and task-listing application
  • Estimating how much time each task would take, and also estimating how much work was left to do in the run-up to launch
  • Managing my timetable and deciding, in consultation with the rest of the team, the order in which I would tackle the task list
  • Attending daily standups with the rest of the team - the project was run as an informal Agile project (if there is such a thing)
  • Testing the site for accessibility compliance and suggesting improvements that could be made in terms of accessibility
  • Liaising with and helping the website testers by clearly explaining the test requirements for each task listed in Trello, and showing them what would constitute a pass or fail
  • Doing a considerable amount of my own browser and device testing before handover to the testers, ensuring that the code and templates I supplied were as close to perfect as possible - so that they were testing the templates' functionality within Lithium, rather than the templates themselves
  • Helping to identify improvements to the templates and overall functionality of the site after launch, writing tasks for these and then carrying them out
  • Writing technical handover documentation at the end of the project.

BNZ Community - responsive screens

I enjoyed this project. For a start, it was a challenge - picking up another front-end dev's work and finishing it off within a CMS that was completely new to me and which isn't like any other CMS I've worked in before. But then I always did love a challenge. After a couple of days I began to find my way through the maze, and by the end of the first week I felt like I was getting somewhere.

Also - it was a finishing-off and tidying-up project, which I always find very satisfying. In the Belbin Team Inventory tests I am identified as a Completer Finisher (together with elements of Shaper and Implementer), which means I'm detail-oriented, and enjoy crossing Ts and dotting Is - making sure every loose end is tied up and that the site is as perfect as it can be.

I also really enjoyed the responsive design aspect of the work - I really do love responsive design - and it's always heaps of fun deciding how you're going to deal with different elements in handheld devices. I came up with a completely nutty way of dealing with tables that were too wide for the page in smaller devices - and somehow managed to get a whole bunch of table cells to completely rearrange themselves as the viewport diminished in size. I'm still not sure quite how I did it, but it looks really cool!

We launched the product about a month after I started, with no major issues, and then the BNZ team decided to keep me on for a while, just to keep working on the product and improving it in whatever ways I could. At the end of the project I wrote an "Everything you ever wanted to know about Lithium but were afraid to ask" handover document for the BNZ team, detailing the specifics of this project, set within the Lithium framework.

The BNZ web team is huge - my team was just a small part of it - and it was really good to see familiar faces here and there - people I've worked with before on various projects over the years - including the project's designer, David Buck, who designed the prettiest website I've ever worked on (WellingtonNZ in 2010 for Chrometoaster). It was fun to work with some of them again, and to get to know some new people too.

I'd be happy to go back and work with the team again any time - they work really well together, they know what they're doing, and they are clever and innovative too.