Monthly Archives: March 2012

Building the wall

Last month we released our collection data on Github.com. It was a pretty monumental occasion for the museum and we all worked very hard to make it happen. In an attempt to build a small example of what one might do with all of this data, we decided to build a new visualization of our collection in the form of the “Collection Wall Alpha.”

The collection wall, Alpha

The collection wall, Alpha

The idea behind the collection wall was simple enough–create a visual display of the objects in our collection that is fun and interactive. I thought about how we might accomplish this, what it would look like, and how much work it would be to get it done in a short amount of time. I thought about using our own .csv data, I tinkered, and played, and extracted, and extracted, and played some more. I realized quickly that the very data we were about to release required some thought to make it useful in practice. I probably over-thought.

Isotope

Isotope

After a short time, we found this lovely JQuery plugin called Isotope. Designed by David DeSandro, Isotope offers “an exquisite Jquery plugin of magical layouts.” And it does! I quickly realized we should just use this plugin to display a never-ending waterfall of collection objects, each with a thumbnail, and linked back to the records in our online collection database. Sounds easy enough, right?

Getting Isotope to work was pretty straight-forward. You simply create each item you want on the page, and add class identifiers to control how things are sorted and displayed. It has many options, and I picked the ones I thought would make the wall work.

Next I needed a way to reference the data, and I needed to produce the right subset of the data–the objects that actually have images! For this I decided to turn to Amazon’s SimpleDB. SimpleDB is pretty much exactly what it sounds like. It’s a super-simple to implement, scalable, non-relational database which requires no setup, configuration, or maintenance. I figured it would be the ideal place to store the data for this little project.

Once I had the data I was after, I used a tool called RazorSQL to upload the records to our SimpleDB domain. I then downloaded the AWS PHP SDK and used a few basic commands to query the data and populate the collection wall with images and data. Initially things were looking good, but I ran into a few problems. First, the data I was querying was over 16K rows tall. Thats allot of data to store in memory. Fortunately, SimpleDB is already designed with this issue in mind. By default, a call to SimpleDB only returns the first 100 rows ( you can override this up to 2500 rows ). The last element in the returned data is a special token key which you can then use to call the next 100 rows.

Using this in a loop one could easily see how to grab all 16K rows, but that sort of defeats the purpose as it still fills up the memory with the full 16K records. My next thought was to use paging, and essentially grab 100 rows at a time, per page. Isotope offers a pretty nifty “Infinite Scroll” configuration. I thought this would be ideal, allowing viewers to scroll through all 16K images. Once I got the infinite scroll feature to work, I realized that it is an issue once you page down 30 or 40 pages. So, I’m going to have to figure out a way to dump out the buffer, or something along those lines in a future release.

After about a month online, I noticed that SimpleDB charges were starting to add up. I haven’t really been able to figure out why. According to the docs, AWS only charges for “compute hours” which in my thinking should be much less than what I am seeing here. I’ll have to do some more digging on this one so we don’t break the bank!

SimpleDB charges

SimpleDB charges

Another issue I noticed was that we were going to be calling lots of thumbnail images directly from our collection servers. This didn’t seem like such a great idea, so I decided to upload them all to an Amazon S3 bucket. To make sure I got the correct images, I created simple php script that went through the 16K referenced images and automatically downloaded the correct resolution. It also auto-renamed each file to correspond with the record ID. Lastly, I set up an Amazon CloudFront CDN for the bucket, in hopes that this would speed up access to the images for users far and wide.

Overall I think this demonstrates just one possible outcome of our releasing of the collection meta-data. I have plans to add more features such as sorting and filtering in the near future, but it’s a start!

Check out the code after the jump ( a little rough, I know ).

Continue reading

Teens & Tech Focus Group

On Saturday, at Cooper-Hewitt, we had a focus group with about 20 teenagers to learn how they prefer to capture and create media. The focus group was held jointly by Cooper-Hewitt and the American Museum of Natural History. Our two museums are connected by MacArthur’s HIVE Learning Network, which aims to create and connect informal and formal learning opportunities for youth in virtual and physical spaces.

