About MOCA

MOCA is the Museum of Contemporary Art. There are 4 locations — 3 are located in Los Angeles, California and 1 is located in Moapa Valley, Nevada. In addition to exhibitions, MOCA engages audiences through events and educational programs.

The Challenge

The goal was to create a user-centered website that addressed users’ needs, goals and pains; to improve the user experience by making it easier for users to find information and accomplish their tasks.

My Role

I was responsible for the User Experience (UX) and User Interface (UI) Design.

I Conducted/Designed

• User Interviews

• Expert Review

• Card Sorting Research

• Wireframe

• Prototype

• Usability Testing

• User Interface Design

• Visual Design

Design Process

Empathize

• User Interviews

• Expert Review

• Card Sorting Research

Define

• The goal

Ideate

• Wireframe

Prototype Wireframe

• Usability Testing with Users

• Validate + Iterate

Design

• User Interface

• Interaction

• Visual

User Interviews

The goal was to determine users’ primary goal(s) when visiting a museum website. Five user interviews were conducted to determine user’s wants and needs.

Findings

Users wanted to find the following information:

• Hours of operation (5 users)

• Admission price (5 users)

• Activities available (4 users)

• Parking (4 users)

• Calendar of events (2 users)

• Exhibitions on view (2 users)

• Address (1 user)

Expert Review

To find pain points, confusions, and inconsistencies, an expert review was conducted on the current website.

Homepage

• Need to hover over image to reveal location. Problematic on mobile since hover is not available.

• Clicked on “MOCA Grand” — Did not expect to see “Visit” page.

• Hovering over “Los Angeles” will reveal the primary nav — Unclear and unexpected.

Exhibitions

• Difficult to determine the location of each exhibition. All exhibitions were placed on the same page without an option to filter.

• Hovering over an image did not reveal location of exhibition like on homepage — Inconsistent.

Exhibitions > Details Page

• Body copy, line length is too long — Difficulty to read.

Collection

• Where are these artwork located? — Confusing.

Programs

• Did not expect to find events under this label — Confusing.

Support

• Did not expect to find Membership & Donor information under this label — Confusing.

Global Navigation

• There are two global navigations, with similar but not identical categories — Confusing. ( One is located in the page header. The other is located in the hamburger menu. )

• “Visit” is the most sought after category. It should be listed first not last.

Inconsistency

• “Exhibitions” — Subcategory is in upper left.

• “Collection” — Subcategory is in a drop down menu located in the upper right.

Card Sorting

A card sorting research was conducted to validated/invalidate current labels and labels for consideration. The goal was to determine whether the current labels are suitable or if they needed to be replaced. We are looking for a level of agreement that is higher than 65%.

Current Labels

• Support

• Visit

• Programs

• Exhibitions

Labels for Consideration

• Donate

• Contribute

• Events

• Calendar

Matrix Results

Findings

• Suitable — Visit, Exhibitions

• Need Replacement — Programs, Support

Solution

• Programs — Change to Events

Further Research Required

• Support — Two potential candidates: Donate and Contribute

Wireframe

Low-Fidelity Wireframes

8 Homepage directions were sketched in 15 minutes.

High-Fidelity Wireframes

High-fidelity wireframes were designed to create a prototype for usability testing.

Prototype

A low-fidelity prototype was created for conducting usability testing. The goal was to detect problems in the early stages of design.

Usability Testing

Goal

To determine whether users are able to easily complete primary goals gathered from the user interviews.

Test Plan

Findings

• Successfully completed — #1, #3, and #5-9

• Partially completed — #2 and #4

• Failed — None

Additional Findings

• User did not realize there are four locations until they saw the Visit page.

• User did not realize there are other things to do besides viewing artwork.

Homepage

Design decisions were made according to findings from user interviews. Content was reorganized and relabelled to help users achieve primary goals.

1. According to user interviews, primary goals were: 1) Hours of operation. 2) Admission price. And 3) Parking. All of which can be found under Visit, making the label, high priority. In the original design, Visit is located on the right, making it the last label in the global navigation. Understanding that users read/scan from left to right, the Visit label was moved to the left, making it easier to find.

2. “Activities available” and “calendar of events” were also highly sought after information. In the original design, activities and events were found under Programs. After conducting a card sorting research, findings show that a very low percentage of users were categorizing activities and events under Programs. Instead, a majority of users gravitated towards the Events label. To help users find information and reduce confusion, Programs was changed to Events.

3. Through usability testing, users did not realize there were 4 locations associated to this museum. This information was clearly stated.

Visit Page

Information associated with visiting the museum were primary goals among users. To make visiting the museum easy, necessary content were not only provided, but also hyperlinked when appropriate to create an easier and more efficient user experience.

1. According to the card sorting research, users had difficulty locating the “Become a member” page. A hyperlink has been added to take users directly to the sign up page. The hyperlink is also strategically placed after “Free”. The word “Free” is a great incentive to encourage users to become a member.

2. For mobile users trying to find their way to the museum, hyperlinks eliminate the steps of: 1) Having to copy the address. 2) Opening up a maps application. And 3) Pasting the address into the search bar.

Exhibitions Page

The current design was not user-friendly. The lack of information and features required much more effort from users. Content was added to create an interface that was more informative, less ambiguous, and easier to use.

1. To create a more efficient and easy-to-use interface, the museum location and duration were added. At a glance, users can determine where each exhibition is located and if the exhibition will still be up on the date they plan to visit. Previously, users would need to click on an image and proceed to the following page to locate this information.

2. For users who want to see available exhibitions according to museums, a filter was added.

Design Toolkit