cornelllib long.png

Introduction

Students at Cornell often have a hard time finding an unoccupied seat or study space in the libraries, especially during exam season. A student could walk all the way from Dairy Bar to the engineering quad only to find out that the library they hoped to study at is already packed. Our team design a “Cornell Library App” which aims to improve students’ library experiences by providing them with information on library locations and operation hours, library space availabilities, and the services offered by the libraries. It combines all online resources distributed in different URLs and allows students to quickly access library resources. 

TEAM

Jiahao Zhou

Meredith Liu

Josh Hong

Emily Yu

MY ROLE

UI & UX designer

Research synthesis

TIMEFRAME

Fall 2019 – 3 Months

TOOLS

Figma

Balsamiq

Flinto

Part I: Research Process

User Interview

My team conducted contextual interviews with Cornell students who had the experience of studying at the on-campus library. We want to know what the context of the issue with their experience is, what their feelings about the issue are, more importantly, what the pain point of studying in the library in general.

Persona

User interviews helped us create our first persona: Alex.

persona.png
painpoint.png

My team decided to design a mobile application as an accessible and convenient platform for Cornell students, and the features and affordances of the mobile app will address the highlight of Alex's pain points.

Group 4.png

Part II: Design Process

User Flow

I first created a user flow map to visualize the necessary interactions for the app. This helped us better understand ways that the user can interact with the App.

User flow.png

Rather than having users search what they want directly from the beginning, I intend to use finding a library as an entering point (similar to finding a restaurant in "Yelp"). Since our App will have four featured functions, putting the four features on the home page or bottom navigation bar will make the information architecture more complicated since there are more than 20 libraries at the university.

Balsamiq Prototype

After determining the user flow of the App, we sketched out the first look of its UI and converted it into the Balsamiq prototype.

balsamiq.png

We put Balsamiq prototypes in front of users with the goal of finding out usability problems in the user interface and user experience design.

Insights:


1. There is no clarification on what "Other" of Loan Service may entail and the other option may be too broad of a category. 


2. The term "busyness" is rarely used in real life and hence might not be the most straightforward way to indicate seat availability.


3. Users cannot delete unwanted filters unless they redo the filter selection.


4. There is no way that the user could quickly exit to the home screen unless they tap the "back" button tons of times.


5. The term "group seats" is rarely used in real life. Also, numbers of available seats do not actually provide users valid information of where the seats are

High-Fidelity Prototype

With these challenges in mind, I revised the original prototypes and transferred them into interactive, high-fidelity prototypes.

Home Page

In the high fidelity prototype, I choose to use a card-based design that provides an aesthetics of visual satisfaction. I choose carnelian red and white as the theme color since it's the school color of Cornell.

The library that is frequently viewed by users will be on the top of the list after a certain number of visits.

Apply Filter.gif

Apply Sort 

Originally, the order of the list is sorted by the distance from the users' location from the library. The app provides users with the option of sorting the libraries in seat availability.

Since there are just two options for sorting, I decided to use a bottom popup since it's easier for users' fingers to reach out.  

Dining.gif

Seat Availability 

This screen contains information about the seat availability broken down into each floor of the library. Users can click to expand each floor tab to find out how many individual seats and group seats (such as couches and group study areas) are currently unoccupied.

 

My team decides that a visualized map would give users more credentials on whether to go to the library.

loan service.gif

Room Reservation

Tapping on the “Room Reservation” button will open a build-in web page that takes users to the online reservation system of the respective library, where users can look up the availability of the spaces and make reservations.

Home Page.png

Apply Filters 

The filter function allows users to narrow down the list of libraries with their preference

I replace the "filters" menu from a dropdown section with a modal screen. The modal screen is larger in size with a less cluttered information layout, and it asks users to focus on the filter task before continuing.


I add a bar where contains all the filters the user has selected. This helps increases system status visibility and allows users to modify selected filters more easily.

Sort By.gif

Dining

Dining is a human problem that we addressed from our user research, but not the primary one. 

My team decides to include this feature so that the user requirement of being able to choose libraries based on its nearby eateries can be fulfilled. 

I choose to use a drop-down menu to show the information on dining instead of directing users to a new screen since  I think "Dining" is a secondary feature of the product.

Seat Orininal.gif

Loaning 

Information about the equipment available for loan at this library is categorized by 5 main equipment types from Cornell Library Loan Service. Users can check the availability of the equipment, but they cannot rent the equipment by using the app.

Users are able to refresh the information since the status of the availability of equipment could change fast. 

Room Reserve.gif
Group 4.png

High-Fidelity Prototype

To know how our hi-fi prototype works out, we conducted the second- time usability tests:

Screen Shot 2020-01-20 at 12.23.49 AM.pn

Through the second usability test, we found most of our participants were having trouble checking "seating availability". The current design obviously makes the simple interactions that we anticipated more confusing.  This makes me wonder if the map was really necessary for users to view seating status. The map will only make the user flow more complicated which consumes time.

 

In this case, I redesigned the "Seat Availability" Page:

Seat Refined.gif

Some participants told us that they want to directly know how busy the floor is. Therefore, in the current redesign, users will open an information card instead of a map. The information card would contain straightforward information, such as how many seats are currently available, as well as a heat map that shows how busy a floor is from now on to the next few hours.

 

We conducted the second time user testing on the redesign seat availability card. Overall, users gave positive feedback, and they said it helped them to understand the seating status more quickly than the previous one.

In future user research, we will look at what users value and prioritize to see on the information card.

Group 4.png

The poster I designed for the poster presentation to showcase the design process and the improvement from insights

Thank You For Reading :)