town of chapel hill site case study

Town of Chapel Hill Site Case Study

Project Overview

Introduction

The Town of Chapel Hill administration helps to provide residents and students with important information regarding COVID-19, city services, local businesses, and so on. Our researchers on this project evaluated the usability of the Town of Chapel Hill website on computers and mobile devices; we explored how effective it was in conveying relevant information, in particular to the students of the University of North Carolina at Chapel Hill. Two phases of usability research were completed to accurately analyze research findings on design, content, and functionality as well as to make evidence-based recommendations.

Phase 1 of Usability Testing: User Experience Research Test

Analysis and Results

To understand the general opinion of UNC-CH students on the Town of Chapel Hill website, we surveyed 16 students on their user experience regarding content strategy, navigation, visual design, and overall organization of the website. The survey gave us insight on the site’s pleasure points and pain points to keep in mind for the subsequent usability testing and the website update recommendations.

The pleasure points include the visual hierarchy of information on the homepage and the abundance of resources available for students who are also residents of Chapel Hill. Considering the current pandemic, participants were happy to see a banner reminding people to be mindful of spreading COVID-19 and a button linked to the latest COVID-19 information first thing on the homepage. Other relevant information, including local news and events, was also accessible from the homepage and the menu.

The pain points consist of non-appealing design and complicated navigation of the website, especially with the mobile version. Despite giving positive reviews on the visual hierarchy, participants were critical of the visual design itself. The color scheme is too bright and outdated, and the text is not uniform in terms of font and color. Furthermore, the banner on the homepage takes up too much unnecessary space and does not automatically rotate to show other announcements which confused the participants at first. Participants were frustrated with navigating the mobile version of the website due to some buttons not responding to touch as well as overlapping and cramped text.

Customer Segment

Because of the decision to research students’ perspectives on the website, we have concluded that there are three customer segments: prospective students, current students, and alumni. Although the website has information pertaining to students, our initial usability testing tells us that such resources are not adequately conveyed due to the website’s overwhelming visuals and non-intuitive navigation system.

Value Proposition

As stated on the website, the mission of the Town of Chapel Hill is “learning, serving and working together to build a community where people thrive.” To do so, Chapel Hill will make essential information and resources readily available, while also being well-informed to the needs of the residents, businesses, and students so that necessary actions can be taken to bring about much-needed change.

Metrics

Through our preliminary research on pleasure points and pain points, we were able to determine the following four key metrics that can be used to assess the usability of the Town of Chapel Hill’s website, both on computer and mobile device.

The effectiveness of the website’s visual hierarchy of information
The amount of information, resources, and other content regarding Chapel Hill
The aesthetic value in the visual design of the website
The ease of navigating the website to quickly find the information the user is looking for

Phase 2 of Usability Testing: Card Sort Survey

Executive Summary

Our team carried out a card sort test with a total of 13 cards and received responses from 11 participants. Based on our research from phase one, we created categories for participants to rank in terms of importance. These were based on categories already available on the website, and some that phase one participants deemed important.

Test Objective

The objective of the card sort was to determine which information on the Town of Chapel Hill website was most valuable to site visitors. This test was conducted in order to better understand how to serve the needs of the user.

Participants

The total number of individuals who attempted the card sort was 11.

Of those 11, 10 sorted those cards into cohesive groups.
Of those 11, 8 sorted the cards in order of importance and value.
Of those 11, 11 successfully completed and saved the card sort.

Methodology

We conducted 11 card sorts with participants who have various relationships to UNC. Of those 11 participants, 8 are current students, 2 are prospective students and 1 is an alumnus. Each card sort had 8 options for the first question and 3 options for the second question. The card sort was conducted using a qualtrics survey.

Participants were informed that the survey is in regards to the Town of Chapel Hill website, and that it is for a research study. The categories in the qualtrics survey are able to move freely to create a ranking that imitates a card sort.

Data Collected

The researcher was able to gather the following data:

Qualitative: This form of data includes participants attitudes’ towards the information hierarchy of the site and other preferences. We found that participants on average ranked accessibility and navigation of the site above visual aspects of the site such as color scheme, which differed from our findings in Phase 1. Additionally, we found that COVID information was the most important to participants, followed by resident information and student information.

Quantitative: After receiving our qualitative data from the usability studies, we decided to create a card sort to provide us with quantitative data as well. We asked people from the Chapel Hill community to provide us with rankings of what would be most important for them to see on the town’s website. We received data from 11 participants with the following breakdown:

Prospective students: 18%
Current Students: 73%
Alumni: 9%

