Project Update #17: New Website - Using the Library Section and Footer

Today we're sharing the plans for the Using the Library and Footer sections of the new website. Please keep in mind the following images are wireframes and they contain little to no design elements such as graphics or color schemes. They also contain sample language. These wireframes serve to give an idea of how the content in the page will layout.

Project Update #16: New Website - Learning & Research Section

Today, we'd like to share the plans for the Learning & Research section of the website with you. Please keep in mind the following images are wireframes and they contain little to no design elements such as graphics or color schemes. They also contain sample language. These wireframes serve to give an idea of how the content in the page will layout. Click any wireframe image below to view a larger version of the graphic.

Project Update #15: New Website - Classes & Events Section

Development of the new site continues at a rapid pace. Last week the developers demonstrated progress made toward completing the Locations & Hours and Rooms & Studios sections of the site.

Classes & Events Section

The next section we'd like to share with you is Classes & Events. This section contains functionality that should be somewhat familiar to users as it's very similar to the searching and filtering options found in the third-party calendaring system currently used for class and event registration.

Project Update #13: New Website - Rooms & Studios Section

To date, through the course of weekly project meetings with Bluespark, we have been given demonstrations of the homepage, the Books, Movies & More section, the Classes & Events section, and the Location Pages. The demos have focused on content, functionality, and the admin side of these pieces because the pages hadn't been styled yet. Bluespark also showed us the direction they are moving toward for the presentation of the website on mobile screens.

Today, we'd like to share with you the plans for the Rooms & Studios section of the website.

Project Update #13: New Website - Location & Hours Section

The next section of the new site we wanted to share with you is Locations & Hours. Users will find the link to this section in the utilities area of the website header:

Location & Hours Section Page

Please keep in mind the wireframe sketch below contains little to no design elements such as color or images; it's meant to show the basic layout of the page and may also contain sample language.

Project Update #12: New Website Layouts - Books, Movies and More

Previously, we shared the homepage design with you, in this post we'd like to share the Books, Movies & More section of the new OCLS.info website.

You may have noticed in the homepage design that there isn't a search box for the catalog. A site search can be found in the footer of the new site, but there isn’t a catalog search on the homepage. Instead of "Search the Catalog" we have "Books, Movies & More" and just to the left of this text is a magnifying glass which indicates "search."

Project Update #11: New Website Page Layouts - Homepage Design

In our meetings with Bluespark, the development firm hired for this project, and the library administration, we determined three circles of service the library provides that would be the focus of the new website: consume, learn, and make. Under the guidance of our Director, Mary Anne Hodel, we determined that the main target audiences for the new website are children and families.

Project Update #9: Meeting with the Developers

We recently met with the UX (user-experience) expert and technical director from Bluespark, the development firm contracted to build the new website. They got to know the OCLS Redesign Team, OCLS Administration, and a few of the website content owners during their two-day visit. These meetings helped provide a picture of the Orange County Library System as a whole and where the expectations for the new website fit in the picture.

Wireframe Test #7 Results

Our seventh wireframe test was a re-test of the Classes & Events section of the site. We previously tested Classes & Events in Wireframe Test #5. The wireframes were adjusted so that the Classes & Events search was moved to the top of the page and promotional pieces were moved to the side of the page in a totem style. Other revisions to the wireframe included the removal of the mini-calendar from the default page.

Forty-two percent of beta testers completed the task. You can see the larger version of each wireframe by clicking on the image.

Wireframe #6 Results

Our sixth wireframe test focused on a materials section of the new site and used the Digital Audiobooks page as an example. Forty percent of beta testers completed the task. You can see the larger version of each wireframe by clicking on the image.

Wireframe #5 Results

Our fifth wireframe test focused on our Classes & Events section. Fifty-two percent of beta testers completed the task. You can see the larger version of each wireframe by clicking on the image.

Survey #9 Results

This past week we asked our beta testers to complete a survey regarding labeling for areas (or a link) within several different sections of the new site: Help; Using the Library > Services; Learning & Research.

Fifty-three percent of the beta testers completed the survey. For each of the three questions, participants were also given the option to choose "Other" as their answer and provide a suggested label. When analyzing survey results, we also take these written suggestions into account, and look for patterns in feedback to help us determine the best course of action.

Wireframe Test #3 Results

Our third wireframe test was of our Locations page. This is the first test of a secondary page we have conducted. Forty-four percent of beta testers completed the task. You can see the larger version of each wireframe by clicking on the image.

Search by Zipcode

Our approach to the new Locations page was to create a single page that would house all location information.

We presented four scenarios to the testers:

Wireframe Test #1 Results

Our first wireframe test was a test of the new website homepage. This wireframe was a 'first draft', and we will make modifications to it based on each test we conduct. You can see the larger version of each wireframe by clicking on the image.

First Homepage Wireframe

Tree Test #3 Results

In the third tree test, we continued the process of testing the placement of content in the new website information architecture to ensure visitors to the new site would be able to find specific items.

Wireframe Testing

In web design, a wireframe is a sketch of the website that focuses on layout and navigation. There are little to no design elements like color or images, just the basic layout of the pages. The absence of design elements helps create a prototype of the website that can be easily tested and updated. Making iterations of wireframes improves the usability of the site design and saves development time because the focus is on layout and there is no need to update a full design with each change.

Project Update #6: Progress and Next Steps

We are starting to conclude planning the new website's architecture and navigation. Over the past few months we have submitted various tasks to our beta testers, including card sorts, tree tests, and label tests. The results of these tests have helped us plan an architecture and navigation that we feel meets the needs and expectations of our users. We are also starting to come to the end of our content owner meetings. We have a few small sections of the site left to review with their respective stakeholders.

Survey #7 Results

