{"id":823,"date":"2019-05-08T15:32:25","date_gmt":"2019-05-08T19:32:25","guid":{"rendered":"https:\/\/sites.temple.edu\/assessment\/?p=823"},"modified":"2019-10-22T15:24:26","modified_gmt":"2019-10-22T19:24:26","slug":"cookies-user-research-and-an-iterative-design-process","status":"publish","type":"post","link":"https:\/\/sites.temple.edu\/assessment\/2019\/05\/08\/cookies-user-research-and-an-iterative-design-process\/","title":{"rendered":"Cookies, User Research, and an Iterative Design Process"},"content":{"rendered":"
\"\"<\/a>

Cookie Monster invites you to help with the library website…<\/em><\/p><\/div>\n

In late February, the Library Website Redesign project turned its focus to incorporating user research into the design process. With the help and support of Cynthia Schwarz, Nancy Turner, David Lacy, the UX group<\/a>, and others, Rachel Cox and I began a month long \u201cUX intensive<\/a>.\u201d The goal was to refine how content is organized on the site and to identify the primary site navigation.<\/p>\n

During the UX intensive, we tested design prototypes with 48 users, recruiting passersby in the Paley lobby with cookies, granola bars, and coffee. The UX intensive also afforded us the opportunity to consider how to add user research and iterative design to the project on an on-going basis.<\/p>\n

Organizing Content<\/h3>\n

When Rachel and I started our work, the site content was loosely organized based on the site\u2019s backend infrastructure. The entity model<\/a> allows us to group content into different entity types, such as services, policies, spaces, etc., and ultimately this model will make it easier for users to locate website content through search.<\/p>\n

\"\"<\/a>

Cardsorting with library staff in 137<\/em><\/p><\/div>\n

Our first step was to review the site content and organize it in a way that makes sense to users \u2014 we agreed that the organization of the front-end user interface shouldn\u2019t necessarily mirror the backend entity structure. While the website\u2019s infrastructure promotes discoverability of content, we didn\u2019t think this was the most intuitive structure for navigating the site. Plus, we wanted to offer users a way to discover our content through browsing, in addition to searching<\/a>.<\/p>\n

Building on user research from earlier in the winter on the categorization<\/a> of library services content<\/a>, we did a holistic review of all of our site content. With the help of library staff we spent a day and a half in room 137, sorting our content into categories. We also spent time brainstorming category labels that accurately described the content within and were free of library jargon. Based on the card sort, we created two sets of content groupings, one a more “traditional” (and minimal)<\/a> navigation similar to many other academic library websites, and an “action-oriented<\/a>\u201d navigation based on what users can do<\/em> on our site.<\/p>\n

Testing the Navigation with Users & Library Staff<\/h3>\n

The UX group then conducted tree testing<\/a> with users<\/a> on the two navigation menus.<\/p>\n

\"screenshot<\/a>

“Traditional” navigation<\/em><\/p><\/div>\n

Ultimately, the \u201ctraditional\u201d navigation tested better. Users were able to locate information with less effort and some commented that they liked the simplicity of fewer navigation options.<\/p>\n

\"screenshot<\/a>

“Action-oriented” navigation<\/em><\/p><\/div>\n

However, one category from the action-oriented menu, \u201cVisit & Study\u201d was very successful. We went back to the drawing board, creating a single navigation menu comprised of the best elements of each.<\/p>\n

We also asked interview questions to get a sense of what users expected to find in each of the category and whether the terminology we chose made sense.<\/p>\n

\"word<\/a>

What users expect to find under About<\/em><\/p><\/div>\n

\"What<\/a>

What users expect to find under Research<\/em><\/p><\/div>\n

Refining Content Categories<\/h3>\n

From there, we continued refining the content and categories of content within the top-level navigation categories, i.e., we decided what site content should go under \u201cAbout\u201d \u201cVisit & Study\u201d \u201cServices\u201d and \u201cResearch.”<\/p>\n

At this point, we realized we needed to meet with internal stakeholders. There was a lot of content about library services that we simply weren\u2019t familiar with. We met with library staff from the Research Data Services Strategic Steering Team, the Scholarly Communication Strategic Steering Team, and the Digital Scholarship Center to learn more about their emerging services.<\/p>\n

We shared the revised wireframes with library staff at an open forum<\/a> in February where attendees gave feedback about labels, navigation, and organization of content. This feedback helped us to finalize the architecture of the site.<\/p>\n

\"\"<\/a>

An early attempt at finalizing the navigation and content categories\u00a0<\/em><\/p><\/div>\n

Building a Site Prototype<\/h3>\n
\n

Once the site structure was finalized, Rachel created landing pages to correspond with the primary navigation, i.e. the pages where a user ends up after clicking a top-level navigation category. We used Balsamiq<\/a> to design low-fidelity prototypes (or wireframes)<\/a>. Balsamiq allowed us to create interactive, clickable, prototypes that could be shared and tested with users<\/a>.<\/p>\n

\"\"<\/a>

The first landing page prototype was fairly bare bones; we listed content as text within each category.\u00a0<\/em><\/p><\/div>\n<\/div>\n

In the first round of user testing, we observed that participants spent a lot of time scanning the landing pages for the information they needed. Participants found the pages overwhelming and overlooked content in the categories. Some of the subcategory labels were also confusing. For instance, participants didn\u2019t realize that \u201cLibraries and Collections\u201d meant Temple\u2019s<\/em> libraries and collections.<\/p>\n

\n

Based on results, we revised some of the terminology (e.g. “Libraries and Collections\u201d was renamed “Temple Libraries & Collections\u201d) and reorganized some of the content, but the biggest change was the elimination of the subcategory links from the landing pages. We designed icon-based prototypes of the landing pages hoping the icons would make the pages easier to scan. We tested the icon-based design<\/a> with users just two days later with great success.<\/p>\n<\/div>\n

\"screenshot<\/a>

Icon-based landing page<\/em><\/p><\/div>\n

Since February, we\u2019ve continued to make user research a routine part of the design process. Earlier in the website redesign project, design concepts often went from a basic prototype to final product with minimal staff or user input in between. Testing initial prototypes with users and library staff helped us to identify usability issues and iterate on the design<\/a> before it moved to the final coding and review stage.<\/p>\n

Today the UX group ran our last user research session in the lobby of Paley before the Library closes on May 9th. I look forward to continuing user research in Charles Library (as well as other campus locations) and integrating user experience into a variety of projects.<\/p>\n","protected":false},"excerpt":{"rendered":"

In late February, the Library Website Redesign project turned its focus to incorporating user research into the design process. With the help and support of Cynthia Schwarz, Nancy Turner, David Lacy, the UX group, and others, Rachel Cox and I … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1898,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[50],"tags":[95,35,78],"class_list":["post-823","post","type-post","status-publish","format-standard","hentry","category-usability","tag-usability","tag-user-studies","tag-website"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/posts\/823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/users\/1898"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/comments?post=823"}],"version-history":[{"count":0,"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/posts\/823\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/media?parent=823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/categories?post=823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.temple.edu\/assessment\/wp-json\/wp\/v2\/tags?post=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}