Data 1: Card Sort for the Town of Chapel Hill Website Categories

This was created in a team, I was responsible for all of the wireframing and results and recommendations from them.

From these survey results, we can conclude that Covid Services, Student Information, News and Services are the categories that were the most important to our users.

Data 2: Card Sort for Website Features

We conducted a second cart sort where we had users rank the following categories:

Color scheme/visual appearance of the website
Accessibility
Navigation

The results indicated that accessibility and navigation of the website are equally important to users, and color scheme/visual appearance is of the least importance to users.

Recommendations

From the results of the first usability test and the card sort, we can recommend that the COVID-19 services, student information, news, and services should be of higher hierarchy and easily accessed on the home page. In terms of accessibility and navigation, the drop-down menus should be intuitive and display properly according to the information the user is looking for. For instance, when on the ‘college students’ page, the ‘residents’ menu should be highlighted instead of the ‘government’ menu. Furthermore, we can recommend that the COVID-19 banner should change automatically and the color scheme should be made cohesive throughout the entire site. We created a low-fidelity wireframe for both mobile and desktop sites to articulate some of these recommendations, then created mid-fidelity wireframes to further flesh out our recommendations for the sites and menus.

Recommendations and Wireframes

Pain Point: One main pain point we discovered in our findings was that relevant information to all users was not featured on the home page. In order to improve this pain point, we configured a homepage that included titles and information relevant to students.

Pleasure Point: One main pleasure point we found was the amount of information provided on the site. In order to maximize this pleasure point we adjusted the menus and submenus to provide easier access to this information, making both the mobile and desktop menus cohesive and intuitive.

Low-fidelity Wireframes

Mid-Fidelity Wireframes

Results and Recommendations

The usability testing ultimately shows that users want to see things on the site that pertain to them. Because there is a large population of students living in Chapel Hill, whether they be prospective students, current students, or alumni, the Town of Chapel Hill site should have featured sections that pertain to them. By integrating a students section on the homepage, students can feel more welcomed to the site and understand that the site is useful to them. Considering the fact that students find COVID-19 information to be the most important in value to them, it made sense to keep the COVID-19 banner at the top, but smaller with the implementation of auto-scrolling and keeping one cohesive design with the different languages. Furthermore, the use of having COVID-19, students, news and services in the first four bubbles to be seen, allows users to see what they are most likely visiting the site for first. We recommend removing the side services tab on the desktop site to eliminate redundancy. As seen in the mid-fidelity wireframes, we recommend simplifying the mobile version in order to keep the mobile site from being too overwhelming. We also recommend rearranging the mobile hamburger menu to be more intuitive and to mimic the desktop site as well, which can be found in the final wireframes.

Summary

Final Wireframes

Mobile Menu

For the mobile menu to mimic the desktop menu, we integrated the ‘services’ sub-menu, along with eliminating the ‘home’ sub-menu because the logo at the top of each page redirects the user to the home page already. Creating arrows to portray that each title is a drop-down menu creates an intuitive menu that needs no explanation above it.

Desktop Menu

In order to keep a consistent and intuitive menu, we decided to only change the ‘services’ drop-down menu to match the rest of them. The difference is that the sub-menus each have their own drop-down menu to quickly locate a specific service. The first wireframe below shows an example of the ‘services’ menu at first glance, then a second wireframe demonstrates what selecting a drop-down menu in the ‘services’ would look like.

Final Recommendations

We recommend that the Town of Chapel Hill create a style guide in order to have a consistent visual appearance across the site in terms of both text style and color scheme. This would appease the site visitors’ complaints about the appearance of the site and help to maintain visitors’ attention when they do visit the site.

We recommend that the mobile site is revamped and that a dropdown menu be put in place so that information is accessible from across the site as a whole. This will improve accessibility and navigation which are two facets of the site that users identified as being very important to them.

We recommend that the desktop menu for the “services” section be changed to match the format of all the other menus. The popup window was confusing to participants and took away from their ability to easily navigate the site and access the information they needed.

We recommend that the links on the website take users directly to the new page instead of bringing up a redirection page first. This will lessen users frustration, as attention spans are already so low when looking at websites.

We recommend that the Town of Chapel Hill keep the banner with the different languages as it is important for inclusivity, but make it smaller so people are not confused when they first arrive on the site. This will help users get a theme for the rest of the website, and increase the clarity of navigation.

We recommend that a student tab/section is added to the home page. This will increase traffic to the website as many of the residents in Chapel Hill are students who want to become involved with the community.