Project Brief
McMaster University Library

 

The website shoulders the duties of achieving organizational goals and serving its users. However, the site had several issues that prevented itself from fulfilling the tasks. This redesign project aimed to solve those problems and to enhance the overall user experience with the website. For this project, we had a group of 4 people (En, Jessica, Meng, and Collin). My role was to find some major usability problems and create wireframes and sitemap that include layout, content and visuals.

Goals: ​

  • Support teaching and learning with its resources, services, and facilities.

  • Support research with its resources, services, and facilities.

  • Improve access to various resources (increase discoverability).

  • Enhance and promote unique collections.

  • Build and maintain strong relationships with the community.

Background

Target Audience:

  • 26,780 undergraduate & 4,485 graduate students, 9.7% are international.

  • 932 professors & 17 lecturers, 78.5% from North America.

  • General Public: welcome but with $60 annual fee and limited use of library resources.

 

Website Problems: ​

  • Home Button: Inconspicuous and not in the conventional top-left position​.

  • Global Navigation: Labels are not well chosen, subsections  are not well categorized.

  • Local Navigation: Not easy to differentiate from content text and do not have local navigations​.

  • Layout: Header & footer is sparse, margins are hard to identify, and pages look crowded​.

  • Account Login: Login not in conventional top-right position.

  • Poor Image Quality: Images are unattractive, unprofessional and some logos with weird background.

  • Graphic Design: Inconsistent background color, big and ugly fonts.

  • Missing Content: Address and contact info of library not on homepage.

Information Architecture  

Before the redesign, we did an inventory of the current site by examining and recording all the content and groupings of content. Repeated and missing content, as well as problematic categorization and misleading labels were handled with special attention. 

Sitemap: ​

  • Content items are re-categorized in global navigation, primarily based on user tasks

  • Labels are changed to be more self-evident or self-explanatory, and used consistently

  • Popular user actions, like “ask a librarian”, “login to account”, etc. are grouped together

Main Pages: ​

  • Groups of items are relocated to conventional places

  • More space is given to search box and links to guides, which are most needed by users

  • News and events are downsized and put in the conventional right side, below hours

  • Overall cleaner and more professional look, more white space and clearer boundaries

  • The same header including global navigation and footer are used in all portal and inside pages for a consistent experience.

  • Local navigation is added to sidebar.

  • Links to inner pages

  • Applications are better categorized with short descriptions for each page and application.

Sitemap

Sitemap

B.png

Main pages

Subpages: ​

  • Local navigation is also added for inside pages with long content. Textual content is chunked, and visualization tools like headings, lists, and tables are utilized when appropriate.

  • A special type of inside pages is application, such as “Ask a Librarian” and “Catalogue”. The current website uses totally different visual design for application pages. Users usually feel an abrupt change when opening an application page.

  • Therefore, we propose to use consistent header and footer in pages for most small applications, with the side bar removed to leave more space for the applications.

C.png

Subpages

Homepage Prototype:

  • Colors, Fonts, Images

  • More accurate sizes of visual elements

  • More accurate placements of visual elements

  • Drop-down menu, Tabs, Interactive effects of links and buttons, etc.

Comparison:

Better User Experience 

  • Consistent interface and clear conceptual structure

  • Better fit users mental model and logical visual layout

Simple Operation 

  • Wireframes targeted for different types of pages

​High Efficiency

  • Frequently used items are grouped together and put to conventional places

  • Malfunctional content is fixed and useless content is removed

Old Homepage

finalmac.png

New Homepage

Screen Shot 2019-05-21 at 4.04.36 AM.png
Screen Shot 2019-05-21 at 4.05.29 AM.png

​2019 Collin Wang