Updating UX for CMOG

Updating UX for CMOG

AWP developed a new and improved user experience for the Corning Museum of Glass specialty searches.

Subject Matter
Interactive

Author

Published
July 2, 2014

Share
Facebook Tweet

Corning Museum of Glass asked AWP to update the functionality and design of their collections browser and other specialized searches within their site. The glass collection is home to almost 50,000 items, and we were tasked with creating an interface that provided an intuitive search and filtering experience and showcased each piece in the collection, no matter its format. After a thorough Discovery process and an adventure wireframing in Google Docs (pictured above–more on that some other time…) we designed and implemented a fresh and intuitive search experience for visitors browsing online and at in-museum touchscreen kiosks.

A focused landing experience

We designed a landing experience that quickly introduces users to the primary search function, an improvement from the small search bar leading the sidebar of filters in the old design. The default search box text adapts for each specialized search interface, doubling as a headline and a functional element.

Browser-Mock-up-Frames-new

Scroll over the image to see the original view, compared to our updated interface.

 

An intuitive filtering system

Screen Shot 2014-05-02 at 10.35.39 AM

The original filter sidebar.

The original filtering system was in a sidebar format that required users to scroll to find the filtering criteria that they were looking for. Category and department drop-downs required scrolling through a long list, and curation and accession date data were not filterable. Users had to scroll multiple page lengths to see what filters were even available.

Our solution implements an expanding filter drawer into the sticky navigation which uses AJAX loading to update the results as you filter. Creation and accession date sliders determine start and end date for date ranges, and long lists of filters, like color or material, can be searched for specific criteria. The most popular filters, ‘on display’ and ‘has image’, are always available in the sticky navigation.

We give users the option to view results in an un-cropped, row-based grid view or a list view. Listing the applied filters below the navigation lets the user easily remove filters and see the exact criteria that they’re viewing.

refinedrawer-3

 

Streamlined object views

We introduced a new way to browse individual objects and library items in a full-width experience that adjusts to your browser height.  With thousands of items in their collections, we were up against the task of finding a way to elegantly display every item, despite the infinite combinations of completed data fields, image quality, and connections to other data.

We created a simple, image-first view that introduces the viewer to the object visually, then allows them to explore the details by scrolling or clicking for more information. Additional data is organized in tabs, and when an object doesn’t have every possible field populated, those tabs are simply hidden rather than showing empty fields. Many of the fields such as color, category, or place made link back to a search results view for other objects with the same qualifications. When high-res photos are available, additional functionality is enabled to allow users to explore the images in detail.

redpyramid-2

Click the image to explore an artwork node in action.

Collections cross-referencing

The previous interface added an additional right sidebar which either served as a simple prompt to search the other collections, or showed relevant results based on the search term only. We created a banner solution that doesn’t limit the width of the results view, while still serving as an obvious call to action to explore the other related search results. The banner can be closed, so frequent users who are not interested in the other collections can explore their search results uninterrupted.

When searching the collection, references to similar search results in the library are shown after the third row of gridded results. When searching the library or viewing any of the collections in list view, references to similar search results in the glass collection are shown after the first page of search results.

When searching the collection, references to similar search results in the library are shown after the third row of gridded results. When searching the library or viewing any of the collections in list view, references to similar search results in the glass collection are shown after the first page of search results.

Check out the completed collections browser at cmog.org/collection/search!