North Carolina Coastal AtlasDesign Recommendations

Team 2:Kelly Gray, Nathaniel Mansfield, and Janine Butler

Contents

Cover Letter/Final Report1. Executive Summary2. Main Findings and Design Recommendations3. Deliverables

I. Citizen Scientist PersonaII. Usability Report

II.1 Executive Summary:II.2 Analysis of User Experience Data:II.3 Design Recommendations:

III. Open Card Sort ResultsIII.1 Executive SummaryIII.2 Analysis of Card SortIII.3 Design Recommendations

IV. Content Audit of BibliographyIV.1 Executive SummaryIV.2 Audit FindingsIV. Design Recommendations

V. Prototype

1

Cover Letter/Final Report

1. Executive SummaryThe members of Team 2 (Kelly Gray, Nathaniel Mansfield, and Janine Butler) evaluated the design of the North Carolina Coastal Atlas site (https://www.nccoastalatlas.org) with a focus on user experience design. We have created several deliverables that are included within this document: a persona of the Citizen Scientist user, a usability report, information architecture deliverables that analyze the results of our open card sort and content audit of the Bibliography, and a prototype of the Bibliography. Our assessment of the site, usability tests, findings, and audit have led us to focus on the Bibliography as a main component of the NC Coastal Atlas site that should be prioritized for redesign. Redesigning the Bibliography would make the articles and sources within the Bibliography more accessible and informative to users, including Citizen Scientists who may come to the site for personal interest, information, or other non-professional/academic purposes.

In this document we provide our findings and our recommendations for redesigning the site, and particularly the Bibliography, to enhance the NC Coastal Atlas’ usability for users. To emphasis, design decisions were based on the needs, capabilities, and goals of Citizen Scientist (an identity that our persona reflects). Our design recommendations are meant to make the NC Coastal Atlas and the Bibliography more navigable and accessible for users so that the site can better serve their personal interest in the coast and/or their needs for more information on coastal science.

The following infographic summarizes the connections between our deliverables and demonstrates how our findings built upon each other to support our design recommendations in the prototype of the Bibliography.

2

3

Usability Test Results-Identified needs of Citizen Scientists.-Showed which parts of the site are able to meet these needs and which parts cause problems.-Gave insight into what features need to be changed or added.

Persona-Repesented all of the Usability Test Results as one single person.-Helped to encapsulate the most crucial needs that were common across the majoity of the those surveyed, and then tailor the changes of the UX towards them.

Open Card Sort Results-Allowed for us to see in person how a user interacts with the Information Architecure of the site and determine which areas need to be focused on for improvement.-Showed that the Bibliography and Data Catalog were areas in need of improvement.

Content Audit of the Bibliography-After determining the Bibliography to be an area of priority, we assessed the way the user has to interact with that part of the site through a content audit.-This showed us parts of the Information Architecture that could be better implemented.

Bibliography Prototype-An interactive visual of the Bibliography with our preposed changes added.-Gives a rough idea of how these proposed changes stand to improve the usability of the site.

2. Main Findings and Design RecommendationsOur research and usability testing over four weeks found common elements that could be redesigned to improve the usability of the site. We prominently found that users would prefer:

· explicit clarification of the purpose and use of site in general and of the Bibliography in particular· proportional arrangement and placement of components on the page (including the sizes of social media icons, the slideshow, and image links)

These two elements are the focus of our recommendations for the redesign of the site and of the Bibliography. Our team members and our participants found both the Data Catalogue and the Bibliography the more difficult categories to define and navigate with purpose. We recommend that both the Data Catalogue and the Bibliography be redesigned, but we have focused on the Bibliography in our findings.

We feel that the Bibliography should take priority when considering design recommendations to improve user experience for this site. We suggest the following redesigns to help Citizen Scientist users, and users in general, access the information they need.

1. Home Page a. Resize the slideshow so that it takes up less visual space on the page b. Move the About Us tab to be beside the Home tab so that users new to the site can easily find information about the site c. Resize the social media icons to be more proportional in size compared to the other elements on the page

2. BibliographyBased on our findings and research, we have developed the follow design recommendations for the Bibliography. These redesigns are also built into the prototype of the Bibliography with explanatory annotations.

a. Provide more options within the search bar so that users (especially those in the Citizen Scientist group) can have an idea of what topics or categories to search for.

4

b. Make the filter categories expandable so that they do not take up too much space on the right side of the screen.

c. Add a How To category to include instructions for using the features on the site. This explanation is also expandable so that it does not take up room on the main page of the Bibliography, but is still accessible to users who may not know how or why to use the Bibliography.

d. Change the dates in the search filter to begin at 1970 - 2013 (or most recent).

e. Add page selection buttons at both the top and bottom of the Bibliography page so that users can browse through the sources easily.

5

f. Shuffle the articles that appear on the main page of the Bibliography so that these will change each time the user visits the site. Seeing different articles would better serve users who revisit the site occasionally.

g. Add a Recently Added category to feature new sources added to the site.

To provide clarification to our findings and design recommendations for redesigning the site in general and the Bibliography in particular, we have included the following deliverables in this document: a usability report, a persona of the Citizen Scientist user, an information architecture deliverable that reports on the results of our open card sort and content audit of the Bibliography) and a prototype of the Bibliography.

