(SCENE) METROSPACE 

Redefining a gallery's space on the web and beyond.

(SCENE) Metrospace is a multipurpose gallery space in downtown East Lansing, Michigan affiliated with and operated by Michigan State University's Department of Art, Art History, and Design. A colleague and myself were tasked with updating the aesthetic and improving the user experience of the gallery's outdated website.

I worked with Jose Luis Mendez to create these concepts - you can see more of his work at http://mendezdesigns.info/

 (SCENE) Metrospace Homepage

(SCENE) Metrospace Homepage

PROCESS

 Existing Site

Existing Site

 Preliminary Sketches

Preliminary Sketches

The existing site suffered mainly from a complete lack of informational hierarchy. Some links would bounce a viewer off the page with no warning, and blog posts and exhibition archives were both disorganized. 

With our concept we worked from the theme of putting content in squarish 'spaces,' an allusion to the name of the gallery. We cast out the blaring red background in favor for a more pleasing green and gray color scheme to reference the gallery's affiliation with Michigan State.

 Wireframes

Wireframes

 Branding

Branding

The final design includes a fixed vertical navigation with an expandable and collapsible menu. The homepage showcases pertinent and/or recent (SCENE) exhibitions, as well as relevant AAHD events. Clicking the modules will either expand the item into a lightbox or take the viewer to a separate page, depending on the type of content - single-entry pages like specific events are relegated to lightboxes to minimize back-and-forth navigation and keep information at a viewer's fingertips.

The exhibitions page features a ticker at the top that moves to indicate the year as a viewer scrolls through entries; likewise, clicking a year in the ticker will cause the page to scroll to entries for that year.

 The new (SCENE) Homepage

The new (SCENE) Homepage

 Exhibitions Page

Exhibitions Page

Clicking the image of a specific exhibition would expand a lightbox with images. Clicking an image would expand it into a gallery. These features allow users to bring up content and close out of it without having to go back and forth between several pages.

Our concepts are easily scaled for mobile without losing any core functionality.

 Exhibition Detail Lightbox

Exhibition Detail Lightbox

 Mobile

Mobile

 Page Layouts

Page Layouts