Redesign for Success: Developing a Student-Centered Website

1. Redesign for Success: Developing a Student-Centered Website Gina Garber, Digital Services Librarian Michael Hooper, Electronic Services Librarian

2. Program Outline • Background • Analysis • Conceptual Design • Prototypes • Production • Launch • Maintenance • Questions

3. Background Factors that indicated change was necessary: • Original web administrator resigned • Students wanted a change • Poor usability of materials and resources • Too much information on the homepage • No website policy and procedures

4. Background No one was maintaining the website Example 1: Library Test Collection Example 2: Gift Policy Example 3: Humanities 1010 Instruction

5. Background • School of Business - Marketing 4310 • Dr. Carmen C. Reagan • Business Approach • Students developed five advertising strategies for the library (red folders) 10-20 pages each • Marketing Objectives • Relationship of Advertising to Library Usage • Consumer Benefits • Marketing Plan • Implications of Market Research • Communications Media and More…

6. Background Students wanted a change “Homepage is too wordy” “Drop down boxes semi-confusing – do differently” “More color” “Add icons” “Organize databases for easier access” “Make it more user friendly”

7. Background Poor usability of materials and resources Example 1: Library Reserves Example 2: Database Access

8. Background Too much text on the Library homepage Example 1: Library Homepage(original design) Example 2: Library Homepage(mini redesign A) Example 3: Library Homepage(mini redesign B)

9. Background No website policy and procedures

10. Analysis • Identify Users • Identify Users’ Needs • Identify Web Administrators’ Limitations • Identify Library’s Limitations • Auditing Web Pages

11. Programming Needs • Microsoft FrontPage • Microsoft Active Server Pages • Cascading Style Sheets • JavaScript • PHP • Dynamic Navigation (global navigation)

12. Conceptual Design • Beginning the Creative Process • Defining Smart Design • Reviewing Website Goals • Developing Concepts • Presenting Designs and Gathering Feedback Goto, K., & Cotler, E. (2002). Web Redesign: Workflow that Works. Indianapolis, IN: New Riders.

13. Visual Design • Focused on a relief sculpture that hangs in the stairwell entrance between the 2nd and 3rd floor (associated with the library) • Explored color schemes • Explored design options on paper • Explored other academic library sites • Reviewed site goals • Advertise Exhibits and New Services

14. Design Graphics • Adobe Creative Suite Premium Photoshop

15. Design Template

16. Old Library Homepage Felix G. Woodward Library

17. New Library Homepage Felix G. Woodward Library

18. Prototype (Protosite) • Prototype: first full-scale and usually functional form of a new type or design of a construction • “we recommend building a Protosite, also called an HTML click-thru” Merriam-Webster Online Dictionary Goto, K., & Cotler, E. (2002). Web Redesign: Workflow that Works. Indianapolis, IN: New Riders.

19. Why Create a Prototype? • To test design feasibility (did the designers have the required technical knowledge?) • To determine if the website could be represented properly in HTML format • To seek feedback from relevant members of the university community (especially students)

20. Prototype Development • Used FrontPage to create web pages and organize website • Took photographs and created graphics • Located scripts and modified code for rotating images, mouse rollovers, and the catalog search box • Used trial version of menu software to create main navigational menu

21. Locating scripts & code • Library search box: Sheridan Libraries (John Hopkins) • Image (webpage) rotation: free script from Automatic Labs (website now unavailable) –requires PHP • Image mouseover JavaScript: W3 Schools • Main navigational menu: Free Trial download for Open Cube’s Visual Infinite Menus

22. Prototype Review • Prototype reviewed by the university website designer (member of public relations department) • Meeting to discuss prototype with Library faculty, staff, and student workers • Focus Group consisting of APSU students

23. Focus Group Questions • Name one of our frequently used databases. • Access your library account. • Who is the subject specialist or library liaison for the Music Department? • How would you contact a specific member of the Library verses asking a librarian a question? • How do you look up information regarding government publications? • How quickly can you find your information? • Is the information logically organized? If no, what needs to be changed? • Compared to the old interface, is the new interface easier for you to find information? If no, what needs to be changed? • Are you satisfied with the new Web site design? • Do you have recommendations for improvements? • What do you like and do not like? • What else you would like to see on the Web site?

24. Prototype Feedback • Students provided feedback regarding colors, screen resolution, and desired content: Screen Resolution Test • APSU web designer provided a graphic with an official university logo • Staff made recommendations concerning priority of menu items, categorization of items under main menu, and the label for the library catalog.