My group used exclusively iPads– even when other devices were readily available.

Both museums had experienced some digital follies over the last few years in our efforts to incorporate new digital tools into youth programs. From 3G connectivity woes to buggy beta software, these issues are an educator’s nightmare. Any one who has some experience teaching or running programs for kids can tell you that there’s no time for glitches when you’ve got a room full of students and a short amount of time. Stuff has to work, and you want the focus to be on content, not on tools.

Before diving in to a new season of fashion workshops and biology labs with hundreds of NYC teens, both museums wanted some fresh insight on how today’s teens relate to tech.

We wanted the students to get educational value out of their day with us, so we designed the focus group as a typical DesignPrep program, but with some added surveys and discussions about technology. Here was the structure of the day:

1. Pre-Survey for students

2. Cooper-Hewitt educators’ excellent “What is Design” and “Learning to See” presentations.

3. Ready, Set, Design— a hands-on activity to get the group “thinking like designers.” The activity challenges were tailored to the context of Central Park (“I need to find my way around the park efficiently,” “I want my walk around the reservoir to be more fun and interesting,” etc)

4. Announced the students’ challenge– to collect a diverse array data from a given zone in Central Park, identify something in that zone that could benefit from a design solution, and finally present their ideas to the group.

5. “Hardware Buffet”– we put out Android phones, iPads, still cameras, video cameras, notebooks and pens. We observed carefully while the students chose their tools.

6. We split into 4 groups and headed to the park. The students lead their own processes of data collection while Museum staff observed. Staff also carried bags of “buffet leftovers” to allow any hardware swaps along the way.

Collecting photos, videos and statistics in Central Park

7. We returned to Cooper-Hewitt, where the students synthesized their media and created presentations.

Synthesizing multimedia and ideas for a final presentation

8. Presentations, group discussion about technology, followed by an exit survey for students.

Student presentation using Tumblr

9. After the students left, Museum staff completed a survey to record fresh thoughts on the day.

What did we learn? Here are some excerpts from Museum staff’s surveys:

 

Rebooting retail – redesigning the Shop at Cooper-Hewitt

Jocelyn Crapo is the Cooper-Hewitt’s Director of Retail Operations. She and her team have been working to transfer the focus of the museum shop from its former physical presence in the galleries to an online experience whilst the redevelopment takes place.

To that end, a brand new ecommerce presence went live as public beta last week.

Here’s Jocelyn.

Tell us about the history of Cooper-Hewitt’s online shop.

The Shop’s first ecommerce site launched in June of 2006, using a custom content management system on the back end and was a close visual representation of the physical shop space. The first iteration used Paypal as the payment processor and the shop staff maintained inventory levels for both the physical shop and the Ecommerce site by running online sales through the Point of Sale in the Shop.

At the time we were using and constantly maintaining three different content management systems within the Retail team and as many accounting platforms within one department.

1. CAM Commerce’s Retail Star Point-of-Sale system to maintain inventory levels and Accounting reports,
2. Filemaker to maintain “blurb” information for display in the physical shop space and to maintain online blurb information
3. Custom CMS to maintain the Ecommerce website
4. Paypal to process Ecommerce sales

It was very inefficient and downright clunky. Not to mention a high risk of human error.

If there was a price change on one product, the price had to be changed in four different places, often requiring action from at least three different people. The price had to be updated in Retail Star, a new tag printed and affixed to the product, the price had to be updated in Filemaker and a new blurb had to be printed and displayed within the shop, and finally the Ecommerce CMS had to be updated for the web. All this for a small change of price in one product!

We began looking for a new inventory management system that could handle more of our needs. We wanted a system where the product attributes (price, blurb, inventory) could all be managed by one person in one place as much as possible. We finally identified a system and launched with the new system in October, 2010.

