/ chapman ventilation

role user experience, user interface, project management
project type design, development, wordpress
launch 2015

mind-cvl-desk-0

/ introduction

If you’ve ever walked into a restaurant and haven’t walked out flame-grilled like your main course, that’s probably because it has adequate ventilation.

Chances also are that the ductwork was designed and fitted by Chapman Ventilation, who are one of the biggest heating, ventilation and air conditioning companies in the country, with only strict market regulations limiting their unbridled dominion over the industry.

If you’ve ever walked into a restaurant and haven’t walked out flame-grilled like your main course, that’s probably because it has adequate ventilation.

Chances also are that the ductwork was designed and fitted by Chapman Ventilation, who are one of the biggest heating, ventilation and air conditioning companies in the country, with only strict market regulations limiting their unbridled dominion over the industry.

mind-cvl-desk

/ objective

Chapman have been around for half a century and were keen to overhaul a long-neglected online presence in order to narrate their heritage, evolution and partnership with major restaurant chains over the years. They first commissioned a series of photo shoots across numerous project locations and then saw an opportunity to re-design their website for the purpose of exhibiting these images.

I sought to design a system that accomodated an impressive photographic library and leveraged the brand power of an extensive clientele. An expanding body of work much like this portfolio, filled with case studies of successful projects that elevate Chapman above their competitors. The old family adage coined by Grandfather Chapman himself was about to ring true: "ventilation is about being cool”.

Chapman have been around for half a century and were keen to overhaul a long-neglected online presence in order to narrate their heritage, evolution and partnership with major restaurant chains over the years. They first commissioned a series of photo shoots across numerous project locations and then saw an opportunity to re-design their website for the purpose of exhibiting these images.

I sought to design a system that accomodated an impressive photographic library and leveraged the brand power of an extensive clientele. An expanding body of work much like this portfolio, filled with case studies of successful projects that elevate Chapman above their competitors. The old family adage coined by Grandfather Chapman himself was about to ring true: "ventilation is about being cool”.

Chapman Ventilation – Sketches
mind-cvl-wf-home
mind-cvl-wf-clients
mind-cvl-wf-client

/ approach

The project kicked off with a requirements capture meeting to determine the exact scope of work and elaborate on basic user experience concepts that would guide my initial research. By familiarising the client in this context with user data they had been collecting but not necessarily analysing in any meaningful way, it would become easier to justify decisions informing the final site map and user flow, before proceeding with the low-fidelity designs.

Fortunately, as a relatively small website, much of the existing site map would be retained, with the focus of the new IA and page design being the prominence and presentation of the new case studies.

Working from a basis of sketches to quickly wireframe layouts and demonstrate different user flows from one page to another, towards a series of low-fidelity wireframes linked together as an interactive prototype using InVision, I was rapidly able to advance on feedback from the client and iterate the designs to their satisfaction, providing a solid foundation upon which to design the user interface in more detail.

The project kicked off with a requirements capture meeting to determine the exact scope of work and elaborate on basic user experience concepts that would guide my initial research. By familiarising the client in this context with user data they had been collecting but not necessarily analysing in any meaningful way, it would become easier to justify decisions informing the final site map and user flow, before proceeding with the low-fidelity designs.

Fortunately, as a relatively small website, much of the existing site map would be retained, with the focus of the new IA and page design being the prominence and presentation of the new case studies.

Working from a basis of sketches to quickly wireframe layouts and demonstrate different user flows from one page to another, towards a series of low-fidelity wireframes linked together as an interactive prototype using InVision, I was rapidly able to advance on feedback from the client and iterate the designs to their satisfaction, providing a solid foundation upon which to design the user interface in more detail.

/ thoughts

An inherent challenge of designing websites for content management systems is ensuring the administrator and editors are able to maintain the content and design simultaneously. The old website, built on Joomla, suffered from templates with limited content areas and little design to follow.

While documenting the functional specification of the new WordPress-based website, I translated every editable design element into a content module with its corresponding guidelines and constraints.

This phase in the handover process is even more important in the current age of proliferating design systems, pattern libraries and UI style guides. It empowers editors to focus on the task of populating content within a design system sensitive to character limits and image proportions and optimisation so the established look and feel is maintained until the next iteration of the website.

 

An inherent challenge of designing websites for content management systems is ensuring the administrator and editors are able to maintain the content and design simultaneously. The old website, built on Joomla, suffered from templates with limited content areas and little design to follow.

While documenting the functional specification of the new WordPress-based website, I translated every editable design element into a content module with its corresponding guidelines and constraints.

This phase in the handover process is even more important in the current age of proliferating design systems, pattern libraries and UI style guides. It empowers editors to focus on the task of populating content within a design system sensitive to character limits and image proportions and optimisation so the established look and feel is maintained until the next iteration of the website.

/ additional design credits

josh white - mobile ui designer, sam holtby - front end developer