A User-Centered Approach To Redesigning The Membership Experience On The New York Transit Museum's Webpage

My role
UX Research and Prototyping
Duration
January - May 2023 (5 months)
Team
Karan Kirankumar Vora, Madhumitha Pradeep Kumar and myself
Methods
User Interviews, Affinity Diagrams, Card Sorting, Tree Testing, Competitive Analysis, Flow Diagrams, Sketching, Wireframing, User Testing, High-Fidelity Prototyping
Programs
Figma, Optimal Workshop

About the project

The New York Transit Museum, located in Brooklyn, is dedicated to showcasing the rich history of public transportation. As an independent division under the Metropolitan Transportation Authority, the museum relies on the generosity of donations and memberships to sustain its operations and fulfill its mission.

We worked with the New York Transit Museum to better their information architecture, with a particular focus on optimizing three key aspects of their website: membership, events, and ticketing. Within our project team, our specific focus honed in on enhancing the membership experience for users. Thorough research process grounded on the design thinking process, we delved into understanding user needs, leading to the development of a streamlined membership and member's event sign-up process. The goal was to elevate user experience and foster increased engagement with the museum's offerings.

The results were a set of recommendations grounded in research insights and a comprehensive redesign of the museum's information architecture, presenting our vision through both mobile and desktop high-fidelity prototypes. This initiative not only aimed to meet the immediate needs of the New York Transit Museum but also sought to create an online environment that would resonate with visitors and members alike, ensuring a seamless and enriched experience.

Empathizing

We began our project by empathizing with perspective and ongoing membership holders. Our goals were to identify the key factors that attract users to join a membership, examine the role of the website in promoting a membership program and assess the utilization of benefits by members once they join a membership program. Through 6 user interviews, we gathered valuable qualitative data displayed using an affinity diagram. This information was then used to draft a persona and extract key insights (see below) to guide our design process.

"I like their collections. I knew I would keep going back for both the permanent collection and for exhibitions, and I felt good about contributing money to those organisations."

The main motivations for membership holders to pay a membership:

Cost

Pricing is among the main factors for membership sign-up and retention, often calculated in comparison to regular entry ticket/access. (6/6 mentioned)

Belonging

Participants mentioned feeling like they have a positive impact by giving money to the institution, building a sense of belonging. (3/6)

Reciprocal Benefits

Two interviewer's unicorn wish was a membership pass allowing them to visit multiple museums in their region. (2/6)

Evaluative study of the NYTM's existing information architecture

The NYTM's website had previously been worked on by different designers and programs, resulting in an inconsistent information structure. Prior to focusing on improving the membership experience, we crafted a new site map to unravel the rich content on the site, including practical information for visitors, articles about the museum's collection, and sign-up processes for members and educators.

Even though our primary focus was not on the membership experience at this stage, we consistently asked ourselves: How did our persona resonate with how the museum was communicating their offerings and opportunities to page visitors?

Card Sorting

We modified the wording for existing labels to create 40 digital cards and conducted 7 unmoderated card sorting studies. The study produced a median of 8 categories per user. Comparing the results, we observed a priority for function-based categorisation, and a preference for simple and familiar labels. We thus decided on 7 categories: Visit, Calendar, Exhibitions, Shop, Explore, Learn & Teach, Join & Support; and moved About Us to the footer site map. As for the second tier, users had issues sorting sections with niche nomenclature, such as "The Story of Elizabeth Jennings Graham."

Tree Testing

69%
success
4m22s
median to success
52%
directness
A sitemap of the New York Transit Museum's website.

Conducting a competitive analysis of local museum's IA

Working for a museum's page, we gave importance to industry standards and created a comprehensive competitive analysis on 8 direct and 1 indirect competitors, focusing our criteria on our persona's museum visit and membership program experience. We asked: If Sarah wants to visit a history museum in New York this weekend, where would she go considering NYTM as an option? We were especially attentive to the navigation bar layout, nomenclature and information display. One of the major takeaways on the side of the membership experience was the use of accordions to display multiple levels of membership, taking the American Museum of National History as inspiration for our membership information page.

