路嘉锋/Jiafeng Lu
Redesign Information Architecture New York Transit Museum
The New York Transit Museum was founded in 1976 and is dedicated to telling and preserving the stories of mass transportation in New York City. The website is informative but hasn’t been compiled logically. Our team of four leveraged research insights to redesign the website for a more convenient website navigation and ticket purchase experience. We constructed a new information architecture and medium-fidelity prototypes for the homepage, ticket buying, group visit, and research page.
Client:
New York Transit Museum
Tools:
Optimal Workshop, Figma
Team:
Cassandra Cyphers, Nivedita Thakurdesai, Trisha Khandelwal, Jiafeng Lu
Date:
Jan-May 2023

Research & Analysis:
user interview, empathy map, persona, card sorting, tree testing, competitive analysis, prototype testing

Design:
information architecture map, Figma prototypes, medium prototypes of tickets, events, visit, and homepage.

Goals
Restructure the website to facilitate easy navigation.
-
Support visit planning
-
Smoother experience of purchasing a ticket for admission.
User Research
Sample size: 8 interviewees (Target people who are passionate about visiting museums)
After gathering information from 8 visitor interviews, we used affinity mapping to categorize all the information and gain insights from our research. Categorizing them to five major categories and made a summary of each group. (*a link is embedded within the image for detailed reference)
Key insights
-
Visitors plan their museum visit within a few days or even hours of their visit.
-
Visitors appreciate being able to purchase tickets online before their visit
-
They are comfortable using both desktop and mobile devices but may lean more heavily on mobile if planning and purchasing tickets on the go.
-
They want to preview exhibitions and events happening the day they plan to visit the museum.
Persona
This persona reflects a museum passionist's routine of going to a museum.

Competitive Analysis
To compare NYTM with other musuems
-
We conducted a competitive analysis of 8 direct and 2 indirect competitors for the New York Transit Museum (NYTM) to inform our design for the NYTM website.
-
In light of our user persona’s interest in educational and specialty local attractions (e.g. world-famous museums or unique pop-up events), we selected these 10 competitors as alternatives that our user persona would be interested in casually visiting during their free time.
-
We decided to evaluate each website’s homepage, navigation, visit page, exhibits/collection page, programs/events page, and ticket buying process and rated each dimension on a 3-point scale, with 1 equating to poor and 3 equating to excellent in a dimension.


Insights and What to be Expected from Analysis
-
Balanced white space and thoughtful use of color
-
Effective visual hierarchy to guide the user’s eye down the page
-
Self-explanatory and distinct navigation labels
-
Specific call-to-action buttons are prominently placed
-
Efficient ticket purchasing process.
Site Map Revision
My team members and I conducted 4 moderated and 4 unmoderated card sorting studies to analyze the existing information architecture of the New York Transit Museum’s website. Utilizing the results from 8 participants, we drafted an improved version of IA, then we assessed the new IA using a tree-testing study. 8 participants were involved in the study as well, 4 in an unmoderated and asynchronous setting and 4 in a moderated setting. We analyzed the results from tree tests, to further redesign and refine our information architecture.
CARD SORTING
For our card sorting study, we designed 33 cards, which were taken directly from dropdowns of the top-level navigation of the NYTM’s website. We eliminated some unclarified tabs and renamed some tabs which are repetitive. The 8 participants were given background information about the exercise and asked to group the tabs into categories. The majority of our participants created between 5-6 categories.

We used the similarity matrix to sort card for each category.
Then we put the cards with the most votes to the tree testing.
Information Architecture after Card Sorting

Tree testing
We developed 10 tasks for the tree testing with the aim to ensure accurate navigation for primary and secondary tabs.
The tree test had 8 participants, with 4 unmoderated and 4 moderated. Participants are requested complete tasks with the intention of investigating if our first redesigned IA map created confusion.

Almost all users continued down an incorrect Level 2 path. Once they reached a dead-end on Level 3, some realized they were not in the right place and backtracked,it was not clear to a majority of users which Level 2 and Level 3 category would include a one-time event for adults (“Adult Educational Programs”)

This path diagram shows that there was no particular failure pattern. Users went through almost every Level 1 category, from which we conclude that they may not have understood the meaning of the term “Access Programs.” Users did not recognize “Access Programs” as the location of information for people with cognitive disabilities.

Most users chose the correct Level 1 category but were unsure about the correct Level 2 category, indicating that this category may need to be changed. Half (50%) of users were not able to connect the task about the development of the subway map with the Subway Map category.
.

Users were unsure whether email newsletter subscription information could be found under the Level 1 categories “Membership,” “Events & Educational Programs,” or “About Us.” Users did not expect to find a place to sign up to hear about upcoming events and new exhibitions (“Email Newsletter Subscription”) under the “About Us” Level 2 category.
Revised Information Architecture after Tree testing

Wireframing& Prototyping
Coming to wireframing and prototyping, we forwarded toward the direction of ordering our content on those pages. Our design process began with brainstorming, sketching, and creating interactive low-to-medium fidelity prototypes on Figma. For both desktop and mobile versions. My focus will be on the mobile version and ticket purchase task.
Two tasks were supported by developing our prototypes
-
Purchasing a ticket
-
Finding information and registering for events







USER TESTING
After we created our first task' wireframe and prototype, we conducted a user test.
Moderated user tests were conducted on our interactive prototypes. 5 users participated and we took notes while testing.
Overall. 3 usability problems and provided solutions respectively for our later medium-fidelity prototype design.
1. Too less information on the cart, checkout, and payment page.
Solution: Consolidate three pages to two-page or one page.
2. Confirmation page without any email sent a notification and downloading guides.
Solution: Adding email sent section, and making PDF and QR code part with a pop up window.
3. Calendar view without function to filter by dates and specific available times tabs by constant time periods.
Solution: Adding this function ensures users have a clear view and sense to choose the specific time they plant to visit and prevent confusion.
Revised Mid-Fi Prototype
After revising mid-fidelity prototypes, we made some improvements based on user testing. Moreover. standardized fonts, text-indent, size, and icons are implemented as well. We also redesigned the visual layout to better fit the information.

1.We combined the checkout and payment information together on the same page for users to quickly fill essential information.According to users' feedback, we add a floating card that showing detailed information of ticket dates, time, type and price for users' instant perception.



2. We also added a pop up window for QR code and made QR code section interactive for instant ticket save action. Moreover, as requested, we added more instructions that inform our user they have made a successful purchase with separating confirmation email card with ticket details card.

3. We redesigned the date and calendar selection, making the calendar a pop-up view, with the nearest date such as "today", and "tomorrow" to better match our persona.(for whom want quicky a get a ticket for near dates or a random visit.)
For the time section, we divided time equally with half an hour in cards view instead of the dropdown menu, and two hover states when the user moves the mouse to it and actually selects it. The hover state applies to ticket type selection as well.

More Prototypes to be viewed for Task 1 and Task 2
The prototypes above are associated with Task 1: Ticket purchasing.
For more reference on both Task 1 and Task 2.
Final Thoughts and Conclusion
My first information architecture design project, an insightful experience for my future design journey. I was inspired by the part of card sorting, tree testing, competitive analysis and user research as those gave me a clear logical flow of how to portray audience images and target them precisely. I enjoyed the part of conducting qualitative and quantitative analysis of UX in general.
In addition, communication is key to efficient work, deal with emotions should be prioritized is one valuable insight to me as design ideas differences occur a lot. I was dedicated to managing teammates' expectations and emotions, always staying responsive and active to keep the whole project aligned.
