Website Redesign Proposal Benchmarks Roadmap

1. Library Homepage
Updates
Shanae Ullman
UX Strategist
University Library

2. Agenda
 UX Principles for project
 Review References
 Share ideas about Library Navigation Styles
 Q&A

3. UX Principles for Project

4. What?
Increase Discoverability for Students + Faculty + Staff
 Navigation for Library specific pages in header and footer.
 Increase catalog search opportunities.
 Multiple paths to access links.
 Bring visibility to important links with visual interest. (Ex. hours,
location, schedule reference appointment)
 Contextual help for the new student, faculty, staff member.
Discoverability

5. What?
Increase Self-Service for Students + Faculty + Staff
 Intuitive ways to request reference support.
 Intuitive ways to request course materials for purchase.
(Faculty/Staff)
 Intuitive search of the library catalogs.
 Contextual help.
 Good defaults.
 Do no harm. Do not remove any functionality.
Self-Service

6. What?
IndustryWeb Standards
• ConsultApple Guidelines.
• Consult Google Material Design.
• Full width layout.
• Responsive, mobile friendly.
• Familiar and consistent interaction design patterns to reduce
cognitive load.
• Taxonomy - Familiar, colloquial language.
Industry Web Standards

7. Ease of Use
• Consolidate actions.
• Reveal details on demand.
• Good defaults.
• Navigation with <8 items.
• Search field default text.
• Contextual help.
• Collect feedback about the website.
Ease of Use

8. References

9. Why?
Competitor Analysis
 Private colleges/universities
 Library website
 Total Enrollment 10,000 – 20,000
References

10. Why?
Summary of Findings
• Unique navigation specific to Library
• Cross-reference links in multiple locations in header navigation
• Icon or text link to main university website.
• Give to Library button in footer.
• Information architecture focuses on students, faculty, staff who
need to find resources and help.
• Use of familiar and colloquial terms in navigation.
• Mega footer used in addition to primary header navigation.
• Quick links in body of page
• Common navigation terms for library websites.
• Common placement of UI elements in library websites.
• Full report: Click here
References

11. Saint LouisUniversity
http://lib.slu.edu/
Private Institution
2017Total Enrollment 12,280
St. Louis, MO

12. Saint Louis
University
Features
 Library navigation in header and footer.
 Hover on main-navigation to reveal sub-navigation.
 Uses an icon indicator for sub-menu.
 Services – specifies by student type (high school!), faculty, staff
 Does not use main SLU navigation.
 Text link to SLU Home.
 Uses LibGuides.
http://lib.slu.edu/

15. WebsterUniversity
http://library.webster.edu/
Private Institution
2017Total Enrollment 14,053
Webster Groves, MO

16. Webster
University
Features
• Mega menu.
• Hover on main-navigation to reveal sub-navigation.
• Does not use an icon indicator for sub-menu.
• Services – separates information for faculty, alumni, international
• Does not use mainWU navigation.
• Text link toWU Home.
• Bootstrap website.
• Uses LibGuides.
http://library.webster.edu/

20. LoyolaUniversity
Chicago
http://libraries.luc.edu/
Private Institution
2017Total Enrollment 16,422
Chicago, IL

21. Loyola
University
Chicago
Features
• Mega menu.
• Hover on main-navigation to reveal sub-navigation.
• Uses an icon indicator for sub-menu.
• Services – does not separate by faculty, staff, student type.
• Does not use main Loyola navigation.
• Image link to Loyola Home.
• Drupal website.
• Uses LibGuides.
http://libraries.luc.edu/

24. BostonCollege
https://library.bc.edu/
Private Institution
2017Total Enrollment 13,851
Chestnut Hill, MA

25. BostonCollege
Features
• Mega menu.
• Click on main-navigation to reveal sub-navigation.
• Does not use icon indicator for sub-menu.
• Services – separates by faculty, staff, student type.
• Does not use main BC navigation.
• Text link to BU Home.
• Continuous scroll.
• Bootstrap website.
• Uses LibGuides.
https://library.bc.edu/

34. Proposal:
Library Navigation Styles

35. Proposal
Proposal for LibraryWebsite
 Unique and specific Library Navigation in header.
 Sticky header follows with scroll.
 Give to Library button in footer.
 Mega footer used in addition to primary header navigation.
 Layout for body of page that includes updated images and text.
 Update content on library pages.

36. Library navigation
within hero image
Footer - Library
navigation, contact,
social media, giving

37. Library navigation
below hero image
Footer - Library
navigation, contact,
social media, giving

38. Footer - Library
navigation, contact,
social media, giving
Library navigation
vertical, to the left, of
hero image

39. Questions?

40. Appendix

41. Proposal:
Library Site Map

42. Full screen: http://127.0.0.1:32767/start.html#p=site_map&g=1&c=1

43. Timeline
• Phase 1 – Homepage update
• Phase 2 – Update subpages

44. Resources
• UX Research and Requirements – Shanae (Library UX)
• UX DesignWireframes and Iterations – Shanae (Library UX)
• Feedback – Library and MarketingTeams
• UXTesting – Shanae (Library UX)
• Update content – MarketingTeam
• Front End Development – MarketingTeam
• Back End Development and QualityTesting – MarketingTeam
• LibraryWebsiteText/Image Maintenance – Shanae (Library UX)

45. Links
Competitor Analysis
 Navigation Benchmarks
 Enrollment numbers from US News Education Report