VILLAGE OF PORT WASHINGTON NORTH
Port Washington North is a village on Long Island, New York, fronting the Manhasset Bay, and home to more than 1,300 residents.
SUMMARY
This project was a complete overhaul of their current website which had not been updated for years. Despite all the cosmetic problems I needed to address, the site’s terms and navigation caused confusion for users, and it lacked accessibility features.
TOOLS & METHODS
Card Sorting, Trello, User Interviews, Affinity Wall, Google Forms, Data Analysis, Personas, Storyboarding, Competitive Analysis, ADA compliance, Lo-Fi Wireframes.
TYPE
Volunteer, Collaboration with Web Designer, UX Research & Design, Information Architecture, Content.
CHALLENGES
Based on collected data:
Users aren't sure where to start when looking for desired information
Even if a user is able to find what they are looking for, the next step contains multiple pain points and inconveniences
Confusing terminology to the average user
Based on Section 508 (accessibility & ADA compliance standards) and on standard web conventions:
Broken and unnecessary links
Finding any information violates the 3 click rule (users should take no more than 3 mouse clicks for user to find what they are looking for)
Lack of accessibility regarding text size and color options
WHAT DOES SUCCESS LOOK LIKE?
I interviewed the Mayor of Port Washington North to understand what success would look like after the redesign launched. The Mayor listed the following:
Making forms and permits fillable online so there is less traffic at the village office and less phone calls to other departments
Keeping all information on the site up to date and relevant
Receiving less personal phone calls from residents asking for information that should be present on the website
Improving overall navigation and appearance
PROCESS
CARD SORTING
WHY: I first chose to conduct open card sorting to find out what terms should be grouped together on the site, and what terms are confusing to the average person.
HOW: I held 5 sessions; 3 were moderated (blue background) and 2 were unmoderated (grey background).
"Anything with a form, or something that you need to fill or print out, should be together."
User 1
"Education as in schools and policies, or just general educational information? This term seems really vague to me."
User 2
FINDINGS:
All participants grouped Forms and Permits together, and Town Hall Meeting Notes, Agendas, and Dates together.
Most participants created some sort of recreational/around town/visitors list for terms like Local Events, Local Shopping, Bay Walk Park, and Map of the Village.
Participants had trouble understanding what FEMA, Water District, Public Works, Sports/Recreational Information, Education Information, and Zoning Map meant, and where they should go.
SUMMARY:
It seemed like the average user not only had trouble interpreting what certain terms meant, but also what kind of information that tab would have. For example, one participant had no idea what a Zoning Map was, and another participant didn’t know what kind of information Public Works would contain.
USER INTERVIEWS & AFFINITY WALL
WHY: Next, I held user interviews with 2 village residents to create an affinity wall and gather user quotes, observations, and inferences to identify pain points.
HOW: I created a semi-structured interview script with about 10 open ended questions and multiple follow up questions. Each interview was about 30-40 minutes.
KEY ISSUE 1: Users may not know where to go to find information.
It seems like the number one issue for users is that they cannot easily locate the information they are looking for based on the tab names.
The word “intuitive” was mentioned many times by the two users, as in “the website is not at all intuitive.”
There are no instructions or directions for many things on the site, such as permits and forms.
Users do not know where to find what they are looking for, and there are no guides to help them even if they could find that specific thing.
As one user mentioned, "someone who actually works in the village would likely be able to accomplish their task easier because they understand the terminology on the current site." However, to the average user (residents of the village), this would likely be a lot more challenging.
The site should have easier navigation so even a very confused resident would be able to easily find the information they are looking for.
KEY ISSUE 2: Users are inconvenienced when trying to accomplish a goal.
If a user is able to find what they are looking for, the next step contains multiple roadblocks. For example, permits cannot be filled out online, and instead a user has to download the document and complete it in word, which is not very user friendly, or drop off their form to the village office in person.
Users mentioned that if they don't understand how to do something on the site, they will find an official/contact to call (the mayor, department head, etc.) to help them. This is an extreme hindrance on the user flow.
One user found that there is no way to submit a permit or form online, and once again, the user is inconvenienced and has to drop off any paperwork at the village office instead.
It seems like there is no easy way for a user to stay on the website and complete a task without running into any issues. "A frequently asked questions section could be a really good way to combat this issue and address all possible questions on the site."
SURVEY
WHY: Next I sent out a survey to find the typical age of users, why they’re visiting the site, if it is easy or difficult to find specific information, and what feedback they have for the site altogether. It's important to understand WHY users are visiting the site so we can make that information most apparent.
HOW: I asked 7 questions, 3 of which were demographics, and the other 4 were aimed to gather more specific information. I then analyzed the 20 responses to come to conclusions.
DEMOGRAPHICS
QUESTION 1: IF YOU HAVE EVER VISITED THE VILLAGE WEBSITE, WHAT INFORMATION WERE YOU LOOKING FOR?
USERS ARE MOST LIKELY LOOK FOR:
Village news or announcements
Just browsing the site, not looking for anything specific
Village hall meeting agendas, notes, and dates
Village hall hours and address
Contact information of village officials
Permits and forms
Local events
USERS ARE LEAST LIKELY LOOKING FOR:
The village history
Photos
Financial information
Environmental information
RECOMMENDATION 1:
According to this data, history, photos, and financial and environmental information should have less prevalence on the site. This contributes to the clutter users see initially and will make finding the information they want more challenging. By putting emphasis on village announcements, news, meeting data, address/hours, contact information, permits/forms, and local events instead, users can access that information more easily.
QUESTION 2: WHAT PROBLEMS HAVE YOU ENCOUNTERED ON THE SITE, IF ANY?
A large chunk of users, about 40%, said they encountered no problems, however, the same percentage of people commented that the information they found was outdated. 35% of respondents said they couldn't find the information they were looking for, and that there was no search bar to help.
A small percentage of people commented on the abundance of broken links and that the colors of the site were difficult to read.
RECOMMENDATION 2:
Make sure content is relevant and recent, and incorporate a search bar function so users can explore the site with ease.
QUESTION 3: DESCRIBE YOUR EXPERIENCE WHILE FINDING THE INFORMATION YOU WERE LOOKING FOR- HOW CHALLENGING OR EASY WAS IT?
Of course, users sometimes THINK they know what they want (ex: “I want a bright blue button” probably means they just want that button to be noticeable and prevalent) so it's important to consider this data, but not blindly follow it.
With that disclaimer out of the way, many users did mention that they had trouble with the current navigation and that they couldn’t find specific information, which seems to be a reoccurring issue. Others commented that permits and forms should be filled out and submitted electronically, instead of in a word document.
RECOMMENDATION 3:
Along with most of the other data at this point in my process, these responses conclude that it is essential to label tabs correctly, and to readjust how permits and forms are filled out. To make that process easier, Port North should make all forms fillable online.
PERSONAS
WHY: As always, it is important to keep users at the center of the research to develop accurate solutions based on their goals, needs, and frustrations. HOW: Using Sketch, I made 2 personas that best fit the target user of the Port North website. I included demographic information, goals, frustrations, and current technology knowledge for each.
COMPETITIVE ANALYSIS
WHY: Next, I analyzed other villages’ websites to see what they were doing well (and not well) so I could incorporate those findings into the Port Washington North website.
HOW: By simply scanning other village sites and considering design standards, I could see what worked well. Some other sites I considered were Roslyn, Manorhaven, and Flower Hill. You can check out the sites below:
FINDINGS:
Flower Hill and Manorhaven both incorporate an accessibility plugin that allows users to adjust the text size, site colors, identify links, and allows a blind user to tab through the website. This is certainly needed on the Port North site, especially since they are a government website.
Roslyn does a poor job of making tabs clear and concise, as they have multiple layers on their drop-down menus. This is a good example of what not to do on the Port North site. Instead, the site should only have one layer of tab drop-downs to clearly show all the options to the user.
Additionally, all of the sites have a good bottom bar, with contact and location information, which the Port North site currently lacks.
REDESIGN & RESULTS
I worked directly with a web designer who made the changes you'll see below, including its design, typography, colors, and any animations necessary. The accessibility plug-in was also added. My research directly impacted these changes and the new site is now live!
This part of my project required a lot of communication with the mayor and other town officials to determine what content should stay on the site, and what can be removed to decrease clutter.
NEW HOMEPAGE
Based on my the card sorting activity, I was able to create new tabs that made more sense to users. The number of tabs went from 20 to 7. The village contact information is now clearly up top, there is a Covid call to action, and an accessibility plug-in that will allow users to adjust the site to best fit their personal needs.
QUICK LINKS & ANNOUNCEMENTS
Based on the user interview findings, I found that these 8 sections would be utilized the most by users: permits & forms, schedules & rules, upcoming meetings, reporting issues, new projects, village court, emergency management, and villages finances & taxes. Now, with the new site, users barely have to search for the information they most need because it is right here on the home page.
EMBEDDED CONTACT FORMS
After figuring out that residents often contact the mayor or other town officials with questions and concerns, we decided to create two forms that would address these issues. First there is the quick contact form where people can put in their name and email, and select which department their question falls under. If they are not sure, they can always select the General Inquires option. On the back end, this widget allows the correct village employees to receive the questions related to their role.
The second form is for reporting concerns regarding trees, sidewalks or streets, like potholes or a dangerous tree after a storm. The form asks for their name, email, street address of where the concern is, the type of issue, and any comments they have.
The goal of the forms is to reduce the number of personal phone calls the mayor receives about these issues, and eliminate having to contact the correct person himself. Hopefully this system will help the village stay organized with important issues while making the residents feel good about being proactive.
FOOTER
Contact information, such as the village hall address and phone number, and social media links were added to the footer. Previously, there was nothing helpful at the footer. This is now more similar to other village websites.
NEXT STEPS
ADDITIONAL CARD SORTS
Card sorting was done with convenience sampling (I used friends and family) because of COVID-19! As a next step though, I would conduct additional card sorting with more realistic users based on people who actually live in the village AND use the website.
MORE USER INTERVIEWS
I would conduct interviews with at least 3 more people to gain more insights and user quotes for the affinity wall.
IF COVID-19 DIDN'T EXIST...
(There are many, MANY things I could put here but related to this project...:) If COVID-19 was not happening, I would briefly interview residents around the village for insights and comments about their thoughts on the current site.
Additionally, I would conduct in-person usability testing on the current site, and on other village's sites, to more clearly see what aspects are strong and which are weak.