How to transform a government website to be user-friendly? Arlington County website UX case study

We usually visit government websites to make quick transactions or to find specific information. However, government websites tend to have tons of information that are not necessarily relevant to the primary users of the website, residents, businesses, and government employees. That’s being said, a government website should have all the information that is supposed to be available to the public, because someone at some point will need to have access to it.

So the question here is, how do we restructure a government website to make it practical enough for everyday individual and business use, and at the same time, intuitive enough to allow other types of users to navigate the website and get the information they need through self-help?

This was the question my co-designer and I were facing when we started working with our client, Arlington County.

The Client

Arlington County in Northern Virginia is known to host a significant number of the National landmarks such as the Pentagon and Arlington National Cemetery. The County is one of Virginia’s fastest growing counties that is known to be innovative and diverse. The most majority of Arlington residents are highly educated. Arlington is also known to have a huge number of National Parks.

The County had a huge development to their website 5 years ago. And since then, the website had never been changed. While being functional for most users, the county employees reported residents frustrations with website calling it hard to navigate and in need of an update that reflects Arlington unique identity which is represented in three words, intelligence, innovation, and diversity.

With these concerns in mind, my co-designer and I, drafted a research plan to tackle the major issues with the website by utilizing a user-centered approach in a two-weeks design sprint.

Our Process

We started by defining our goals and objectives. Our goal was To redesign Arlington County’s website, focusing on improving usability, transaction-focused content, making it modern, engaging, and provide quick access to most commonly accessed content which should increase the community’s ability to “self-help”.

In order to achieve this goal, we realized that we need to do more than just research and visual design, we need to work on the information architecture (IA) of the current website. We aimed at delivering three major deliverables: global navigation informed by research and IA, landing page visual design informed by user research, and strategy recommendation and next steps for our client.

We adopted a simple UX design process that is heavy on iteration. Below is a graph of our research and design process.

Research

Our research process included four major methods, competitive analysis, contextual inquiry, information architecture, and analytics. Each method helped us gain insights and informed our design decisions in a different way. Although we had a very tight schedule, we realized that redesigning the current website required much more than just scratching the surface. We had to go deeper in order to understand the problem from different perspectives.

Competitive Analysis

It is always important to see what’s out there before making design decision. We should not reinvent the wheel every time we redevelop a website. Competitive analysis allows for comparing and contrasting the good and bad in every website. It helps us see what seems to be working and what does not work. We visit different websites as regular users and examine their navigability and usability to determine the most user friendly practices and implement them in our design.

We decided to look for government website in the DMV area and the most user friendly websites based on evaluation websites. We examined a total of 10 websites. We evaluated their landing page, global navigation, and navigability. Below is a table representing the top four user-centered featured and the websites that implement them.

we also find that the most common categories in the navigation bar are:

Contextual Inquiry

To get a deeper understanding of the real users’ problems and needs, we conducted in-depth interviews and usability testing of the current website with Arlington residents and businesses. We also extended our research to include residents of the metropolitan area. The interviews and the usability testing were conducted at the same time. They were contextual inquiries rather than separate research methods. This method allowed us to record immediate verbal and non-verbal feedback from the real users regarding their frustrations with the website.

We asked our participants to do some of the most common tasks through the current website while observing their interaction with it. We asked them some questions regarding their experience prior, during, and post the usability testing. We also asked them questions about their existing approaches in using the website (See below).

Our participants reported some frustrations with the current navigation bar. They also complained about the amount of information on the landing page as well as the global navigation. Below are some of the most noticeable quotes that we thought represented our participants major pain points.

Findings

Through our contextual inquiry, we were able to capture some trending themes that seemed to be recurring in our data and across participants. Most of these trends were related to navigation issues which turned out to be our major theme.

We were able to also capture our participants primary uses of the website which are reprensented in the following heat map.

After looking through our findings, we decided to put together a couple user personas to help guide our design decisions. User personas present a synthesis of the major trends we found through research. They do not represent a specific user, but rather, a combination of users.

Most of our participants were either young professionals, or retired individuals. Below are two personas that represent our findings.

Information Architecture

