Design decisions: Revamping the Parks homepage

When we launched the new version of Boston.gov in 2016, we knew that we weren’t done. Our plan was always to iterate on what we had accomplished. We wanted to continue to make the website easier to use for all constituents. 

While the look and feel of Boston.gov was much different, there were still some department pages that ended up looking overwhelming based on the amount of services they provided residents. One of those was our Parks and Recreation Department.

There are a ton of great resources available through the Parks and Recreation website. We wanted to make sure we were serving that information up to folks in a way that was easy to understand. To help in that effort, we reached out to our friends and partners at General Assembly. Through the organization, we were able to work with a cohort of user experience students during the fall to take a fresh look at the Parks website and come up with ideas for making it easier to use for constituents. The General Assembly cohort we worked with included Zach Rodriguez, Kalsang Bhutia, and Michael Rodriguez. The blog post below was written by them about their work.

---

Understanding the problem

The City’s Parks and Recreation Department wanted to take stock of their current website and redesign the layout of their homepage. The goal of the project was to allow Bostonians to find information more effectively and efficiently. The department was looking for us to provide a content audit of their site, as well as wireframes and prototypes of a potentially improved version.

We only had three weeks to complete the project, so time was of the essence. Our goal was to produce a redesign that looked and felt like the current Drupal 8 site. We also wanted to make sure the changes were easy to put in place for City staff if or when they chose to do so in the future.

The Parks Department’s primary concern was refreshing the general layout of the homepage to make it accessible for all users of the website. They were also hoping to make navigation easier for their partners, especially businesses and organizations that had an interest in working with the Parks Department. Based on this information, we got a good idea of who our users might be and how to get in touch with them to discover their goals and motivations.

---

Getting a layout of the land

To get started, we needed to gain a real understanding of the client's needs and constraints beyond technology. We also needed to understand the motivations and needs of the users:  Parks and Recreation constituents and business partners.

We conducted interviews with three key groups:

1. Stakeholders in the department
2. General users of the Parks website
3. Past partners of the Parks Department (like vendors)

We didn’t have a clear understanding of the history and importance of various sections on the homepage. To make sure we didn’t come up with ideas that were not actionable, we made sure to stay connected with Parks stakeholders. Among our key takeaways, we found that:

• there are limitations to the changes that can be made on the global elements of Boston.gov
• the current website layout was migrated over from the old site without many changes to the hierarchy, and
• tree maintenance requests and permits were two of the most-talked-about subjects when constituents contacted Parks over the phone or by email.

---

Who are our users?

We recruited our users for interviews thanks to outreach efforts from the Parks Department, as well as through our own networks of park-goers from Boston. 

After conducting our interviews, we created a spreadsheet that allowed us to easily pull insights and label them for our records. We then conducted an affinity mapping session to reveal user insights. Some of the key takeaways from users included:

• COVID-19 made many want to go to the parks more
• users wished there was a better online process to work with Parks and Recreation
• users were looking for information regarding events in the park, and
• users thought the Parks website should separate its content better.

---

Building for the people

Based on the insights we uncovered we built out our three proto-personas and then focused on building for the first two. 

• Jenny: A park-going enthusiast that’s always looking for information on various events in the park. 
• Hawa: A local business owner that would like to work with the Parks Department on a project. 
• Sam: A casual park-goer that doesn’t intend to go to parks but will look up information on them after he visits. 

Knowing who our users were and their goals made mapping out user flows simple. Each user had the same task of finding pertinent information. The only thing that differed between them was the information they were looking for.     

We understood early on that this would be a project that focused primarily on information architecture work. To that end, we carefully selected the research tools and methods that would make the most sense for our project. These included:

• content auditing
• data analytics (via Google Analytics)
• current- and future-state sitemaps
• comparative analyses on other Parks Department websites, and
• card sorting.

Kalsang conducted a content audit on the homepage and combined it with Google Analytics to get a better picture of the traffic and popularity of various content.

The content audit, in combination with a content drilldown from Google Analytics, led to valuable insights on the importance of various sections. These insights either supported what the client told us about how people used their site, or revealed new information.

Zach was able to visualize all the content on the homepage and the internal and external links by building a sitemap. This allowed us to take quick stock of how elements were connected.

Michael drafted an analysis template. We looked into a handful of other Parks Department websites to get an idea of what worked and what did not work as we progressed with the redesign of the client's site.

Key features of websites that were designed for success included:

• simple navigation
• balanced use of imagery, and
• easily located quick links to popular queries.

Unsuccessfully implemented sites had issues like:

• homepages with seemingly infinite scrolls
• too few or too many navigation bars, and
• a poor balance of images and information.

Once we gathered all our insights and completed our sitemap, we were in a good place to figure out how best to organize our information. We had to also keep in mind caveats for items that needed to stay where they were. 

Michael conducted a card sort that allowed users to sort elements from the homepage into different categories that made sense to them. We received a handful of responses that showed clear associations for many of the categories. There were, however, a number of elements that were difficult to gain a consensus on. 

---

Turning our ideas into a design

We conducted a design studio that allowed the three of us to:

• share our various design ideas
• condense the common features, and
• hash out the areas we disagreed on.

We all agreed on the creation of separate webpages for:

• events
• specific park information, and
• business partnership information .

This reflected the important information users had prioritized in our research findings.

Zach reviewed our design resources from the City’s Digital Team. We created an easy-to-reference style guide to follow as we built out our wireframes. Keeping in mind colors, typographic hierarchy, and language, we made sure that our designs felt as much like the City of Boston as possible. We used this heavily as we moved on from our low-fidelity wireframes to our higher fidelity prototypes.

We conducted our first round of usability tests with a low- to mid-fidelity wireframe. We asked users to complete the following tasks: 

• find the events page
• find the park-specific event calendar, and
• find the resources for working with the Parks Department.

At the end of the test, we asked the users follow-up questions as well as for any general feedback that they could give us. Here’s a breakdown of our results and insights:

While users were able to complete the tasks we set out, it was not always easy for them. We received consistent feedback that:

announcements at the top of page were a distraction

• anchor links were not visible enough
• there were too many clickable links, and
• the scroll was very long.

---

Building with our test results in mind

For our mid- to high-fidelity prototype, we took the feedback we received from the first round of tests and tried to address the concerns within our constraints. Because we were building a department homepage for a larger government site, there wasn’t much we could do about the navigation style or the announcements. We resorted to removing anchor links and placing sections within other pages.

We took another crack at it with a second round of testing before we made any final changes to present to the client. 

Most users finished their tasks much more quickly during this round of tests. We did, however, receive feedback about the same issues experienced during the first round of tests. Here’s a breakdown of our results and insights:

We placed the anchor links below the Parks and Recreation header and above the large COVID-19 announcement to make it more noticeable. We reduced the list of sections even more by moving less relevant information under the about page. We also made sure to condense our events and news sections on the homepage.

With those changes made, we presented our final designs to the Parks and Recreation Department. We hope that our research and insights will help the department build a more accessible website for City residents and its partners.

---

General Assembly offers accelerated courses for in-demand skills in tech. The students we worked with were part of the Fall/Winter 2020 User Experience Design Immersive. Their work on the City of Boston’s Parks and Recreation Department website was a final project that they completed over three weeks. The students who took part in the project were Zach Rodriguez, Kalsang Bhutia, and Michael Rodriguez.