DHB hero image

A day in the life - A project that celebrates 125 years of DHB Waikato.

Waikato DHB is the biggest business in the Waikato and has the biggest hospital campus in all of Australasia. "A day in the life of..." is a project that documented some of the many employees who were tracked during 24 hours at Waikato Hospital.




Waikato DHB, Waikato Health Trust, Wintec and Printhouse collaborated in the storytelling project "a day in the life..." of their employees through feature writing, photography, moving image and publication to celebrate DHB's 125th years anniverssary in 2011. They required a design solution that not only serves as an introduction to the project, but also a teaser before the official launch of the book. Moreover, this will be a window for DHB to engage a much wider audience outside the Waikato region.



Website solution will be a natural choice for this brief. A good website will easily fulfill the need for this project - to be a good introduction and teaser platform for the project as well as the book, and this is the ideal solution to engage audiences nationally and internationally.

Secondly, A good web solution can swiftly incorporate the contents from all different medium on one platform. Most importantly, a well-thought web solution can interact with users on another level, and a good interaction will definitely enhance user's experience while they browse through the rich materials.



  • Art Direction & Project Management
  • Online Strategy and Research
  • Wireframing - informaton structure, content structure & layout structure planning
  • IA & UX design
  • Interface design
  • xHTML + CSS development
  • jQuery / javascript development

where the story begin

This project started out as a students' project that involved students and staff from mult-disclipinary studies at Wintec, School of Media Arts, creating a storytelling documentary about DHB employees' everyday life that covers writing aspects, photography and moving images.

As the project grow bigger, as well as colliding with the DHB's 125 years celebratio,. DHB Waikato's Visual Comm and PR/marketing department proposed to work together to amp up this project with funding to publish all the materials in 8000 copies of book and DVD, as well as a website that will help promote and introduce this project before the official celebration and book launch.

assembling a savvy design team

Mark Liu, a design lecturer in Wintec as well as owner of Mark & Co quickly rose up to the challenge and pull together a small team of three: Mark as the Art Director and Project manager for the web solution, alongside up-and-coming designer Raewyn Brandon and talented web developer/designer Ryan Delaney. Together they worked with Wintec staff and students, as well as the client DHB to create a website they were happy with and to coincide with a book that was also being published for this celebration.

planning and filtering

There are 40+ pieces of feature writing, 5-6 portrait photos that associated with each piece of feature writing, an hour-long documentary and hundreds of historical photos and contents needed to get sorted before they could even begin to design the site. Moreover, a lot of the information was either still missing or not finished at this point. On top of that, there was a short timeframe to have the website ready in less than two months time - Mark and the design team were committing 8 hours a week into this project due to their full time jobs / full time study.

With all these restrictions in mind, the web design team needed to plan strategically in seeking the best approach for this project - firstly, they needed to develop constant communication channel with the DHB Visual Comm team and book designer as well as editor, so that they could map out the information and content structure for the website, in brief what content to go into books and what's not. With huge amounts of information, images and video footages accumulated for this project, the web team needed to be working smartly with the editor and other stakeholders in order to create a web-friendly content; they have been a great communicator and collaborator throughout this process and were able to achieve the best optimized result for web purposes.

Secondly, they needed to investigate and decide a suitable design direction, interactivity and technology that will enhance website usability and user experience. The challenge of this part of the process was that the web team were wireframing and designing a site in a half-blind situation - guesstimate how everything will or should work on the website as they haven't had all the contents yet. At the same time, they needed to constantly communicate with the book designer in order to achieve a unique but uniform look and feel between two mediums - in brief, they needed to plan everything to the max to avoid any possible risks, and they needed to create a strong but flexible look and feel, and also to communicate with all stakeholders constantly.

This was not an easy task for the team, but in the end the design team pulled through with a great solution -

  • They believed taking a minimalist approach on design / visual was the best direction, the reason being to let the contents of the website shine, as well as create a design that will be flexible to work cohesively with design influence from other medium.
  • Restricted to one photo with each piece of feature writing to create the right balance between picture and writing. This restriction was applied across the website and the book to create a united feeling across medium.
  • Re-editing the documentary into individual clips for web-friendly viewing
  • Create a visually compelling historical walk through to encourage better retention rate for the page. This is unique for the web media to create a USP that differentiate the web from book design.

Below is an example of homepage wireframe - a minimalist approach with strong typography hierarchy:

DHB wireframe

The key for the success of the project is COMMUNICATION and Smart PROJECT MANAGEMENT, as well as ENGAGE your clients at all time.

design together

The nature of this project means there are stakeholders, content providers, client and other design team that all have their own agendas and opinions as input into this project, and it was not an easy task to fulfill everybody's needs. As a result, the web design team had to really know what the target audiences were looking for, and build a website that was tailored for the audiences, while fulfilling all these requirements with a clear sense of direction of how this website should function in the end.

What the team learned from this project was to "design together" with your client, content providers, stakeholder etc - it was simply not about "design by committee", but providing clients and other stakeholders a strong and clear vision on how the solution can work, and how it will benefit the project and maximise the engagement with the target audiences.

To the web design team, the key for the success of this project was COMMUNICATION & Smart PROJECT MANAGEMENT - They engaged with everybody all the time throughout the project; they were involved and their opinions heard, while the design team had to know when to make necessary tweaks and when to say no with good reason. At the end, they came up with a strong solution that both engaged the target audience while fulfilling everybody's expectations.

Below is the final mock-up of the homepage that was presented to the clients and stakeholders. The design shows strong resemblance to the wireframe shown before. This is a good example to demonstrate that the design team have identified the key elements for successful project from the very beginning and fulfilled clients' and stakeholders' requirements. This has enabled the team to be able to produce something that was consistent and hit the mark:

DHB homepage mock up

magic touch

After the team got a greenlight from clients and stakeholders for basic framework (design mock up). They moved on to the process of "spicing up" the website design.

A well-designed website always consists of some great features that make it stand out from the rest. Below is a couple features that the team custom-built for " A day in the life..." website. They believe these features have provided the site a more compelling and interesting twist:


This is one of the features that was suggested by the web design team, and clients really loved it.

While the design team pulled all the stories together into the website, they can't help to wonder how they could help users understand and appreciate the DHB's employees' life better? The answer was simple, by creating a compelling infographic that demonstrates the hardwork and activities of the DHB employees' everyday life.

DHB infographic
DHB infographicDHB infographic

timeline design

Another challenge that the design team faced was to present a brief 125 years of history of DHB on the website.

The design team chose not to go with a page full of writen history, but creating a Facebook-inspired timeline solution. Mark had to curate through hundreds of photos provided by DHB, working with writers to identify and caption each image, and built all these materials into a beautifully laid-out timeline design with a proper interaction built in for easy navigation.

The end result is great, the history have been briefly divided into three main sessions, with each session ending with a quirky but informative infographic to provide users a break from reading the history and keep them intrigued about what to come next.

Interested in what you reading, check out the website for all the details:

DHB history timeline
character design

Character Design

We had the opportunity to work with different clients to create a few characters that I truly loved.

go to behance
book cover design
behance project

Book Cover design

This was a pro-bono project to create a series of book covers for the Negev BTI bible school.

go to behance
Morph Hair Design poster

Morph Hair Design

Morph Hair Design, a funky hair salon looking for a new direction for their promotional materials.

go to behance

Let's keep in touch

  • facebook
  • behance
  • pinterest
  • tumblr
  • twitter


Drop us a message -- hello@wearemark.co

give us a call -- +64 (21) 107 1600