The Contemporary Jewish Museum: Redesign

Project Length: 16 weeks | Project Date: 2016 | Team: Sean Durham, Anna Neyzberg, and Annu Yadav

Check out The CJM's website here!


Overview

The Contemporary Jewish Museum came to Carbon Five with a website that was 8 years old, not responsive and had a clunky content management system. My team was tasked with a full overhaul of the site for users as well as site administrators. 

 Events & Programs Page

Events & Programs Page

Project Goals & Challenges

Goals

• Update visual style to be on brand.

• Create a logical and user friendly information architecture.

• New flexible and modular design system that can be used to implement a variety of different pages.

Challenges

• Older user base. The museum's largest member base is 45 plus years old.

• Mobile first content. Creating stunning layouts and containers for the high quality content the museum creates. 


Kickoff

We spent a week with different teams in the museum running through design activities with them. We wanted to gain insight into how their organization works internally. This project required lots of stakeholder buy in and we needed to make sure we could express our ideas to the right people at the right time. We ran through exercises like a brand adjective card sort, journey mapping and personas.

 Persona and journey map

Persona and journey map


Design

Information Architecture

Our first move was to reverse engineer a site map of the museum's current website and use that as a tool to find problems in their current information architecture.

There was a large amount of repetitive information that surfaced throughout the site. For instance, a link to the tours section appeared on almost every single page of the old website. Another example was the distinction between the programs and education sections. These two different pages both showing the same relevant information. Making this site-map was essential to get buy in for our new information architecture shown below.

New Site-Map

The new structure for the IA is much more singular. We worked with multiple stakeholders to condense and combine pages. One thing I am really proud of is limiting the number of main navigation items. Doing this eliminated the repetitive pages and duplication of content.


Visual Development 

We were given full creative freedom to explore and present new concepts. The CJM was delightful in this process because they were not only willing to take risks but actively pushed our team to do so as well. Presented below is a few different mood boards and screenshots for the visual direction of the website. I personally struggled with this process, because of the lack of constraints and the ability to think outside of functionality. The site is an interesting type of product because it's main goal is to express an identity as information not solve problems.


Navigation

We began by doing a landscape audit of competitors websites to find what their navigation requirements were. The museum's nav was so dated that we were unsure what really we needed to keep or leave (which informed our IA shown above). After this we started to ideate on visual design directions. We wanted the nav to be a place where we could show visual language that would represent a strong brand voice.

 Nav ideation process

Nav ideation process

We went through many phases of ideation as pictured above. The concept we chose has a simple animation that plays once per user session. This shows a rhombus turning which is a strong symbol within the architecture of the building. When that animation is over it disappears and you are left with a very simply styled navigation. Under a few sections there are subpages that show quick links to important information which were determined by our product owners. I think the nav achieves the goal of being mobile first and helps to refine the visual identity of the museum. We also worked with many different departments to get the naming of the different sections correct. The names balance the museum's institutional needs with usability.

  Navigation live on production server

Navigation live on production server

Moblie nav


Side Pages

According to our IA there are main pages which directly link off the nav and their respective side pages, which are shown when a main page opens up. It was important to us that different tiers within our IA look visually distinct in order to signify to our users where they are in the site. One of the ways we did this was to assign different headers to different types of pages. 

The key to designing these pages was to show our clients different examples of how the pages could be built using our modular CMS. There were pages with text only, pages that would be mostly pictures and unforeseen needs that would come up in the future.

 Tours page

Tours page


Home Page  

We intentionally left designing the home page for last in order for it to be informed by the rest of our design rather than it dictating the rest of the site. After competitive research and many brainstorming sessions our team decided that our home page could be much more evocative and express the meaning and message behind the brand. This differs from a classic homepage which is very sterile. We selected a more evocative design because the institution is incorrectly thought of as a holocaust museum or a jewish community center. Our goal was to express that they are a center for contemporary art. 

IMG_8248.jpg

We expressed the four main principles of the museum as clearly as possible (to solve the problem mentioned earlier). These principles are Culture, History, Art and Ideas. We used images to give the user the most evocative experience and show off the fantastic content the museum creates. On hover you transition between photos gracefully to show the breadth of museum experiences. Also to boot the institution has full control of what images are shown and can update them at anytime!

  Home page live on production server

Home page live on production server

 Moblie home page

Moblie home page


Usability Testing

We went through two phases of usability testing at a midway point and at the very end of the project. I will only address the first study as it lead to more fruitful insights. We did these tests in 45-90 minute in person interviews and facilitated task based user testing. We primarily tested with a clickable prototype. Data was collected via video and a rainbow spreadsheet.

 

  Research synthesis

Research synthesis

From these interviews we created a report to show what worked and what didn’t. Our site tested well overall with a few exceptions.

  1. Some names in our nav were unclear (such as Programs and Learn).

  2. The “Learn” section of the website (a content archive) was not super useable. We started off with the assumption that grouping content by media type would be a clear way for users to browse. For instance all videos would live in a singular section. Through these tests we learned that users expected filters to explore content. This is currently implemented on the site.

  3. We had designed a feature called “Plan Your Visit” which let users create personalized itineraries. While we felt the concept was great, no one was used to planning a trip through a wizard flow. We ended up killing this feature after these tests.


Moving Forward and Looking Back

When our engagement ended we had really reshaped not only the user experience and visual design for The Contemporary Jewish Museum, but also how they managed and displayed the excellent content being produced in the future. I feel quite excited by the end result and proud of how true the site looks to how the physical museum feels. Next steps for me would potentially be approaching how we designed the modular CMS more systematically. At points designing modules could get clunky and being able to be more systematic through our approach could help the overall usability of the admin tool.