The global navigation of the current website seems to have tons of categories that are not necessarily relevant to everyday user of the website. Categories like environment and transportation, are not of that significance to residents who visit the website to find information or complete a transaction. In order to restructure the global nav, we conducted a series of card sorting with a total of 10 participants as well as the researchers themselves (us!). We ended up having different ways of grouping that seem to have some commonalities. We decided to narrow down the number of tabs under each category to 4 or 5 top services and resources and a link to the respective page which will allow the user to navigate further information. Below is a picture of the IA in early stages.

Website IA in early stages

Analytics

While qualitative research and usability testing were helpful in giving us immediate and thorough insights through our participants, quantitative data that can be captured through analytics can provide another perspective of users’ interactions with the website. Using Google Analytics and Crazy egg to monitor users’ behavior complemented our qualitative findings and allowed us to make research informed decisions about website navigability. Below is a report of the top searches and webpages used on Arlington County website in 2018.

Google Analytics report

Also, Crazy egg helped us understand our users’ behavior when navigating the website.

Crazy Egg: Users tend to use the search bar very often

So What?

What did we get from this research? We were able to make some confident decisions based on the common trends we found in our multi-method research process. Based on the primary uses of Arlington residents, professionals, and businesses, as well as the results from the analytics and information architecture, we decided to add some features to the homepage to reconstruct navigation and make the primary uses prominent and accessible to the stakeholders.

User-Research Informed Decisions

1.Adopt a user-centered global navigation that emphasized our users’ primary needs

2. Add a prominent search Bar at the center of the homepage to allow users to navigate to their needs with the least possible effort.

3. Add quick links to the top of the homepage where the user can see them as soon as they land on the page. Quick links were determined based on findings.

4. Prioritize community events and live feed.

5. Adopt a modern design (full width) that reflects the brand of Arlington county as intelligent, innovative, and diverse community.

Design

Building on our design decisions, we started sketching some user flows and paper prototypes. Our main concern was reconfiguring the landing page to make it more intuitive and easy to scan. The pictures below show our rapid prototyping and iterations processes.

In the first and second stage, we had a big hero image with only the search bar in the middle of it, but the question was, does the primary user really care about that? The answer came through our usability testing, “NO! I need to pay my ticket and leave!”. Big hero images seem to be more appropriate for tourist websites rather than transaction and information based government website.

“Quick links are great!” a few of our participants said. However, they are further down on the landing page. We decided to make them more visible. Maybe connected to the hero image. “This is a little bit too much!” multiple participants said! Well, ok maybe it is too much. Let’s move them down a little bit and make the hero image smaller, because really who cares about a beautiful, huge, hero image on a government website?!

As seen below, we built our participants’ primary uses in the landing page. One of our users primary uses was community events or calendar. We decided to add it right under quick links. The business center was a late feature that we decided to add as we encountered more businesses and property managers who used the website on daily basis and struggle to locate the information and services they look for.

The following picture shows the final prototype (left) that we tested and the iterations completed (right).

Final Mockup (Mobile)
Final Mockup (Desktop)

What did we learn?

Users of government websites do not visit the website to read the news or to read about the latest environmental agreements! They usually have very specific needs that they wish to accomplish in a timely manner with the least effort possible. How do we make that possible? by giving them what they want as soon as they land on the home page! Our final mockup has been tested and validated to have met our primary users’ needs. We were able to validate our new global navigation and turned out it was intuitive enough and reflective of user’s expectations. This mockup wouldn’t be possible hadn’t we conducted extensive research on our primary users. With that being said, Arlington County website still needs more attention to its information architecture. Below, we discuss some of the recommendations we gathered through our research and usability testing.

Recommendations and Next Steps

Partially Integrate All Arlington Affiliate Websites

  • To decrease user confusion when links lead to another website.
  • Our suggested solution is to provide clear calls to action on the affiliate website to return to arlingtonva.us if any links are external.

Fix Broken and Inconsistent Deep Navigation

  • User frustration increased because their global nav appeared inconsistently.
  • We believe this to be an essential solution to the redesign of the website.

Business Recommendations

  • The website should be optimizable for business use.
  • We strongly suggest committing research to an Arlington County Business Portal, enabling businesses to tailor the county website for their specific use.

For more information about this case study, email me at: almalkishoaa1@gmail.com

I’m a UX Designer with a background in communications and cultural ethnography.