Vous êtes sur la page 1sur 26

Table of Contents

01 02 03 Presentation Project Overview Primary Design Process - Research - Brainstorming - Sketching Final Design Process - Research - Specification - Brainstorming - Sketches Prototype Design - Lo-fi Prototype - Hi-fi Prototype Testing - Lo-fi Testing - Hi-fi Testing Final Product





Home Page:
Large search bar, for better search experience. Different search bars for databases, journals, guides, and world cat vailable. Position of the search bar can be changed accoring to users desire. Movabale 24/7 live chat with a librarian available. Everything could be accessed right from the home page. Important items are visible, less important can be accessed by hovering over navigations.

Home Page (Search Options):

This page is similar to the home page, the search bar has a drop down menu which will list all the category users want to search for. Users can access worldcat site from here as well. Also at the top you can see the name of the person logged in instead of the log in button. When a person logs in his name is displayed in place of the login button.

Advanced search:
Using AJAX to open the advanded search options on the same page instead of navigating to new page. Users can select any fields, for example, title of the book, name of the author etc. Users can type in the exact lines from a book or any media or some part of it too search that particular section. Users can select the subject, item type, date and language to get specific results. Users can decided how many results they want to see per page so that they wont have to hit next over and over again. Users can also select to search external libraries as well.

Service Menu:
Service menu lists all the services provided by a the library. Borrowing section lists all the links to borrow, renew, and rent book, media or other electronic media. Technology section lists all the links to rent technology rooms like media labs, and other services like printing, and scaning. Graduate services lists the links to helps graduate students Faculty sections lists the important links for the faculty.

Research Menu:
It has two part Research Guides, and Research Tools Research Guides has all the necessary guides thatll help student to find the appropriate amount of research. Users can make appointments with a librarian to get help on research. Theres also a How-to Guide which will help users learn how to use the guides available. Research tools have external libraries like the WorldCat, and the RefWorks. It also has a citation linker which will take them to a page where they generate citation for any material.

Help Menu:
The help menu lists all the help options for the users It has three sections, the first one is the direct help from a librarian via emails, chats etc. The second option is the link for tutorials, which will help the first time users to use the website properly. The other section lists the links for disability services, and emergency services.

Quick Links:
Quick Links lists all the links thatll help users to navigate around university websites, and find extra informations. Itll help users to get back to blackboard, and emails without having to hit the back button. It also has the informations about employments. Users can use quick links to go to the worldCat site directly. Users can go to my library from the quick links. Users can also make appointments, and reserve study rooms from the quick links.

Search Result:
This is the page users will get when they hit the search button after entering the search string. It lists all the possible searches found from the search strings, and options used. On the left side it shows all the different categories of items available. Users can use select options to reduce the number of search results. Users can sort the search results by relevance, auther, date etc. An icon on the left of the name of the item will let user know the type of the item. On the far right side a color co-ordination of green pink and red is used to let the user know of the availability.

Search Result Expanded:

AJAX used to expand the search result on the same page so that the users can decide if they want to see further details. Users can save the item to My Library to use the research in the future, and they can carry on with the research.

Search Result Details:

This page appears when users click the title of the search result. This gives the detailed descriptions of the material along with all the links associated with it. Users can save the research to My Library from this page as well. A map on the bottom left will let the users know where to find the material. Also users can email or text the item to themselves or friends to help others with research.

My Library Page:
This is the profile page of a user. Users need to login to access this section. Users can add, edit, and delete projects. They research added from the search page will land to the specific project they saved it to. They due date is displayed on the right which will turn red when the due date is near. The cite option will cite that particular book, or article without any further hassle. User can sort their project by name or date, they can move the order any way they want.

Project Overview
The main objective of this project was to identify a library website, and solve the usability problems in that website.

Design Process
Home Page Home Page Research

A demonstrated ability to give organization and structure to complex information based on research and user testing. Then comprehensively document and summarize the process verbally and in writing.

