Logo


Home

About

Contact

Hey
Hey

My Role


UX + UI Designer

Product Designer

Time


2 Months

Tools


Figma, FigJam, Canva Pro

Tools


Figma, FigJam,

Canva Pro

Tools


Figma,

FigJam,

Canva Pro

Team


Estefania Sanchez

Team


Estefania

Sanchez

Project Overview

Website redesign providing users with a clear and efficient way to navigate the museum's offerings, explore exhibitions, and access key information, ultimately enhancing their overall experience on the site.

About

The Museum of Modern Art (MoMA) situated right in the middle of Manhattan, New York, houses one of the greatest art collections in the world. Since the completion of its 425 million dollar renovation in 2004, MoMA has over 630,000 square feet of space, including 125,000 square feet for exhibitions and public programs.

Problem

The Museum of Modern Art (MoMA) in New York, a renowned institution with a substantial and diverse user base, faces challenges with its outdated website. The current design fails to resonate with the Gen-Z audience, affecting user engagement and satisfaction. The website’s navigation, visual appeal, and booking process are not aligned with modern user expectations, leading to a diminished user experience.

Solution

To address these challenges, I undertook a comprehensive redesign of MoMA’s website over a two-month period. My approach involved three rounds of wireframing, prototyping, and user testing to ensure the design met the expectations of the Gen-Z audience. The solution includes a fully revamped UI/UX design with an expandable design system. Key improvements include:

- Accessibility Enhancement

-Organized Homepage Categories

-Whitespace Utilization

-Aesthetic Redesign

To address these challenges, I undertook a comprehensive redesign of MoMA’s website over a two-month period. My approach involved three rounds of wireframing, prototyping, and user testing to ensure the design met the expectations of the Gen-Z audience. The solution includes a fully revamped UI/UX design with an expandable design system. Key improvements include:

- Accessibility Enhancement

-Organized Homepage Categories

-Whitespace Utilization

-Aesthetic Redesign





Process

I followed a user-centered design approach, moving through the stages of Empathize, Define, Ideate, Prototype, and Testing to create a solution that meets both user needs and business goals.

EMPATHIZE

First Phase

User research

Target audience

User interview

Competitive analysis

PROTOTYPE

Fourth Phase

Lo-Fi wireframes

Hi-fi wireframes

Design systems

DEFINE

Second Phase

User persona

Empathy map

User journey

TESTING

Fifth Phase

Feedback

Conclusion

Future concept

IDEATE

Third Phase

User flows

User stories

Sketches

Information architecture

GROW

Sixth Phase

Reflect & grow as a designer

Target Audience:

Users aged between 21-35 years old, including young professionals, art enthusiasts, and individuals with varying needs, seeking a seamless and engaging online experience to explore art exhibitions, access museum resources, and plan visits with ease. Art should be a democratic form of expression, accessible to everyone, including individuals with special needs.

Current Website Analysis

As part of my evaluation of the MoMA website, I conducted a detailed usability review and identified several key issues: accessibility concerns, overuse of bright colors, layout issues, and a lack of white space. These findings highlight the need for a more accessible, user-centered redesign to improve overall usability.

User Research

I interviewed a diverse group of participants, including young professionals, millennials, art enthusiasts, and individuals with special needs, to understand their experiences and pain points when navigating the museum’s website. The interviews focused on their interactions with the homepage, fonts, and buttons, as well as their overall expectations for a museum website.

Interviews:

I analyzed several leading museum websites to identify best practices and design trends. This analysis focused on how these sites handled navigation, accessibility, visual hierarchy, and overall user experience.
I analyzed several leading museum websites to identify best practices and design trends. This analysis focused on how these sites handled navigation, accessibility, visual hierarchy, and overall user experience.

Pain Points

Pain Points

Pain Points

Cluttered Interface: The existing website had insufficient white-space, leading to a cluttered and overwhelming interface. This made it difficult for users to clearly understand the content and navigate the site effectively.


Complex Navigation: Users struggled with the website’s navigation, particularly when attempting to book tickets. The structure was not intuitive, causing frustration and leading to a poor user experience.

Accessibility Barriers: The website had several accessibility issues, including poor contrast, non-keyboard-friendly navigation, and a lack of descriptive alt texts for images. These factors made the site difficult to use for people with disabilities, limiting its inclusivity.

Cluttered Interface: The existing website had insufficient white-space, leading to a cluttered and overwhelming interface. This made it difficult for users to clearly understand the content and navigate the site effectively.


Complex Navigation: Users struggled with the website’s navigation, particularly when attempting to book tickets. The structure was not intuitive, causing frustration and leading to a poor user experience.

Accessibility Barriers: The website had several accessibility issues, including poor contrast, non-keyboard-friendly navigation, and a lack of descriptive alt texts for images. These factors made the site difficult to use for people with disabilities, limiting its inclusivity.

Persona

I developed detailed personas to represent key user groups, allowing me to tailor the redesign to the specific needs, behaviors, and goals of MoMA’s diverse audience.

Empathy Map:

I utilized empathy maps to gain a deeper understanding of users' emotions, motivations, and challenges, ensuring the redesign truly reflects and addresses their needs and experiences.

User Stories:

I crafted user stories to capture the needs and goals of different user personas, guiding the design decisions to ensure the final product met their specific expectations and provided value.

User Flow:

I mapped out the user flow to identify and streamline the key steps users take to accomplish tasks on the website, ensuring a smoother and more intuitive experience from start to finish. The flowchart symbols I used are:

Circle = Action: User actions like clicking a button or submitting a form.
Rectangle = Screen: Pages or screens the user interacts with.
Diamond = Decision: Points where users make choices, affecting their next step.
I mapped out the user flow to identify and streamline the key steps users take to accomplish tasks on the website, ensuring a smoother and more intuitive experience from start to finish. The flowchart symbols I used are:

Circle = Action: User actions like clicking a button or submitting a form.
Rectangle = Screen: Pages or screens the user interacts with.
Diamond = Decision: Points where users make choices, affecting their next step.

Wireframes

Designing basic wireframes facilitated clear communication of the user flow and helped identify and address logical gaps early in the process. As initial requirements evolved, the wireframes were adjusted accordingly, refining the user flow to better align with changing needs.

Iterative progression of wireframes

Wireframes

Crafting initial blueprints fostered clear articulation of user pathways and enabled early recognition and resolution of reasoning voids in the workflow. As preliminary stipulations evolved, these blueprints were updated accordingly, tuning the user pathways to synchronize with altering demands.

Solution

Comprehensive homepage redesign focused on improving accessibility, navigation, and user engagement.