25. Prototype Recognition

26. Production • Modifications made to prototypes based on feedback • Purchased software used to create main menu (Open Cube’s Visual Infinite Menus) • Resolved differences in prototype appearance among various browsers • Created template for new internal web pages and modified existing pages to match

27. Production • Weeding of outdated and unused items • Transfer of new and existing HTML files to new web server • Check for functionality (modifications to ASP forms and other scripts were necessary) • Validate code using W3C Markup Validation Service located at http://validator.w3.org/

28. Launch “Introducing users to a redesigned website can require some preparation of expectations. Users may not know what to do when they are suddenly confronted with a new look or navigation structure. Therefore, you should communicate any planned changes to users ahead of time” U.S. Department of Health & Human Services. (2006). Research-Based Web Design and Usability Guidelines.  Washington D.C.: U.S. Dept. of Health and Human Services. Retrieved January 15, 2007, from http://www.usability.gov/pdfs/guidelines.html.

29. Launch Advertisements • Ad placed on existing homepage several weeks before launch: • Advertisement made on the university’s e-mail announcement system after launch • Information sessions held for APSU faculty members at start of Fall Semester New Library Website Coming Soon!Ad location on old homepage

30. Launch Procedures • Activated new web server containing modified HTML files (no classes in session) • Alias domain name was created and set for target URL (homepage) on new server • Testing for appearance and functionality was done on various browsers and screen resolutions • Depending on the user’s ISP provider, the new site may not appear until their cache has expired

31. Maintenance • Created Website Policy to designate maintenance responsibilities • Created Procedures for New or Substantially Revised Web Pages to regulate new additions to the website and help maintain integrity. • Provided template for creation of new web pages • Periodically check for broken links and outdated content

32. Maintenance Announcements

33. Future Development • Investigate website analysis software • Provide a blog to announce new services and policy changes (Ex: Electronic Resources @ APSU Blog) • Investigate link-checking software to discover broken links • University may move to a new content management system (not compatible with Front Page)

34. References Ball, J., Roby, J., Senica, V. & Staggs, B. (2006). Advertising Plan for the Felix G. Woodward Library. Clarksville, TN: Austin Peay State University - Marketing 4310. Bean, T., Davis, K., Jones, B., & Meisch, R. (2006). Use Your Peay Perks and See How the Library Works. Clarksville, TN: Austin Peay State University - Marketing 4310. Bellinaso, M., & Hoffman, K. (2003). ASP.NET Website Programming: Problem, Design, Solution. Indianapolis, IN: Wiley & Sons, Inc. Bishop, B. (1998). Strategic Marketing for the Digital Age (pp. 13-29). Toronto, Canada: HarperCollins Canada. Byers, J., Flournoy, J., Jerrim, C., & Rascoe, T. (2006). Advertising Proposal for APSU Woodward Library. Clarksville, TN: Austin Peay State University - Marketing 4310. Chumbley, J., Ham, T., Harriman, J., Harris, M., & Henson, K. (2006). Advertising Plan for APSU Library. Clarksville, TN: Austin Peay State University - Marketing 4310. DeBolt, V. (2005). Integrated HTML and CSS: A Smarter, Faster Way to Learn. San Francisco, CA: Sybex Books. Dudas, M., Blair, R., Savage, B., & Kelly-Rich, M. (2006). APSU Library Advertising Strategy. Clarksville, TN: Austin Peay State University - Marketing 4310. Felix G. Woodward Library. (2007). Retrieved April 11, 2007, from http://library.apsu.edu Goto, K., & Cotler, E. (2002). Web ReDesign Workflow that Works. Indianapolis, IN: New Riders Publishing. Information Network Applications. (2007). Retrieved April 11, 2007, from http://www.sis.utk.edu/courses Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity (pp. 16-261). New York: New Riders Publishing. Opencube: The Menu Company. (2006). Retrieved January 15, 2007, from http://www.opencube.com/index.html U.S. Department of Health & Human Services. (2006). Research-Based Web Design and Usability Guidelines.  Washington D.C.: U.S. Dept. of Health and Human Services. Retrieved January 15, 2007, from http://www.usability.gov/pdfs/guidelines.html W3C Markup Validation Service V 0.7.4 (2007). Retrieved April 11, 2007, from http://validator.w3.org

35. Questions? Thank You!