Process Steps:
Research: conduct and document a visual survey of libraries and library websites with photographs, screen grabs, scans, and/or sketching. Begin to develop personas by interviewing students from your assigned discipline. Begin developing information architecture, create cards and conduct card sorting research. Develop information hierarchy options. Complete and post personas for one library user. Continue research into library sites, focus on information architecture. Research online searching. Wire frame, create a wire frame for each unique layout discovered in your visual audit. Present and discuss scenario test results make appropriate adjustments to designs.

Design Process
Home Page Research

Design Process
Search Result Research

Design Process
Search Result Research

Design Process
Advanced Search Research

Design Process
Participant 1:
How often site use? Once a sem at least, 10-20 times a sem or more depends upon the classes, and number of papers What is Library Website for? Basically to find books, research databases, request a book. What would you change ? Why? Make the search better, make it like Google. I dont like to click links after links, and I wish it would site everything for me. What works? It has a big database. What doesnt work? Too many things cluttered in one page. What are they accessing? Databases, depends upon what I need. Demographic info St. Louis, MO English major, Honors. Year in college, grad school? Junior, I will work for few years first. What doesnt work? Never figured out how to use citation. What are they accessing? Worldcat site, and databases mostly. Demographic info Boise,ID English major, minor in graphic design Transfer student, assioates from boise state Year in college, grad school? Senior, no grad school plan right now. Looking for internship.

Design Process

Participant 3:
How often site use? Depends upon the classes. 10-15 times a semester. What is Library Website for? Research, book checkouts. What would you change ? Why? Clear the home page, search engine make it work better. What works? Once you know how to use it, its not very difficult. What doesnt work? I have to go through a lot of pages to get to the material I want. What are they accessing? RefWorks, Search, Database, Worldcat. Demographic info Hammond,LA English major, Honors Year in college, grad school? Senior, Looking for internship.

Participant 2:
How often site use? Few times a semester, 10 to 20 times, depends upon the classes Im taking, and number of papers. What is Library Website for? Mostly to find references for papers, journals, and articles, and databases. What would you change ? Why? Physical access easier, make it easier to search, make a separate account, separate tab, world cat not very helpful, mackay search not very helpful. What works? Things separated in groups according to their type.

Design Process
Mind Mapping

Design Process
Home Page Primary Sketches

Design Process
Search Result Primary Sketches

Design Process
Concepts Exploration

Executive Summary & Criteria
USER PERSONA Executive Summary:
Helping students write papers easily, by providing easy access to all the materials in the library.

Persona & Scenarios

Priority 1: 1. Novice users will be able to make searches, and locate results. 2. Advanced users will be able to use My Library, and access all other features like other search engines. 3. Users will be able to locate cite linker, and citation is made easier. 4. Navigation made easier. Priority 2: 1. Advanced users will be able to use advanced search as per their requirements. 2. Access to university website made easier. Priority 3: 1. Users will be able to use informations from all the navigations. 2. Users will use chat often to get help.


Mallory Schlegemilch 23 Rexburg, Idaho English Senior Brigham Young University - Idaho

The main objective behind the re-design of this website is to solve all the existing usability problems in the website. The new website will be easier to use for the first time users, as well as someone who knows how to use it. Only the most important features of the website vill be visible on the home screen. Other important links will be hidden in the navigation bar. Users can look at all the links before entering the page. This will save time for the first time users, as they dont need to click into every links to see whats in that particular link. Also a quick link tab will provide easy access to the University websites, as well as secondary important links. Users will be able to make search for different types of data right from the home page. For example, database, journals, course guide, all will have their on search bars right on the home page. They can also access all of those from the drop down menu on the main search bar. The navigation, and search will be found in every page of the website. This makes it easier to make searches as they dont have to go back to the home page over, and over again. Additionally, the advanced search link will bring out all the option on the same page instead of redirecting to a new page. This will save time, and users dont have to go back, and forth from the home page if they want to go back. Another major feature added to the website is the My Library page. This is a profile page for the users. They can save all of their researches in this page. They can add, and delete projects, and cite the materials right form that page without even having to open another page. This page will also notify them the due dates for their projects.

