Chinese American Museum
Origins: A User-Generated Museum Exhibit created using iPads, Google Maps and WordPress
Origins: The Birth and Rise of Chinese American Communities in Los Angeles is a permanent, cutting edge exhibition celebrating the growth and development, since the 1890s, of Chinese American enclaves from Downtown Los Angeles to the San Gabriel Valley.
Origins was designed for the Chinese American Museum, Los Angeles by THINK Jacobson & Roth. I was fortunate to be brought on as a member of the THINK team, providing start-to-finish design and development on the exhibit’s media component, Origins online. An interactive website available in the exhibit’s Monterey Park area, Origins online allows visitors to find and share great places, stories and resources of the San Gabriel Valley and other LA neighborhoods. The in-gallery presentation includes a table with two iPads for accessing the website, and a third for recording video of visitors’ own stories.
Agile Design Process, No Wireframes.
One of the earliest decisions we made on the project was to forego traditional wireframes.
The project team, consisting of CAM’s Steve Wong and Michael Truong, and THINK’s Lori Jacobson and Carla Roth, had a strong broad-strokes image of what they wanted. At our first meeting they described a map of the San Gabriel Valley, with markers indicating points of interest submitted by the public. And so, to our second meeting, I brought a working prototype demonstrating that functionality.
We continued in that vein for much of the project. At each meeting we reviewed the current state of the application and came to a consensus on development priorities for the next week. Feeling our way forward, we’d field lots of ideas and implement those with the highest priority. This process reminds me of the saying, “crossing the river by stepping on stones.”
Rather than discussing abstractions and hypotheticals, this approach allowed us to base our decisions on real experiences with a working interface. And rather than spending our limited time producing paper documents such as wireframes and mockups, all our effort went toward expressing ideas in code that could be poked, prodded, tested and, ultimately, launched.
“When Marty proposed working without wireframes, I immediately responded positively to this idea. With a tight budget and a hands-on client, working with iterative prototypes was the way to go. Rather than lingering in pre-production, this allowed us to quickly make team decisions and try things out in a very real way.”
— Carla Roth
At about the two-thirds mark we took a step back and presented our work, and the decisions it embodied, to Executive Director Michael Duchemin, who gave it his blessing. As the physical exhibition took shape we took a break, and by the time we reconvened the launch date had begun to loom large. So we locked development on new functionality and turned our focus to fit and finish.
I proposed that, since the site would be presented in-gallery using iPads, we adopt the iOS design vernacular. Applying gradients, highlights, textures and pop-overs would involve adding substantial complexity to the code, however, and increase the cost-of-change. For this reason we decided it was finally appropriate to create a mock-up and secure a more traditional client sign-off. From there we turned to browser testing and bug barbecue, then finished with the physical installation and documentation.
Google Maps + WordPress + iPads
Curator Steve Wong described his own extensive use of Google Maps in charting the region’s activity and history, and imagined enabling something similar for the community. I had previous experience with the Google Maps Javascript API so was able to hit the ground running. We chose WordPress for the CMS because of its ease-of-use for both development and content management. Additionally, I knew that the Gravity Forms plugin would allow us to fulfill the user-submission aspect of the project. And we chose Media Temple to host based on the suitability of their offering and my own familiarity with their setup. (Their location in Los Angeles was a bonus!)
The implementation’s core technical concept is described in my WordPress + Google Maps tutorial. Also, this project was the original motivator for the Address Geocoder WordPress plugin, which is now available from the WordPress plugin directory. The other aspect of the technical challenge was creating a JavaScript-heavy site that would look its best on 3rd generation iPads running the Kiosk Pro browser, while also performing on the desktop.
I’m happy to answer questions regarding the technical aspects of this project, including the Google Maps API, WordPress or, more generally, our agile approach and deploying web-based museum exhibits using iPads. Questions about the overall exhibit should be directed to THINK Jacobson & Roth.
The Chinese American Museum is a great space with a ton of history and a staff truly committed to serving their community and preserving its heritage. If you’re in LA, go see the exhibit!
WordPress migration for the Chinese American Museum, Los Angeles
The Chinese American Museum, Los Angeles wanted a Content Management System, so that non-technical staff could make changes on their own. And, based on the experience using it for the Origins site, they wanted WordPress. So that’s exactly what we did!
Overall, this work was about making life easier for CAM staff. We left the visual design and layout largely the same as it was — this was not a full-scale website redesign — but did refactor aspects of the HTML and CSS to simplify content management, such as taking styles and classes out of the content where possible.
The one area we did redesign, however, was the home page. The previous layout was designed to be “above the fold,” which constrained the amount of information it could present. Our redesign increases the diversity and amount of information available.
Symbolically housed in the oldest and last surviving structure of Los Angeles’ original Chinatown, the Chinese American Museum strives to foster a deeper understanding and appreciation of America’s diverse heritage and the continuing contributions of Chinese Americans.
The Chinese American Museum website is hosted by Media Temple.
Touchscreen interactive for the Chinese American Museum Los Angeles
I recently had the opportunity to again collaborate with the Chinese American Museum on an interactive touchscreen in-gallery kiosk. The piece is part of the exhibition Tales of the Distant Past: The Story of Hong Kong and the Chinese Diaspora and illustrates the Chinese diaspora around the world.
Design and development of the project began with a Museum-supplied spreadsheet of the Chinese population for each of the world’s countries, sourced from the Wall Street Journal. Realizing that many of the countries would be presented at sizes that would be much too small to work as touchscreen hit-targets, I combined them into 50 interactive pieces. Each of these pieces can be tapped to open up a detail screen presenting the Chinese population in each country.
The interactive was built using HTML/CSS/JavaScript, with SVGs for the maps. It’s presented via a web browser in kiosk mode, running locally on a computer housed inside the wall.
This is the second map-based touchscreen in-gallery kiosk I’ve created for the Chinese American Museum Los Angeles. The first was Origins: Monterey Park, A Chinese American Suburb, focused on the community around LA.
The Chinese American Museum Los Angeles, housed in the oldest and last surviving structure of LA’s original Chinatown, is dedicated to the Chinese American experience and history in Southern California.