Competitors

-American Museum of Natural History
-Museum of the City of New York
-Merchant's House Museum
-Ellis Island National Museum of Immigration
-The Met
-New-York Historical Society
-9/11 Memorial & Museum
-Tenement Museum
-London Transit Museum (indirect)

A chart displaying the competitive analysis done with 8 different competing webpages.

Ideating for membership flow

We began our design phase with two user flows that concern members. With each, we determined tasks, created user flows and workshopped sketch solutions keeping in mind our key insights in our previous user studies.

User Flow 1: Becoming a Member

As a museum visitor, I want to know about the membership benefits so that I can decide if I want to become a member of NY Transit Museum

As a museum visitor, I want to sign up for a membership so that I can enjoy the benefits of being a member.

Tasks:
1. Find out what events are coming up
2. Read more about the details about the event
3. Register for the event (Add Tickets & Visitor Info)
4. Register for the event
5. Pay for the event
6. Save the ticket and event details in my calendar

The user flow for becoming a member in the new design.

User Flow #2: Member Sign Up to NYTM Events

As a member of NYTM, I want to check the calendar for upcoming events so that I can register for a members-only event.

Tasks:
1. Find out the benefits of being a member
2. Compare different levels of membership and decide which is the best.
3. Fill out membership information
4. Pay for membership

The user flow for member sign up to NYTM events.

The feature of our final prototype

Web desktop and phone images of the proposed redesign, with new menu bar and CTAs.

a) Navigation Bar: 7 primary menu items and two CTAs.

b) Membership Types:
i) Collapsible: In our competitive analysis, we found the accordion membership layout useful for displaying a wide variety of membership types.
ii) Assorting by Price: According to our user interviews, price is an important deciding point, we prioritized price as a comparison point in our accordion membership levels.

c) Raised the information about reciprocal benefits: In our user interviews, two users mentioned the idea of reciprocal benefits to other institutions is something they would love. Since the NYTM already has this affiliation, we thought it was important to highlight this benefit!

Web on desktop and phone redesign showing membership checkout process.

d) Progress Bar: In our user testing, our users found the check out process daunting, so we added a progress bar that allows visitors to see how many steps are left.

e) Overview Card: During our usability testing for the mid-fidelity prototype, we found that many users wanted information about the membership level they have selected, being assured that they selected the correct level with the benefits that fits them. In each each part of the process, you can find the  membership level name, and for the form, we included the major benefits.

Web on desktop and phone redesign showing collapsible information.

f) Collapsible Information: During our usability testing, many users were overwhelmed by the amount of information on a page. To make the page more visually welcoming, we included accordions that hide the information when it isn’t necessary. This is a fun and interactive way for the users to discover additional information.

g) Upcoming dates: Looking at the existing page, many of the events hosted by the NYTM are sold out, yet they repeat several times per month. To make it easier for users to sign up an event they are interested in, we included other possible dates on the event information page.

Web on desktop and phone redesign showing calendar with museum's events.

h) Grid and Calendar view.

i) Calendar Filters: On the calendar page, users are presented with a variety of filters containing multiple options, such as Categories, Locations, and Featured Events, that enable them to precisely locate the information they are seeking.

The feature of our final prototype

During this process I was taught the fundamentals of information architecture, presenting each week our findings to our team. It was fascinating process, and my first. Overall we received great feedback from experts in the industry, even though internally we saw room for improvement. For me, that improvement was having intention in each step, something we could only perform to a limit due to the instructions. But this inspires me to incorporate the ethos of intentionality into my work.

One of the most rewarding moments during this journey was presenting to our very happy clients. It was important for us to show both our key findings and insights that would require lower efforts to apply, and our high-fidelity prototype showing how it could possibly look with a complete redesign. Thinking in terms of an ideal in parallel to critically about the needs and capacities of the company was a challenge that I personally enjoyed.

Snapshot of presentation to client displaying zoom meeting.