Project Brief

The McMaster library's 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. We had a group of 3 designers and 1 developer. My responsibilities included conducting heuristic evaluation and creating  lo-fi wireframes that include layout, content and visuals.

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 navigation​.

  • 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.

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.

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

Sitemap

Sitemap

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.

B.png

Main pages

Sub-pages: ​

  • 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

Sub-pages

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

ABOUT

I'm Collin. I am a UX Researcher at Kinaxis, a supply chain management software company based in Ottawa, Ontario. 

 

Previously, I was an Accessibility Researcher at McGill University's Accessible Computing Technology (ACT) lab, advised by Prof. Karyn Moffatt and Dr. Carolyn Pang. My research focused on designing an interactive tabletop display to support older adults in learning how to use smart devices. 

I hold a BA in Communications from University of Washington and an MS focused on Human Computer Interaction from McGill University. I am passionate about studying, designing, and building new technologies that can better accommodate a diversity of needs.

CONTACT

I am always looking for new and exciting opportunities. If you enjoyed looking through my work and would like to know more about me, please contact me!

Email: zhiqin.wang@mail.mcgill.ca

Phone: +1.613.700.5491

​2020 Collin Wang