3. Deliverables

I. Citizen Scientist PersonaA persona was created to represent the “citizen scientist” users of the site. The North Carolina Coastal Atlas site was designed to accommodate a wide variety of users with a vast array of technical knowledge and range of skills. Our team has strived to build a persona that will encompass as many of these attributes as possible. We feel this persona, William Jones, is a good representation of a "citizen scientist" user. He has some experience with GIS mapping software and will use the site professionally but also has outside interests that bring him to the site for environmental purposes. This persona has served as a reference during our design analysis. Design decisions were based on our team’s understanding of the persona’s needs, capabilities, goals, and frustrations.

II. Usability Test ResultsA Usability Test was created and administered to testers who were chosen specifically to serve as representatives of citizen scientist. Testing focused on information and priority of content, and visual design and proportional size. Usability Test results evaluates how well users can navigate through the site and complete given tasks. All of the participants found the site relatively easy to navigate and most tasks were completed without hesitation. Participants pointed out some visual elements of the site such as logo placement, size of social media icons, and the prominence of the slideshow, but still rated the site as easily navigable and were able to complete their assigned tasks with little to no difficulty. Participants voiced concern about needing more information or clarification on how to navigate the Data Catalogue and the Bibliography. Again, our analysis of the results lead us to recommend the redesigns in the Bibliography.

6

II. Open Card Sort ResultsAn open card sort test was conducted to help shape the information architecture for the redesign of the NCCA Website. The facilitator sought to uncover an understanding of how usability professionals from various backgrounds and roles expected to see content organized on a usability-focused website. Analyzing the ways in which our participant sorted the cards showed us how the user (a representative of the Citizen Scientist group) expected to see content organized on the site. We found that the participant easily recognized and created the following six categories respectively: Home, Maps, Data Catalogue, Bibliography, Blog, and About Us. While the participant was able to create the categories with relative ease, he had difficulty adding or assigning content to the Data Catalogue and Bibliography. Our analysis of the open card sort lead us to recommend changes in the design of these categories to make their purpose more clear for users and to allow users to navigate through these pages more efficiently.

IV. Content Audit of BibliographyOur content audit of the Bibliography found that the Bibliography would benefit from some redesigns to improve usability. While some features have been implemented well, other features currently are not quite as user friendly, as articulated in the content audit. These features have led to our recommendations for the redesign of the Bibliography.

