Essential Mums

Essential Mums - homepage

Website: no longer online - view screenshots

Size: IA for 30+ new page templates, design and design development for 24 page templates

My professional status: contractor at Fairfax Digital

Website client: Fairfax Media

Dates: January - March 2012

Categories: Client liaison, IA & UX, Website designer, CSS-based layout, Other CMS, Large sites

Brief: Fairfax Media is the largest integrated metropolitan, rural and regional, magazine and digital media company in Australasia, with publications and websites in every State and the ACT in Australia, and throughout New Zealand.

The company has two national, nine daily and more than 60 community newspapers, 25+ magazines, and market-leading website stuff.co.nz.

Essential Mums is an online addition to the Fairfax Media portfolio, and aims to provide expert information, helpful tools, and a community of other mums to help mothers on their parenting journey.

The website was designed and built in-house by the Fairfax Digital team, and I was asked to provide information architecture and design development for the website.

Hi Ali, the designs all look really good to me. There were just a couple of minor tweaks, but other than that, they look all good to send out.

Matthew Wilson, Lead Designer, Fairfax Digital

Achievements:

  • Reviewed the small number of website wireframes that had been drawn up in-house, and suggested that these could be improved - obtained client approval to do this
  • Put together a full set of much more detailed wireframes for the project, which were then used as the functional spec both by me for the design and then later their front-end developer for the build after I had completed my part of the project
  • Took an initial one-page design from Fairfax's in-house designer and successfully developed this across a full range of 30 templates which were all approved by the management team in Auckland.

My responsibilities included:

  • Using Balsamiq to compile a comprehensive sitemap for the entire site and information architecture (sitemap, wireframes and process recommendations and documentation) for all parts of the website, including content pages; the Essential Mums community forum; and signup, registration, profile and login screens
  • Using Balsamiq to create a full set of IA wireframes for:
    • the homepage and section homepages at different levels of the sitemap hierarchy, the layout of which varied depending on its position within the site tree
    • the story pages of the site, showing different content-type elements including: video, large image, factbox, photo gallery, and a sidebar containing small images and related content; showing how more than one element could be combined on the same page; and wireframing the comments section at the end of each story (which was controlled by Gigya)
    • the community forum, including different templates for the forum homepage, subsection homepage, individual threads and search results page
    • The gallery-type pages, including photo and video galleries
    • the signup, registration, profile and login screens - which had to be based on the approach already agreed for Stuff's new Stuff Nation functionality, using Gigya's social plugins to integrate with users' social networking profiles
  • Identifying and cataloguing the functionality requirements and challenges for all parts of the website, including the forum and registration/login/profile sections
  • Doing extensive research into the best practices for registration and sign-in, producing a series of diagrams and explanations for the team on the benefts of progressive engagement, and arguing my case for this approach to the web team in Wellington and the marketing/management teams in Auckland
  • Design development of the homepage design, version #1 of which had been completed by Fairfax Digital's in-house designer
  • Design of all other page templates sitewide, following approval of the updated homepage design
  • Design of a range of standard formatting styles that could be used in any template including headers h1 - h6, ordered and unordered lists and tables
  • Re-design of the main navigation, following approval of one of a range of possible layouts I had presented to the teams
  • Attending Wellington web team meetings and phone conferences with the Auckland-based marketing/management team.

I was initially taken on for a six-week contract to finish off the IA, develop the designs and do the full HTML/CSS template build for the site. I was happy to take on all three tasks, although I felt that the initial timeline I'd been given was too short to achieve all three, and warned the team that this might be the case. This turned out to be correct, partly because it took the combined management and marketing team in Auckland a considerable time to agree on colourways for the website, but mainly because the initial wireframing that had been done before I started was very basic.

We all felt that the project would benefit from a proper set of wireframes and functionality specifications, so my project brief was adjusted to reflect this. I became responsible for IA and design development, and their in-house front-end developer would build the HTML/CSS templates at a later date.

The overall look & feel and the design of the homepage (v1) was carried out by the company's in-house designer, who then handed his Illustrator files to me to use as a basis for developing his design across the rest of the templates. We used the 960 grid system (12-column version) for layout, which is extremely helpful when you've got massively long pages of varied content to lay out and you don't want to stick to a boring old 3-col layout all the way down the page.

It was an interesting challenge to provide sufficient space for advertising (both external and internal) without letting the ads take over completely, particularly as this is the first ad-based site I've done in 16 years of designing websites. It's a classic example of the balance that you have to find in order to please two different decision-making groups - in this case the web team (who wanted fewer ads and more content) and the marketing team (who wanted more ads).

There were a number of challenges associated with this project (which I love!) - notably the requirement to mirror a range of processes and functionalities that were already being designed for Stuff Nation, and the need to integrate the functionality of registration, sign-in, story commenting and the forums into Gigya (limited by what Gigya could and couldn't do).

As an experienced contractor, I'm sometimes asked to assess decisions that have already been made about the project, and to recommend improvements where necessary. My research into best-practice form design and my presentation on the latest thinking around the progressive engagement model for registration was an example of this. Once I have made my recommendations, the management team is free to choose whether or not to implement them.

I enjoyed this project. It was great to work with my old LINZ colleague Adrienne Marshall again, and get to know a whole new group of very talented web peeps as well. It was also a fascinating behind-the-scenes insight into the thought-processes of a major media organisation.