What follows is the case study for my fourth and final client project at General Assembly.
A lot can happen in five years, especially in the tech world. A five year old smart phone can feel ancient in your hands if you keep up with the newest models.
Five years ago, Arlington County refreshed her resident-facing public website. It fixed a lot of problems and was a decent website for a lot of people. It still is to some extent. However, the tech world is a rapidly changing environment and the opportunity for improvement arises often. We at General Assembly were happy to work with Arlington.
After reading the brief for the first time I figured we had our work cut out for us.
Arlington County is in the process of a complete website redesign with a focus on improving usability for our customers (all those who live, work, and play in Arlington) and providing a transaction-focused content approach. We’re looking for a modern, engaging design and user interface that makes it easy for customers to quickly find our most commonly accessed content.
As with most things, the redesign proved to be more complicated than we had previously assumed.
As UX designers on this project, I was Project Manager and Information Architect, and my teammate, Shoaa Almalki, was Lead Researcher and Visual Designer. As usual, our UX process consisted of strategizing, research, ideation and design, prototyping, and iteration upon iteration, handing everything off along with our product recommendations and next steps.
In two weeks, we were to provide Arlington County with a foundation of a style guide and prototype templates for both web and mobile backed up by research.
To gain a comprehensive understanding of the existing website and the current landscape of government resident-facing websites, our research was conducted in multiple stages.
- Discovery and Competitive Analysis
- Contextual Analysis and Interviews
- Information Architecture
Let’s start with discovery.
After viewing the project brief, we began preparations on the interview with our stakeholders, the Team Lead of Design and Web Services and a few of her colleagues. We did an initial competitive analysis of other prominent government websites.
We charted this out initially for the stakeholder meeting but of course we kept it in mind throughout the project.
I then prepared the questions we were going to ask of them to gain a clearer understanding of expectations and gain a little more information about their ideas and progress thus far. Key themes of our questions were…
- The identity of the the county
- The existing website
- Their hopes and dreams for the refresh
From our discussion with the stakeholder, we discovered these main elements…
- Arlington County prides itself in three main themes: diversity, intellect, and innovation. We crafted a personality for the county, allowing us to make informed design decisions on the refresh.
- The existing website at arlingtonva.us is functional. However, the most common complaints they received included that it looked old and that information was hard to find.
- Their hopes and dreams for this sprint were that we provide them insight on users’ primary uses, modernize the website, deliver some templates of the common pages, and provide informed visual design elements they could carry over to the new website.
Contextual Analysis and Interviews
We really wanted to focus on real user centered design, not just potential user-centered design. Luckily, we had the real user-base (Arlington County Residents) at the tip of our fingertips and a few metro stops away.
We connected with fifteen participants through our own network and through our own guerrilla efforts on the streets of Arlington. They consisted of eight men, seven women, age ranging from 30–50. Their occupations ranged from student, to professional, to retiree. 10 out of 15 were Arlington residents.
For the contextual analysis we had each participant run through four primary tasks on the existing website, covering a range of different paths.
- Pay a Parking Ticket
- Find a Park Near You
- Find a Library Program Near You
- Report a Problem to the County Board
For the interview we asked each participant these questions.
- What are your primary uses?
- Describe your overall experience.
- What are things you didn’t like about the website?
- What are things you would improve about the website?
- What are things you liked about the website?
This resulted in some great key findings and quotes.
“It’s just hard to find the information you need. I had to ask for help. Someone had to walk me through it, and even he was having problems helping me navigate through it.”
“It’s just so hard to remember the path that I took.”
“It’s a lot of information coming at you at once, so it’s hard to filter through and sort through.”
Most Common Problems and Observations
- The navigation is inconsistent, confusing, and overcrowded
- The home icon doesn’t always lead home
- Users often asked if they could just use the search bar instead
- The top nav bar is oversensitive and the hover feature was hard to use by both young and old users
We discovered the primary uses, which are depicted below.
Arlington is a very economically diverse county so we developed these two personas out of our interview data.
To stay focused, these are the two types of people that we were designing for during our two week sprint.
This user journey map displays a simple process that is hindered by outdated design and crowded web layout.
Information Architecture (finally)
Like I said before, the website is functional, especially for people who have a little more time on their hands and are used to sifting through more information. Most of the problems we witnessed in our contextual analysis revolved around information architecture, within the main pages and the navigation. Not to mention, our stakeholders at Arlington expressly requested we provide recommendations on a reworked navigation and web layout prioritization. Therefore, I spent a considerable amount of time on IA.
I conducted 10 open card sorts with all 54 existing subcategories. I asked each participant to group all of the cards in as few categories as is reasonable to them and then to provide a name for each category. The purpose of this was to discover how people grouped all of the terms in the context of a government website and to hopefully discover a smarter way to organize the navigation.
I then organized the common groupings on Miro.
Finally, in the culmination of all these tedious work, we though we had found the solution…Adding more subcategories!
It was an ambitious move and we wanted to test a few other options first. And then we met with our stakeholders and emerged with a better solution. Trimming the navigation and prioritizing subcategories, removing those that are hardly used.
Arlington gave us access to analytics of the most commonly accessed pages and common searches.
We want to answer the majority of users’ questions and give them what they want as soon as they open the site. Our takeaways from our interviews, information architecture and analytics:
- Adopt a user-centered global navigation that emphasized our users’ primary needs: Residents, Business, Government, Parks and Rec, Online Services, and Connect.
- Add a prominent search Bar at the center of the homepage to allow users to navigate to their needs with the least possible effort.
- 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.
- Prioritize community events and live feed.
- Adopt a modern design (full width) that reflects the brand of Arlington county as intelligent, innovative, and diverse community.
Ideation and Design
We sketched a paper prototype as a foundation and my teammate, Shoaa, ran some early stage usability tests in Arlington on it to validate the layout.
Because of the sprint nature of this project, we spent most of our time on research and how to progress rapidly through design stages Mid fidelity wireframes shown below.
While I was working on wireframes, Shoaa brainstormed some visual design ideas for the layout, colors, and quick-link design.
We designed a landing page (web and mobile), a parks page, and a generic content/article page.
Finally, we ran usability tests on our first iteration of the final prototype. We ran the test on six people, five of which were Arlington residents.
Key findings from this test were…
- Colors are dark and monotone
- Navigation was validated (design and information architecture)
- Page hierarchy was validated
- Global nav is big
- Conventions for parks’ events is to be to the right side
- The divider line was too thick
- Pages were not different enough, but moving the events to the right side fixed that problem
- Formatting of the text wasn’t aligned.
- The article title was moved to above the article image.
- The text was hard to read, so paragraph spacing was increased.
For handoff, we provided a style guide for reference.
Our color choice was well researched and chosen to reflect the identity of Arlington. Blue signifies trust and communication. Orange signifies vibrance and intelligence. Remember we set out to design a website for a county that is diverse, intelligent, and innovative.
Next Steps and Recommendations
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 there global nav appeared inconsistently
- We believe this to be an essential solution to the redesign of the website
- 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
As my last project at General Assembly, this project felt momentous. And indeed it was. I threw myself into this journey and had a great time at it. I learned a significant about the UX process (such as how important research on the authentic user is for a truly informed design) as well as about myself (that I can trust the process and a beautiful product that I am proud of will emerge).
I look forward to more challenging projects in the future and a fruitful career in UX. I want to thank my teammate, Shoaa, my classmates at GA, and of course my dedicated instructors, Zach and Javi.