V. PrototypeTeam 2’s prototype focuses on the Bibliography section of the NC Coastal Atlas site. Based on our usability testing analyses and content audit of the Bibliography, changes were made to improve the usability of various features in the BIbliography. Navigation tools such as the filters and the organization of articles were re-assessed in order to help users interact with the Bibliography in a more effective manner. The prototype includes suggested changes/improvements to be made to the Bibliography.

The deliverables within this document clarify and support Team 2’s design recommendations for the NC Coastal Atlas site in general and the Bibliography in particular.

7

I. Citizen Scientist PersonaBased on our analysis of our users’ experiences with the NC Coastal Atlas site and maps, Team 2 has developed a persona, or what Buley in The User Experience Team of One describes as a composite picture of our users distilled into one relatable human profile. Our first-hand user research assessment has allowed us to develop a composite image of what a Citizen Scientist user of the NC Coastal Atlas would look like. We used this representative persona in our UX design process to be conscious of the perspective of users of the site. In other words, our design recommendations for the NC Coastal Atlas site and Bibliography are based on the needs, wishes, and interests of the Citizen Scientist persona when interacting with the site.

A link to our persona is available here: https://live.uxpin.com/4b8e22eba55f7ab23848b6b69551b62387fdaed9#/pages/101983

8

9

II. Usability Report

