CUNY Graduate Center
Re-imaging authenticity and trust for the academic world
UX Research | Interaction Design | UI Design
By redesigning the CUNY Graduate Center Library website, our objective was to make it user friendly within a responsive design network.
As the UX/UI designer, I was responsible for conducting user research and usability testing; creating wireframes, prototypes, user flows; and implementing the style guide and user interface design.
The current experiences on desktop and mobile were not user-friendly: static, overwhelming with information.
Flat Information Architecture:
Diverse Stakeholder Perspective:
Difficulty narrowing down results:
Processing of finding resources is unreliable
Events page not utilized
Our users were students, faculty, and staff of the CUNY Grad Center Library a large population of Masters/phD students, and librarians. The aim of the initial user research was to gain insights on user vulnerabilities, pinpoint the pain points, and mark the sweet spot of current services
Questionnaires, surveys, and interviews were our main methods to understanding our users. From their feedback, we analyzed their website behaviors and mobile interactions that helped us created a user friendly environment.
User Personas comes in Threes
The Helpful Librarian
The PhD/Master’s Students
We briefly survey our competitors’ websites with similar content and functions. From the competitive analysis, we formed a few key findings:
Prioritizing Content through Post-its and Cardsorting
Our initial research allowed us to make informed decisions upon choosing the importance of content. We initially categorized the content into 6 key areas on Post-its. To strengthen our assumptions, we conducted a card-sorting study and allowed participants to organize content into categories.
We used OptimalSort as a research tool to test our assumptions. With card sorting, we allowed participants to organize content into categories. With this method, we observed and uncovered the patterns and behavior of our participants
An Opportunistic Challenge: the Mighty Search Bar
Upon our investigation, we found a unique opportunity to redesign the search bar as well. In our research, users were using the Search Bar similar to Google as one search for all, but the library’s Search bar does not function this way- It has different databases. We believe it was one of the reasons why users were not satisfied with the search results. We chose to deconstruct the Search Bar.
We constructed a site map from our card sorting and tree tests.
Our design decisions derived from research and feedback. The previous research allows us to frame the problem and synthesize design solutions.
We made wireframes for the desktop and mobile version.
After our prototype, we tested on our users to get feedback. We asked our users to test on the desktop and mobile prototypes following two tasks: 1) Request a book through the Interlibrary Loan Request and 2) Find the Chicago Manual Style Database.
Our research brief allowed us to gather further insights and investigations about our users' behaviors. With the tree study and card sorting, we revised our sitemap that accurately reflected the behaviors and needs of our users.
Our initial prototype taught us how to prioritize content and functions that were important to users. While the fundamental structure of our prototype satisfied the users, the details caused confusion and discomfort. With out major findings, we aim to correct and test our solutions in the next round.
Search bar causes confusion
When in doubt, look to Amazon
Mobile version is still preferred
I was responsible for putting together the style guide and designing the homepage. I created 3 versions of the homepage and we selected the parts that were aesthetically pleasing and that supported our findings. For this second round of prototype, we clearly labeled request functions and were careful not to used library jargon.
We followed the CUNY Grad Center's style guide and used their brand colors, brand fonts, and logos to create the prototype. Their style guide included many colors but I selected a range of few in order to avoid clutter and noise. I settled on different variations of blue, as this hue emphasized trust and stability.
Look to Amazon
We were inspired by the personal features used on Amazon.com, especially the personal greetings, saved items, browsing history, and recommended products. We wanted to utilized these features with the library services.
Final Design: Desktop
The task for the Desktop Version: Register for “Zotero on Your Laptop: The Basics” event.
You can check out the Desktop Version
Final Design: mobile
The task for the Mobile Version: Request a checked-out book from interlibrary loan.
You can check out the Mobile Version: