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.
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.
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 -
Below is an example of homepage wireframe - a minimalist approach with strong typography hierarchy:
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:
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.
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.
We had the opportunity to work with different clients to create a few characters that I truly loved.
This was a pro-bono project to create a series of book covers for the Negev BTI bible school.
Morph Hair Design, a funky hair salon looking for a new direction for their promotional materials.
Drop us a message -- email@example.com
give us a call -- +64 (21) 107 1600
mark & co is the trading name of e.i. Studio Ltd (experimental . implementation) | © 2012 mark & co (aka e.i. studio ltd). All Rights Reserved.