How did the old site perform?

During the first 5 years, our online sales ranged from 5-8% of our gross sales – which may not seem very significant, but given the small investment cost that went into the site in 2006, it paid for itself many times over.

As we were able to gather better and better data from Google Analytics we found that we had a conversion problem. We were getting visitors to the site, but in the end only 0.39% of the total visitors who came to the online shop actually purchased something.

Worse, only 10.81% of the visitors who put something in their cart actually completed the transaction.

While we were frustrated with the back-end functionality we knew that we had to streamline our front-end usability issues and bring up the conversion rates.

As we approached the beginning of a major renovation at the Cooper-Hewitt campus at the end of 2011, it was crucial to move forward as quickly as possible to get the new website on its feet. It quickly became the sole revenue source for the retail business venture and we needed a way to put more products online – quickly and easily. Moving from having both a physical shop and an online shop to having just an online shop has posed some new challenges.

We’ve had to re-evaluate order quantities and think differently about our space constraints. We don’t have the luxury of having two different selling platforms. We no longer have the face-to-face contact on the sales floor that inherently sparks a connection and relationship between the retailer and visitor. We are also challenged to interact visually and via narrative, rather than a tactile, person-to-person selling experience.

What were the features you looked for in a new site?

We needed a new system that offered;

– Real time inventory management for multiple sales channels: POS in physical shop space, Ecommerce site, potential pop-up shops, etc.

One immediate problem we experienced was maintaining inventory levels, especially when we had a product that was picked up for editorial coverage and we had a hard time keeping product in the shop, while fulfilling the website orders. It became obvious very quickly that we needed a much more robust system that could maintain real-time inventory, selling products through the physical shop, through an off-site kiosk or pop-up shop, and on the web with one central inventory.

– Seamless payment.

The old site used Paypal as the payment gateway and we knew from Google Analytics that many visitors to our site who had placed items in their shopping cart were not completing their purchases. By doing some tracking we discovered that nearly 9 out of every 10 were abandoning the purchase when they left us to checkout through Paypal.

– Modern, flexible navigation and search, not to mention SEO.
– Integrated members discounting
– Flexible product pages that would allow us to tell the stories of different products and why we had selected them for our shop.
– Real time Fedex pricing

Let’s look at some before and after screens

Home page before and after. The new site is less cryptic and allows us to show many more products immediately.

Product category view before and after

Product detail before and after. The new site gives the ability to have more detailed information on the products, large pop up views, as well as recommendations in the sidebar.

Checkout before and after. A much more streamlined checkout process without having to go offsite to PayPal.

How do you think the online shop will affect the future retail presence of Cooper-Hewitt?

Looking forward, I imagine we will have a very different perspective as we plan to open the next iteration of The Shop at Cooper-Hewitt when the museum re-opens.

What were once major factors in product selection will likely become less important, for example, our audience won’t necessarily be limited to people who can physically come to the Upper East Side, and we’ll undoubtedly have an off-site storage facility that will allow us to offer larger footprint products like furniture, lighting, textiles, even wallpapers.

We will also be able to use web analytics to inform merchandising strategies as we re-open a brick and mortar shop down the line, for instance, we can start to drill down into the purchasing habits of our customers, i.e. people who bought “x” also bought “y”. Armed with this knowledge we might merchandise two products together, that we wouldn’t have ever dreamed of displaying together before.

In fact, we will have the tools to do some online experiments which will provide quick and measurable results about what products sell best when merchandised together. These types of statistics were impossible to gather within our physical space since we had no way to track real time results of merchandising changes.

It will be very interesting, now that we have this new ecommerce system in place, whether the new identity of the physical shop will respond to the website or if the website will morph to a brand new graphic expression in response to the design of the new Shop to open with the new museum buildings.

When does the new site launch?

It is in public beta right now! And we’re doing a formal launch in May after we make some incremental improvements to it over the next two months.

Check it out!