Education: Currently enrolled in an undergraduate English program with an emphasis on Professional writing. Also has clusters in graphic design, and web design. Technology Skill Level: Novice, Average, Advanced, Expert Devices Used: Andriod phone Computers (Mac and PC) iPad Technical Skills: Knows how to use features that she needs to use regularly, but is not very good at solving new technical problems. Eager to learn new technology, and their features.

Student Description: Mallory is an English major with an emphasis on Professional writing. She has interest in writing, and editing articles for magazines, and newspapers. Shes also interested in designing articles, and magazines so she has clusters in Graphic design, and Web design. Paper Research: Every semester she has to write numerous papers, and for those papers she has to collect a lot of references supporting her arguements. She usually collects data from the universitys library websites. She visits the website atleast 10 to 20 times per semester. Key Goals: She likes to find data easily on the website with an input of good search string. She doesnt want to dig into links after links within the website. Also shed like to copy/paste the ciation directly from the website for the article shes quoting. Challenges: The search results arent efficient enough to display the result like she wants. Citations for the articles are available, but shes not happy with what they have right now. Also the website is cramped with a lot of links that shes never used.

Scenario 1: Mallory is trying to write a paper for one of her English classes. She has to have at least 20 references from outside source in her paper. Its friday, and she has a date in 2 hours. She doesnt have time to read or make notes of the references. She just wants to save a list of the research materials she liked, and she wants to use it later. Scenario 2: Mallory spent all week with friends, and on Facebook. She has already procrastinated to the maximum level. Her paper is due in half hour, and shes already completed it. However she hasnt even started her citation. She thought she could just copy/paste the citations from the library website. She goes to the website, and looks for it, after digging different links she finally finds a citation for the article she was using,

but it wasnt in the form she wanted. Also the links to citation was buried into many other links. She wished she could find it in one click. Scenario 3: Mallory is writing a paper on drunk driving. She is looking for a specific book, and she wants to find it my typing it in the search engine. However when she types the search string, the result is not satisfactory. She didnt get what she was looking for. Also there was no way to figure out if it was handbook, ebook, audio book, or a video. She had to go through a lot of links to find out the location of the book, yet it didnt say what kind of media it was.

Design Process
Detailed Brainstorming

Design Process
Login Quick Links




My Library


Link 1 Link 2 Link 3 Link 4 Link 1 Link 2 Link 3 Link 4 Link 1 Link 2 Link 3 Link 4

Database Journals WorldCat

Dropdown1 Dropdown1 Dropdown1

Some Text Some Text Some Text

Language Date


Include external libraries.

Design Process
Lo-fi Prototype
This is the lo-fi digital comp I used to do the first testing. I designed these pages to solve the usability problems. My major inspirations were the library of BYU, library of the Boston University, and California State University, Fresno. I tried to minimize details as much as possible. All of my test participants complained about the search options, so thats the main focus of my website.

Design Process

Checkbox Selected checkbox Checkbox


Available Extra stuff

Checkbox Selected checkbox Checkbox

Checkbox Selected checkbox Checkbox

Results Project 1 Lorem ipsum dolor sit amet, maiores ornare ac fermentum, imperdiet ut vivamus a, nam lectus at nunc. Quam euismod sem, semper ut potenti Add New Delete Due Date

Name Major Courses

Hi-fi Protype of the Home Page

Testing I
Lo-fi Prototype Testing
This is the first testing of the website. Its just starting to take shape, and I wanted to know if I was heading towards the right path. The test participants were the same people I interviewed at the beginning of the design process. Participant 1: 22 years old. Single. Has be been using library website for three years now. Writing Center Tutor. English major. Uses smart phone. Participant 2: 24 years old. Single Has be been using library website for past eight semesters. English major. Uses smart phone. Participant 3: 24 years old. Single. Has be been using library website for three years. English major. Uses smart phone.

1. 2. 3. 4. 5. 6.

All the participants wanted the navigation to be more prominent. Participants wished the use the advanced search button. Show the availability of all the displayed results. Show more descriptions on the search results. Show more live help options. Keep the search consistents on all pages.

1. 2. 3. 4. 5. 6. 7.

