The Client

The Yuchengco Museum houses the art collection of Ambassador Alfonso T. Yuchengco. It opened its doors to the public in September 2005 with the goal to foster public appreciation of art through international and local exhibits and programs. The Museum is located along Ayala Avenue in Makati City.

The Problem

The old Yuchengco Museum website was built with static html files copied from a Weebly site. The old website looked clean but the design was plain and boring. Content management was a lot of work. The Museum’s Information Officer manually updated content by downloading the static html files via FTP, editing them in her local computer, then re-uploading the updated files.

Yuchengco Museum old homepage
I met with Museum Information Officer Ms. Carla Martinez to discuss what they needed for the new website. Their main goal was to make the site design look current, easy to navigate and shareable to social networks thereby encouraging more online and real-life visitors. In our first meeting, we looked at other museum websites and discussed what design elements would work for the re-design.

Ms. Martinez also requested for the new site to be easily updateable. She had heard about WordPress but was not familiar with its use, so I showed her the WP admin panels of several past projects and explained how we could make updates easier using WP. I also explained how using custom post-types in WP could better organize the content from the administrator side.

Other important components that she requested for the website included an editable calendar of exhibits and events, a section to showcase interactive Flash multimedia exhibits made by students of the Mapua Institute of Technology, booking forms for venue rentals and an editable catalog of products in their museum shop.

After our meeting, I spent some time in the Museum to view the exhibits.

The Solution

Although I was given several museum websites as reference for the new design, it was the Museum’s architecture with its clean bisecting lines and geometrical shapes that eventually inspired me for the homepage layout.

Homepage mockups v1 and v2

I limited the color scheme to black, white and grey with the red from the Museum’s logo for contrast. The content is arranged within defined columns. Plenty of white space and avoiding unnecessary design embellishments give more emphasis on the text and photos of artworks.

To help Museum staff to manage the website content, I created two custom post types to organize related articles together inside the WP admin area.

Custom post-type and metaboxes for the exhibit editor

The “Art Exhibit” post type collects the exhibit articles. I created custom metaboxes where details about the exhibitions can be added right below the WP editor.

The “Product” post type collects the Museum shop products. It is a simple solution for managing the product catalog pages. This post-type also uses custom metabox panels for extra product information like book authors, product manufactures and price.

Like many WordPress themes that I build, the new Yuchengco Museum website is also responsive and adapts to smaller screen sizes.

iPad and iPhone layout