This past week, 44% of the beta testers completed Survey #7, the fourth survey we've administered on the topic of labels. For three of the four questions, participants were also given the option to choose "Other" as their answer and to provide a suggested label. When analyzing survey results, we also take these written suggestions into account, and look for patterns in feedback to help us determine the best course of action. One question was repeated from a previous survey and we wanted to have participants choose between two specific labels.

Tree Test #2 Results

For the second tree test, we incorporated modified labels based on the label surveying we conducted in previous weeks. Tree Test #2 also included additional areas of the potential new site navigation, such as footer elements. Forty-four percent of the beta tester group completed the second tree test.

Survey #6: Research E-books Results

Survey #6 consisted of one question: Where would you expect to find e-books that are informational, used for research, and accessed only through a web browser (not through an e-reader or mobile app)? Fifty-three percent of our beta testers responded to the survey with the majority (69%) selecting "Learning & Research > Research E-books" as their answer.

Results of Survey #5: More Labeling

This past week we asked our beta testers to complete a survey regarding labeling in several different areas of the new site.

Forty-five percent of the beta testers completed the survey. For each of the three questions, participants were also given the option to choose "Other" as their answer and provide a suggested label. When analyzing survey results, we also take these written suggestions into account, and look for patterns in feedback to help us determine the best course of action.

Tree Test #1 Results

Over the past week, we conducted a tree test on a portion of our potential navigation. We needed to test our placement of content and ensure that beta testers would be able to find specific items. We based the structure of the navigation on our previous usability testing, including our card sorts and surveys.

Results for Card Sort #2 and Survey #4

Cart Sort #2 was a closed card sort, meaning fixed categories were provided for testers to sort cards into. There was a total of 30 cards and 7 categories. Our goal was to find a more definite consensus on certain cards and groupings. Forty-four percent of beta testers completed this task, which was open for two weeks. Below we share the "popular placements matrix" provided by Optimal Sort's reports. The percentages indicate the number of beta testers that placed the card into the category.

Usability Testing

The last couple of tasks the beta testers have been asked to complete were card sorts. Based on how beta testers relate content in the first two card sorts, we will map out potential information architecture for the new website. To ensure users are able to find information in our new structure, we will send the beta testers a Treejack test next week. Treejack is another product of OptimalWorkshop.

Project Update #5: Content We've Modified

We continue to meet with OCLS staff who are content owners on the website. In addition to setting expectations for their content in the new website, these conversations have allowed us to identify what can be changed in the current website. Streamlining content – and in some cases, removing content that has become unnecessary -- serves to better position us for the future when we will migrate to the new website and content management system.

Press Room

Closed Card Sorts

The first card sort we tasked beta testers with completing was an "open" sort. In an "open" sort participants are asked to not only group content cards but to label the groups they've created. In the next card sort, we will be inviting our beta testers to complete a "closed" sort. In a "closed" card sort participants are provided pre-defined group labels and then asked to sort the content cards into those groups. The group labels provided aren't necessarily the finalized names that we will be using for navigation, but they are clear and descriptive enough to allow sorting and grouping.

Card Sort #1 Results

The beta testers, on average, sorted the 61 content cards in Card Sort #1, into 10 groups. Four hundred eighty-one categories were created by the beta testers. We combed through the 481 groupings to identify similarities between the content they each contained and the names the beta testers gave each of the categories they created. Our goal was to establish standardized groupings of the content and to create labels for these categories based on their similarities. We were able to label and designate 27 groups based on this analysis.

Analyzing Card Sorts

To conduct a better analysis of the results of the card sort, Optimal Sort (the software we are using to collect your feedback) provides exportable spreadsheets based on the work of Donna Spencer. Spencer, who works in the information architecture/design and user experience fields, has written extensively on the topic of card sorting. These spreadsheets use formulas that fine-tune our analysis of the groupings and labels that our beta testers applied to the content cards. It also allows us to look for patterns between participants and how each participant thinks about content.

The Practice Card Sort: Groceries

On May 1st, we asked beta testers to complete a card sort of grocery items. The main purpose of having a practice sort was to allow beta testers to try out the software (OptimalSort) that we would be using for the site content card sorts. We wanted everyone to have an opportunity to become comfortable using OptimalSort and to address any technical issues or concerns in using the application before we began card sorting tasks with content for the new website.

Results of Survey #3: Questions from Content Owners

Sixty-three percent of the beta tester community completed survey number three. As you might expect, when asked what information do you feel is important to provide about a specific branch location, hours of operation and address were ranked as the most important by the beta testers. Location maps and event information followed in the rankings. Considered least necessary for location-specific information were history and unique art displays. The open comments to this question also provided great insight into what the community is interested in seeing when they visit a location page:

Project Update #3

In our Project Update #2 post, we mentioned the meetings we've been having with content owners. Today we will share things we are considering doing in the new website as a result of these discussions.

Home Delivery (MAYL) Page

Instead of a lengthy text explanation, this page will market the home delivery service in a visual way, and Acquisitions staff will be able to update the promotions. Perhaps we can use an animation or video to explain home delivery.

Project Update #2: Meeting with Content Owners

Based on the research from the website audit and architecture map discussed in the first project update, we identified which departments and groups within the Orange County Library System create, update, and maintain content within the website. We started meeting with these groups to speak with them about their content to better assess what will happen with that content in the new site. To date, we've already met with seven different groups of staff about their content.

Results of Survey #1: Current Site Usage

The first beta tester survey, which asked users about their current site usage, was shared with the community on March 26th. The survey ran for two weeks and was completed by 76% of the beta tester community.

It came as no surprise that the main reason for visiting the OCLS website was to access the catalog and view the user's library card account, with accessing e-books and viewing upcoming classes coming in second and third.