All participants liked the visibility of search bars. All the participants were able to identify the navigation on homescreen. Participants were consfused at first on the selected navigation button. Participants wanted more information on result page. Participant wanted a way to tell books were available. Participants wanted to know what kinf of item is listed in the result. Participants wanted to try advanced search button.

Hi-fi Protype of the Search Result Page

Design Process
Hi-fi Prototypes

Hi-fi Protype of the Advanced Search Page

Hi-fi Protype of the Home Page

Hi-fi Protype of the Drop Down Menu

Hi-fi Protype of the Search Result Page

Final Testing
Hi-fi Prototype Testing
This is the final testing of the website. I dont have all the pages, but I tested with all the major components, and according to all three scenarios. I used the same participants again, so they knew what they were doing this time, and it was easier to test. The main purpose of this website is to minimize the disturbance in the home page for a novice user, and hide the extra features, and links for the advanced users within the home page. Also I tried to reduce the number of click, and redirection to a new page as much as possible. Participant 1: 22 years old. Single. Has be been using library website for three years now. Writing Center Tutor. English major. Uses smart phone. Participant 2: 24 years old. Single Has be been using library website for past eight semesters. English major. Uses smart phone. Participant 3: 24 years old. Single. Has be been using library website for three years. English major. Uses smart phone.

The final webpages are listed after this page. I think I did solve a lot of the existing usability problems in the website. I wish I could add some more pages to explain the concept further, but this took me a lot of time, and everytime I designed a new page, it had to be explained by adding another page. This lead me to have so many different pages. Although my test audience were all English majors, Ive designed this website for all majors, and from novice to advanced users. It was very difficult to determine what information to show, and what to hide. I wanted to make it simple, but I didnt want to take away everything so that the user might have difficulty finding research even more. I tried to make the home as simple, and easy to read as possible, and hid all the other options around the home page. For example the navigation at the top has drop down menu which shows the users what options they have in those fields. They dont have to click, and go to a new page to know whats in that tab. Also The quick links at the top right corner lists all the options reqiured for other than research. It has options to take you directly to the ilearn, email, so users dont have to hit back button or start a new page. The advanced search page opens in the same page, this reduced one more click, and if the users dont want to use it they can just ignore it right there. Also I took the reccommendations of the users to add a separate search for WorldCat site right in the home page, along with the Journals, and Database searches. Also I created a new function called My Library. This option lets users to keep track of all of their researches. However, users have to be logged in to use this feature. They can add, and delete projects. Also they can cite the materials right from this page. It will also notify users of the due dates. The search results can be expanded in the same page to see the extra details, and they dont ahve to go to the new page. Also they can click in the title to go they more detailed page so that they can get further informations if they want.

1. 2. 3. 4. 5. 6.

Keep search bar consistent on all pages. Make search results more prominent, and detailed. Live chat open in the pages instead of having to open a new page for it. Make worldcat site more visible. Appointments for research should be made easier. Make the page remember your profile.

Learning Summary:
Once again I learned that a problem can be solved in many different ways. I saw some of the other designs by other students, and they had their own explainations for the designs. One of the most challenging, things to do while desining a library website is the management of all the informations. I think the websites are crowded with all lot of informations for a reason. However, they look so cluttered in the page, because they arent organized very well. The best way to fix this problem is to use the principle of proximity, and group similar items together. My major source of inspirations were, University of Boston, and BYU library websites. They had solved the problem very well. I could still use a lot of user testing, in my final product, and get more feedback. Also the profile page can be simplified a little or may be I could use some icons to create more space. I used texts so that users dont get confused, and theyd know what each buttons do. This was very lengthy process, and Im glad its finally over, but in the mean while I think it made me a mature designer. I learned a lot from the researches, and from the group members. I wish I could make a working prototype, and test it.

1. 2. 3. 4. 5. 6. 7. 8. 9.

All the participants were able to identify the navigation on homescreen. Participants liked the new navigation buttons. Participants couldnt find WorldCat site Participant wanted to access, University ilearn. Participant wanted a live chat open all the time. Participants didnt care much about the floor maps. Participants liked the idea of the My Library profile Participants liked grouping of items, in header and footer. Participant liked the new search results.