Baruch College - Newman Library

2017, I joined Baruch College as a web designer to redesign the website for Newman Library and create mockups for its mobile version.

HomePage Redesign Project Research

First, we got a clear idea about the elements we needed on the first page: Header, Footer, Global nav bar, Search bar, Ask a Librarian, Slides, Twitter feed, Computer usage, Room reservation.

Then we also got a list of elements that audiences may be interested in: Student Workshop, Course reservation, Database, history of search, Login for user account, News, Maps.

We also worked with Google Analytics and Google Tag manager to get more data about the popularity of all the pages. Based on the result, we reorganized the website to improve its user experience.

Wireframe Prototype with Balsamiq (Mobile Homepage)
home page
home page
press to zoom
Search Bar Dropdown menu
Search Bar Dropdown menu
press to zoom
main menu
main menu
press to zoom
Ask a librarian
Ask a librarian
press to zoom
HomePage Mockups (Mobile)

Based on the tradition of Baruch College, I chose to use blue as the primary color of this user interface. Compared with the first three mockups, the last one is more similar to its current website. I kept the yellow and black color set for the search bar and the buttons to keep the constant feature for the library system.

Mobile homepage 2_2x
Mobile homepage 2_2x
press to zoom
Mobile homepage 1_2x
Mobile homepage 1_2x
press to zoom
mobile-home-mockup3
mobile-home-mockup3
press to zoom
mobile-home-mockup4
mobile-home-mockup4
press to zoom
Remote Login Page and Report Page

Based on the process of login remotely and the experience. I optimized the experience and made a journey map for it.

Serial Solution Result Page Mockups