CUNY-Grad-Center-Library-cover-01.jpg

CUNY Graduate Center.

CUNY Graduate Center

Re-imaging authenticity and trust for the academic world

UX Research  |  Interaction Design  |  UI Design

CUNY_image.jpg

overview

By redesigning the CUNY Graduate Center Library website, our objective was to make it user friendly within a responsive design network.
 

my role:

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.

CUNY Design Process.png

define

Current Experience:

The current experiences on desktop and mobile were not user-friendly: static, overwhelming with information.

Painpoints:

Flat Information Architecture:
Diverse Stakeholder Perspective:
Difficulty narrowing down results:
Processing of finding resources is unreliable
Events page not utilized


research:
understanding users

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

Methodology

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 Staff
The PhD/Master’s Students

User_persona_Horizontal.png
 

Competitive Analysis:

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.

IMG_6382.JPG
 

Card sorting

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.

 

Site Map

We constructed a site map from our card sorting and tree tests. 


design

Our design decisions derived from research and feedback. The previous research allows us to frame the problem and synthesize design solutions.

Wireframes

We made wireframes for the desktop and mobile version. 

Low Fi Prototype.png
 

prototyping

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.

 

Research brief

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. 

Team Buttons Research Brief.png

feedback

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.

Labels matter
Search bar causes confusion
When in doubt, look to Amazon
Mobile version is still preferred
 


iteration

Style Guide

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. 
 

Screen Shot 2018-08-23 at 12.40.38 AM.png
Screen Shot 2018-08-23 at 12.40.45 AM.png
 
Desktop HI Fi.png
 

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: