Client:
New York Public Library
Service:
Web/Mobile Design
New York Public Library
Web/Mobile Design
The New York Public Library's current website is great as it is, but with my team's research and re-design the website has potential to be better. The goal of this project was to re-design NYPL's website into a more accessible, inclusive and easy to navigate resource. This project was done for one of my courses at Pratt Institute for my Masters in Information Experience Design. Browse through the case study to learn more about how my team and I tackled the existing challenges of the website!
.jpg)
January 2024 - May 2024
UX Research - Writing Survey Questions, Conducting Interviews, Designing User Personas, Usability Testing
Interface Design - Sketching, Wireframing, Protoyping
Team Members:
Isadora Oh
Stella Tang
Pujan Thaker
Figma
Miro
Google Affinity Mapping
Google Slides
New York Public Library's website has extremely high traffic as it serves free informational and educational resources for many. Unfortunately, the website is inaccessible to the many tourists and non-locals the historical landmark attracts. Non-English speakers struggle to navigate through the website and feel frustration trying to figure out the search engine when planning for their visit. How do tourists and non-locals navigate through the Library's website without feeling overwhelmed or lost in translation? If the Library's main mission is to provide free educational resources for an inclusive community, the website must enhance the website user's experience.
.png)
As the Library/Historical Landmark attract visitors from all over the world, our team added a language selection feature to help enhance our target audience's experience with the Library's website.
The search engine was previously designed with a very complex interface. To enhance the website user's experience, our team redesigned the search engine to remove the anxiety users would feel when searching through the Library's website.
After conducting user interviews, our team noticed that when tourists and non-locals plan their visit to the Library, they struggle to find key informations such as the Library's different locations, images of the locations, gift shop, etc. Our team tackled this challenge by creating a more simple navigation bar with clear communication.
New York Public Library was founded in 1895 and it is now a historical landmark as well as a library. The library has been known to be a great educational resource where students, professionals and visitors can freely access. Along with local New York residents, the library attracts tourists and visitors from all over the world. New York Public Library's main missions are to create a free space for maximum lifelong learning and a diverse community where patrons can enjoy, honor, celebrate, and engage.
For this project, my team and I conducted user research to determine pain points and designed a more accessible and inclusive website for the Library.
“The New York Public Library has provided essential access to books and information for more than a century. Today, we are building on that legacy by increasing access to our collections physically and online, and by transforming our libraries into proactive centers of education and opportunity for all New Yorkers. ”
—Tony Marx, President, The New York Public Library
This project is not in association with the New York Public Library. This project was done for coursework and was not officially shared with NYPL.
After getting our teams assigned, my team and I gathered together for our first meeting. During our first meeting, we each communicated our strengths and weaknesses. After thoughtful conversation we decided to work through every step together and learn each other's strengths and better each other's weaknesses together. We then picked our target audience and the steps we wanted to take to re-design New York Public Library's new website.
.png)
.png)
New York Public Library is a historical landmark that invites visitors from all over the world. The Library has tourists and non-locals constantly visiting NYPL's website to either plan their visit, view the different locations, shop souvenirs, etc. The main challenge my team and I decided to tackle is inclusive accessible design with a smarter search engine that allow tourists and non-locals to easily navigate through the NYPL website.
.png)
"I love architecture. New York public library is a historical site I’d never miss. I just hoped the NYPL was more accessible for non-English speakers like me."
My team and I wrote survey questions as well as an interview protocol to conduct our user interviews.
My team individually designed our own user personas using the insights we gained through the interviews.
Through collaboration with the rest of my team, we formulated an affinity map that includes all our individual findings from our interviews.
After interviewing a couple friends that have previously visited the New YorkPublic Library (who live outside of NYC), we realized that the NYPL is not as user friendly as they may seem for tourists and first-time visitors. We discovered that the search engine is actually more confusing and misleading than helpful. Another discovery we had was the information overload only available in English, which can be hard for non-English speakers to comprehend. In order to resolve these issues, we asked our interviewees what they wished were different about the website interface. As a group we came up with the following potential solutions:
.png)
.png)
.png)
.png)
Task 4 has 0% success rate, both from direct or indirect responses. It indicates that our participants are generally confused about the categories of “get help” and “reach out”. We decided to combine the two in our revised sitemap
Task 6 has a fairly high success rate of 83%, however majority of the success is from indirect path. We identified the potential issue could be that the term “membership” is misleading, so we decided to rename it to “donate”
Task 9 has a relatively low success rate of 33%. “Turn a page” could be confusing to our target users, so we have rename this to “Books/Media”
.png)
We found a lot of overlap and similarities between labels, other names were also misleading for users. Thus we decided to consolidate certain label and delete others, to have a more intuitive site map
We found that the Call to Action category names were very confusing for users and it caused many issues for them during tree testing. We decided to change them to generic and commonly used names to reduce confusion and provide clear separation between each categories
We combined the “Get help” and “reach out” categories. During tree testing, the results showed that users were confused between the two categories. As a result, the task completion rate was really low among tasks that required users to use either categories. We decided to consolidate for clarity sake
.jpg)
The study is limited by the number of participants that we could recruit and it is not the same size that can be compared with a real-life research study
Certain participants did not seem to either understand or care to complete the tree test properly. This led to poor results and can be biased
Open card sorting: participants create a total of 37 categories which could be a problem with open card sorting and we had to reduce the number significantly
The sitemap cannot satisfy all users (during interview process some mentioned adding the language selection option, but we as a team ultimately decided to add it as a separate segment)
Participants struggled with the tree testing in the initial sitemap due to unclear labeling, so we have renamed a few labels in our revised sitemap
Our first prototype’s home page was carefully designed to include all the different pages our team decided would be crucial for tourist/visitors user group.
The main task we decided our user would do is: “Mike is planning on visiting NYC and wants to take a peak at what the main branch NYPL looks like.”This task would allow us to see the user flow of visiting users when searching for images of the NYPL museums.
Prototype is designed to list out all necessary pages on the home page.
.png)
This page is located on the home page and has a dropdown of the different pages users may need when wanting to see images/floor plan of the museums
This page consists of images and virtual tours of the different museums so users can plan their visit accordingly.
While observing user test the prototype, I realized that they sometimes try to go back to where they came from. Ex. they tried to go back home after getting to the virtual tour.
User complimented that when on the PeekInside page, the text is bolded. It visually let them know that they were on the page.
User got a little confused that the “Virtual TourGallery” page was already highlighted when they clicked on “Peek Inside”.
Just for user sake, I think we could add a path from the last page back to the home page when clicked on the logo!
This is good tip to keep in mind! Visual guides that let users know what they are doing and where they are on the website.
I would recommend us not highlighting thenext path and let the user guide themselves.Since it was a prototype test, I think it wasintentional that we did that, but for the finalwe should try to not leave any incentives.
Overall I thought the first prototype we designed was super clear and straight to the point! It solves one of the many user pain points of tourists/visitors wanting to plan accordingly by peeking inside the museums virtually. There are some points we can work on for our final prototype and we will communicate our findings/recommendations with each other amongst the team!
For the final prototype, my team and I came up with three tasks in relation to our target audiences. The three tasks are listed below along with step by step instructions to follow for the final prototype.
Mike is planning on visiting NYC and wants to take a peak at what the main branch NYPL looks like.
Peek Inside -> Virtual Tour Gallery -> Home (logo icon or the NYPL text at the top)
Mike has visited the NYPL and he wants to browse the gift shop online. Where can he browse products?
Come Visit -> Shopping -> Home (logo icon or the NYPL text at the top)
Mike has a Spanish friend who heard about his great experience and wants to browse the NYPL website with limited knowledge of English. How can Mike’s friend be able to do it?
Translate Icon at the top right -> Espanol -> Home (logo icon or the NYPL text at the top)
Working with a team who understand your strengths and weaknesses is one of the biggest privileges to have while working collaboratively. Communication is key and letting your team know reasonings behind every small design/research decision will allow the team to grow and advance with the project more smoothly. Learning to make respectful comments and feedback also allows team members to grow trust amongst each other. Thankfully I had the best group of people for this project who allowed me to experience a great teamwork environment. Thank you Stella Tang and Pujan Thaker! ◡̈