II.1 Executive Summary:In Group Two’s User Experience Project Plan, we identified four features in the NC Coastal Atlas site (https://www.nccoastalatlas.org) that needed improvement and that we would focus on in our user experience design plan. The features are as following:

1. Information and Priority of Content2. Visual Design and Proportional Size3. Create-a-Map4. Map Toolbars

We identified these four features as the ones that should be redesigned in order to improve the accessibility of the site and ensure that users can interact with the site more successfully.

We thus developed a user experience test that focused on how users experience the four features, more specifically the first two features. Our tasks asked the users to navigate through the site and provide their feedback to the information and priority of content as well as the visual design and proportional size. We developed a test for our users on TryMyUI (http://trymyui.com).

We tested three users with interests in science but minimal experience with using geographic data: a middle-aged businessperson, a middle-aged college professor, and a young engineer. We found that our users’ experiences of the site were more positive than our own, so the site may not have to be redesigned as much as we initially thought.

Yet, these three users still had suggestions for improvement. Our three users gave us insight on how to redesign the site to meet the needs of users of NC Coastal Atlas.Our users all found the visual design and layout to be simple and clear. However, they pointed to several areas that could be improved to improve users’ experiences with the visual design. The margins need to be redesigned to prevent content, including the North Carolina Coastal Atlas logo on the top of the page, from being cut off the page. The social media icons seem too large. One suggested filling up the blank space on the right side of the page to make it more visually pleasing.

They also gave us insight into how to improve the informational content. They all asked for more content about the atlas on the home page and the “About Us” page. One noted that the “About Us” tab should be next to the “Home” tab to give priority to informing users about the site. They all noted a need for sections on how to use the features of the site and maps, and explicit instructions on how to use the maps.

The experiences of our three users are important to note as we redesign the website to best serve the needs of a range of users. The North Carolina Coastal Atlas site should ensure that it is informative and that users can interact with the information within. Our analysis will help us redesign the site’s visual design and informational structure so that users can more quickly find information.

10

II.2 Analysis of User Experience Data:

Home pageOur users found the home page to be informative, readable, and not overwhelming. The home page gave them a good first impression. One noted the simple layout but also asked why the NC Coastal Atlas logo was nearly cut off on the end of the screen. Another noted that the social media icons were perhaps too large and suggested more content under “About the Atlas.”

In terms of content, two immediately pointed to the slideshow of the map as the content given priority on the page. Those two would click on the maps first. In general, our users found the home page visual design to be well done.

Finding InformationOur users were able to find information about the goals of the website by going to the “About Us” page (two users) and the home page (one user). They said their experience of navigating through the site was “good” and “positive.” They would not add content or functions and noted that the layout was easy to navigate.

About Us PageOne user suggested filling up some of the blank space on the right side of the page to make it more pleasing. Another suggested adding a section on how to use the site and maps.

Navigation TabsOne user noted that the “About Us” tab should be moved in the navigation bar. The “About Us” tab should come after the Home tab.

Maps TabOur users were comfortable using and interacting with the maps. One found the “Create-a-Map” feature interesting with information that he was interested in. He would not change anything on the maps page, calling it a strong page.

One user noted that the maps page did not give explicit instructions or information on how to use the maps exactly. He was able to figure it out comfortably, but noted the lack of instructions.

Informational Content and Visual DesignOur users found the visual design to be clean and simple. One user suggested a different typeface (serif) for larger blocks of copy. Another suggested making use of the wasted space on the right side of the page by adding more information. Instead of using large social media icons, he would use the space to elaborate on “About Us.”

11

Our users especially noted the large slide show as prominent and one noted it as a strange use of space.

One user would add more explanation in general on how to use the features of the site. Another user would add more information to the “Data Catalogue” page.

12

Ease of UseOur users did not find the site too difficult to use, yet had suggestions. One user pointed to the “Data Catalogue” as the most difficult to navigate or understand and asked for more explanation on the page.

II.3 Design Recommendations:As we discussed in our project plan, we believe that the site and maps should be designed in a way that makes them accessible and functional for a range of users with a variety of goals. Based on the experiences of our users, we recommend that the site should be redesigned in the following ways to make navigation and information more efficient for users.

The About Us tab should be moved to the second position on the toolbar for the site (right after Home). This minor change will help to make sure that new visitors to the site will be more likely to see that page second after the homepage. This is an ideal progression for a new visitor to the site as it gives them information about what the site is for before giving them tons of content to sort through. The About Us page will also be tweaked to use a serif font for better visibility and make better use of the empty space to the right (which was mentioned by the users) by adding relevant content.

Since two of the users found it to be distracting, the map slideshow on the homepage should be moved to the top of the Maps page. While it does a good job at showcasing different types of maps, users found it to be a strange use of space on the homepage given how much of the screen it takes up. By getting rid of the slideshow, information about the site and events becomes the most prominent thing on the page. This will be more helpful to first time visitors of the site as this information will likely be of use to them.

The Data Catalogue page was one of the most confusing among our users due to its apparent lack of instructions. Users found that the page was hard to navigate and wanted more explanation on how to use it. This could perhaps be mitigated if the slideshow was swapped out for instructions with the data catalogue search feature being presented below. The slideshow could then be moved to the top of the View All Data page accessible from the Data Catalogue page.

13

Users were more split on the intuitiveness of the Maps page. While one found it to be perfect, another would have liked for there have to have been better instructions for using the maps and map creation features. To meet both of these needs, we suggest the addition of a link to an instructions page from the map page. This could be featured near the top of the page with the slideshow that was originally featured on the homepage. Having these two things at the top is ideal since they are likely things users would like to see first. The instructions page would just be a simple text page, with screenshots if necessary, to explain the basics of using the maps.

Group Two’s design recommendations for the NC Coastal Atlas site and Bibliography are based on the preceding analysis of our users’ experiences.

14

III. Open Card Sort Results

III.1 Executive SummaryTeam 2 conducted a card sort to help shape the information architecture for the redesign of the NCCA Website. Analyzing the ways in which our participant sorted the cards shows us how the user (a representative of the Citizen Scientist group) may expect to see content organized on the site.

Our participant organized the content into groups that would make his experience navigating through the site more clear, intuitive, and pleasant. We found that the user had most ease categorizing information into the Home and Maps categories. However, we also found that the user had the most trouble with defining the Data Catalog and Bibliography categories. He was not certain what these categories should encompass. Our analysis of the card sort suggests that a redesign of the site may need to make the Data Catalog and Bibliography categories clearer to users; the site should show users the purpose of these categories and the ways in which users can interact and benefit from these categories. This would benefit not only users from the Citizen Scientist group but also all users who come across the site.

III.2 Analysis of Card Sort

Overview of Card SortWe conducted a face-to-face open card sort with a user from the Citizen Scientist group of individuals with interest in science but little professional knowledge of how to use geographical information systems (GIS). The participant was told he could use categories from the website or create his own.

The participant was given a blank stack of cards and asked to place important content on the index cards. Next, he was prompted to sort them into groups, and finally to give each group a label. The participant explored each of the existing categories currently located along the navigation bar and added content to a card as he encountered what he thought was important content. He then began the task of grouping the cards. The group of cards that would later be labeled as Home, was created without much hesitation and the participant seemed confident with the grouping. The second group of content cards would make up the Map category. Again, no real issues were noted.

15

The participant seemed confident that a Data Catalog and Bibliography category were both necessary. The participant did not include any specific content from the information found in the Bibliography section. Instead, he wrote the word “articles” on one index card and placed under the group titled, Bibliography. The facilitator noticed that the participant struggled with a few content cards that were left remaining in the deck. These were eventually grouped under the Data Catalog. The facilitator noted that the participant was often torn between placing a content card in the Maps category or the Data Catalog category. Table 1 is a visual representation of the open card sort provided by the facilitator.

Table 1. Completed Open Card Sort

General Categories and Navigation TabsDuring the card sort, the participant easily recognized and created the following six categories respectively:· Home· Maps· Data Catalog· Bibliography· Blog· About Us

These categories currently compose the navigation tabs on the top of each page that direct users’ navigation through the site. This suggests that the current navigation tab may not need to be redesigned to too large of a degree. Users are currently able to figure out how to navigate through these tabs/categories.

16

There were two categories that were the easiest for the user to organize information into: the Home and Maps categories. In particular, this user was “most certain about grouping information that belonged with Maps.” The different types of maps were easier for him to group together than information in other categories. This suggests that users are able to recognize the different kinds of maps that are available on the site (although this does not necessarily mean that they understand how to use the maps).

Table 2. The participant was most confident with the grouping of these content cards in their respective categories of Home, Maps, and About Us.

However, the participant did not choose Contact Us as a separate category. He placed the Contact Us card under the Home category. This suggests that Contact Us may not need to occupy its own space on the navigation tab and may better serve users when accompanying information in another category.

Data Catalog and BibliographyWe believe it is important to emphasize that the participant had to refer to the website to help him group information into the Data Catalog category. This category was the most difficult for him to organize information into. He had to refer back to the website to guide him as he organized information into the Data Catalog category.

In our follow up interview with the participant, he stated that he felt the least certain about categorizing information into the Data Catalog category since he was not sure what the category “should encompass.” This suggests that users from the Citizen Scientist group may not recognize the purpose of the Data Catalog page and thus may not be sure how to use or interact with the data.

17

The participant found both the Data Catalog and Bibliography as the “hardest categories to define.” Again, this suggests that a redesign of the site may need to make the purpose of these categories clear.

Table 3. The content cards left in the deck were the most difficult for the participant to categorize

III.3 Design RecommendationsOur analysis of the card sort indicate that the Data Catalog and Bibliography are currently hard categories for users in the Citizen Scientist group to define. We suggest that these categories be redesigned in order to make their purpose clearer to users.

The Data Catalog and Bibliography contain intensive information that could benefit and educate users in different ways, depending on how users want to learn from the material. In order to be able to benefit (or learn from) the data and articles, users should be able to easily and quickly understand how they can use the information on these pages.

Our content audit of the Bibliography (discussed in the following section) supports the need to make the information structure and organization of the Data Catalog and Bibliography content more accessible to users. Our prototype of the Bibliography focuses on improving the user’s experience of navigating through the site and the articles within the Bibliography.

18

IV. Content Audit of Bibliography

IV.1 Executive SummaryOur content audit of the Bibliography found that the Bibliography would benefit from some redesigns to improve usability. While some features have been implemented well, other features currently are not quite as user friendly. We recommend that that improving some of the problems with the navigation tools for browsing the articles listed in the Bibliography would help users have an easier time searching for and finding information within the Bibliography. Navigation tools such as the filters and the organization of articles should be reassessed in order to help users interact with the Bibliography. We recommend redesigns that would allow users to navigate through the information within the Bibliography with more ease.

IV.2 Audit Findings

FiltersOne of the most important tools for using the Bibliography, the filters, take up a lot of space on the sidebar. It is impossible to see all of the categories at once. If these categories were changed so that they had to be clicked on to drop down a list of subcategory filters, it would take up less space on the page and the user would have an easier time seeing all of them.

19

Another problem with the filters is that once some are turned on, the user is unable to add a filter from another category. It isn’t clear whether this is intentional, but it isn’t consistent across all filters. Some maintain the full list of categories, while others lose them. A main benefit of using filters is that they allow users to narrow down a search by taking away irrelevant articles bit by bit. It is confusing as to why this feature would be taken away.

Organization of ArticlesIt isn’t exactly clear how the list of articles presented on the main Bibliography page are arranged. Their publication dates are all over the place and they don’t appear to be arranged alphabetically. It seems like the order is based on when they were added to the site, but even that’s not clear. Some explanation and tools to change the ordering of the list would be a very helpful addition.

There are pages where you can see when a particular article was added to the site. By clicking on an author’s name inside an article page you are taken to a page dedicated to that author. Their name appears at the top of the page with a placeholder picture and a list of articles associated with them on the site. The list shows when the article was added and who submitted it. It would be great to make this information available on the main list as well. While not completely necessary in improving the user experience, adding more to these author profile pages (like having actual pictures of the author where the placeholder image is) could be a worthwhile improvement. The text should also not be so oversized on these pages as it’s distracting and limits the amount of information on the page at one time.

20

There was also a problem with the filter that allowed the list to be narrowed down to a period of time between two years. The user can enter the years into two boxes or use a bar to select the years. However, the bar isn’t effectively implemented as it goes from the year 0 to 2013. The bar should start from the year of the oldest publication date of an article featured on the site. It is otherwise borderline unusable since the majority of the bar selects dates where there are obviously no articles.

Overall Design of BibliographyOverall, the best ways to improve the Bibliography seem to be to make changes that improve navigation. The filter categories need to be expandable so that they don’t take up so much space on the page and there needs to be better organization to the lists of articles with explanations for how they are ordered. Another simple change that will aid in improving navigation would be to have the page selection buttons that appear at the bottom of the page also appear at the top. This is particularly helpful when using filters or creating searches as it is helpful for the user to see how many pages of results they now have. These minor changes should go a long way in improving the user’s experience interacting with the Bibliography.

IV. Design RecommendationsOur content audit of the Bibliography builds on our usability testing findings (as detailed in the preceding sections of this document). Users of the Atlas need to be aware of what is within the Bibliography category and what the content can do for users. To emphasize, users need to be aware of the purpose of the Bibliography in order to navigate through the articles.

In addition to making the purpose of the Bibliography more clear, the tools for using the Bibliography need to be redesigned. The filters and the organization of the articles should be reassessed in order to make finding and reading pertinent articles easier and more pleasant for users. This is important to consider when ensuring that users in the Citizen Scientist group—

21

those who may benefit from the Atlas for personal and/or professional use but may not know how to use the Atlas—can learn and research more about the North Carolina coast.

Our prototype of the Bibliography directly reflects our design recommendations in these sections.

22

V. PrototypeAs the culmination to our usability testing and research, Team 2 developed a prototype of the Bibliography with annotations describing the rationale for each element and design on the page. We are providing the link to our prototype of the Bibliography, which has been designed with the user experience in mind:

https://live.uxpin.com/b3552377790af59f6bea8370039373714decc8a4#/pages/23660622

23