top of page

NMMA

National Museum of Modern Art

A UX Design Case Study

James Lex, UX Designer

Overview

After creating an app for the NMMA, I needed to create a responsive website that would be able to adjust and account for varying screen sizes. The ultimate goal for each user is to click on the ticket tab, but every user has different needs to confirm their visit or relinquish any hesitancy. Over the course of 3 weeks, I conducted research, sketched responsive website ideas, and created a final prototype. Explore below: 

Goal: To create a responsive website for the National Museum of Modern Art for users to explore current exhibits, book a time slot, and prepare for their visit. 

​

Role: UX Designer

  • Create Information Architecture

  • Initial sketches 

  • Digital Wireframes and Mockups

  • Accessibility Research and considerations

​

Time Frame: 3 weeks

Information Architecture

Paper Wireframes

Desktop

Adobe Scan Sep 9, 2024 (dragged) 3_edite
Adobe Scan Sep 9, 2024 (dragged) 4_edite
Adobe Scan Sep 9, 2024 (dragged) 5_edite

Phone

Adobe Scan Sep 9, 2024 (dragged)_edited.
Adobe Scan Sep 9, 2024 (dragged) 2_edite

Wireframes and Mockups

Slide to view wireframes vs. Final mockup

Homepage

  • Utilized the sticker sheet from the NMMA app project for colors, typography, and icongraphy

  • Google's Material Design system was the primary tool to create a consistent and cohesive appearance

  • The website needed to convey a balance of elegance, simplicity, and approachable

  • Used a combination of card layout and matrix layout for the homepage

Booking Page

  • The booking page uses a single-column layout for easy step-by-step process 

  • Unlike the other pages that are full of choices and photographs of art, this needed to be focused so users could complete the task

  • I decided to use drop down options for the visitor count and time options because availability would change depending on the initial date selection

UX Features

Responsive

  • The card layout adjust from a grid to a single column layout 

  • The top navigation bar at the top of the webpage collapses to 3 options (visit, exhibits, tickets) with a "hamburger" tab that would drop down to the full menu

  • I'd like to continue to add a hover feature that would allow viewers to hover over each tab and see the subpages

Accessibiliity

  • Clear hierarchal headings, subheadings for the pages allow screen readers to navigate

  • Before turning over to engineers, I'd need to annotate to show traversal order when it comes to purchasing tickets 

  • Continuing on the project, I'd further develop "dark" mode options and zoom-in capabilites to meet Web Content Accessibility Guidelines (WCAG)

Final Thoughts

The Wins

  • Used more online free tools such as Mural to create a sharable sitemap and ElfSight for widgets

  • Sticker sheet that I created on the first project was able to transfer easily to this project, saving time (and potentially money)

  • Increased the speed of wireframe and mockup creations by nearly double from the first project

The Challenges

  • Although the speed of wireframes and mockups increased, the amount of input and usabilities studies decreased in a shorter timespan

  • Explored other design systems and ended up using Material Design as something I was already familiar with, but options were limited like the date selection​​

The Surprise

  • I got to embed some code into this wix page and I want to explore more html capabilities to my prototypes

  • My favorite part is pen-to-paper sketches 

  • There is a balance of big-picture and detail-oriented tasks that I enjoy and wonder if that will apply to a real-world project

bottom of page