Family Info Hub

A feature to help families find city-sponsored events.

Role: UX Researcher/UX Designer

Goal: Add a feature to a government website

Tools: Figma, Miro

The Family Info Hub and an event search result

Overview

AlexandriaVa.gov serves the city of Alexandria by offering access to services, information on city events, and more. But website visitors say the calendar search function is not user-friendly.

The Problem: Parents struggle to find events to attend that satisfy various needs: e.g., they might need restrooms for newly potty-trained kids or stroller-friendly paths.

The Solution: The Family Info Hub gathers events and activities in one place. It uses an intuitive search process to help residents take advantage of all the city has to offer their children.

City Hall in Alexandria, VA with an American flag
Design thinking

My process is simple and methodical.

I followed up on competitive analysis of similar sites by talking with city residents to identify their pain points and goals.

Then, I gathered and synthesized the data into actionable insights that informed the next stage of the process.

Customer Research Results

I looked at county, state, and commercial sites that help families find events to attend.

Arlington County had a search feature and family website section closest to what I wanted to develop:

  • The search was simple but effective.
  • The family page pulled information from different departments into one location for families to find events.

I also talked to 10 Alexandria residents who have children and have used the city’s website. I asked how they find activities for their children and what pain points they experience in the process. 

Competitive analysis of area event-listing sites

My Findings

AlexandriaVa.gov (1)

Synthesis

I uploaded the data gathered from user interviews into Miro and began looking for common themes. Those themes generated the following:

There are a lot of activities families can attend in Alexandria, but they are difficult to find because the interface isn't user-friendly.

Users want a better way to filter, an add to calendar option, and information about recurrence, amenities, etc. 

Affinity diagram of sticky notes

User Personas and Points of View

Tim and Rosie were inspired by my research and helped me to further understand the audience and the problem. Tim and Rosie are busy parents who want to find enriching, affordable events through the city they can attend with their children.

Question: How might we create a search that better matches users’ mental models?

Answer: Through a feature that pulls all family-friendly city events into one page that makes it easier to browse or search across departments. Additional “child” features include a search with filters to narrow users’ search and the ability to add events to users’ personal calendars.

Task Flows

I thought through how a feature to centralize family-friendly events would work. As a starting point, I considered how a user might accomplish the main tasks of the website–finding a family-friendly event and adding it to a calendar–and created task flows.

Initial Sketches and Wireframes

Homepage sketch and wireframe
Info Hub sketch and wireframe

High-Fidelity Mock-Ups

As a feature, all UI of the Family Info Hub needed to align with the existing look and feel of AlexandriaVa.org.

In moving to a higher fidelity, I added the description of the Family Info Hub to the homepage; decreased space overall to minimize scrolling; and added additional search categories to enable users to tailor their event search. I further reworked the advanced search with toggle tokens to allow users to select multiple categories and locations.

Prototypes and User Testing

User testing at the low-fidelity stage showed that all 5 participants completed both task flows quickly.

  • The majority rated the Family Info Hub easy to use and useful.
  • One participant said that the description of the feature on the homepage was confusing, which I edited as I created high-fidelity mock-ups. 

I updated the prototypes and retested them with 5 participants.

  • All participants completed the two task flows quickly and with 100% success.
  • However, none used the advanced search to find events.
  • Everyone rated the Family Info Hub usable and satisfactory.

Design Iterations

I moved the advanced search criteria to the Family Info Hub screen to increase discoverability. I updated the task flow for the event search accordingly, since there was no longer a need to navigate to an advanced search.

I also:

  • Added more filters to the search results page to avoid overwhelming the user with search options on the Family Info Hub screen.
  • Added the associated tags to the event listing to show which categories it would fit in from the search and added “cultural events” to the category list. 

Conclusion

I learned how to work within an existing design system while finding a way to make the site work better for users. As a government website, AlexandriaVa.gov required a solution that improved city residents' access to the site and events. I did this through ensuring sufficient contrast in my designs, adding the ability to search by free events, and adding location to help users search by neighborhood. 

To further improve this concept, I would retest the first task (finding an event to attend) to see if users continue to prefer browsing or a basic search over a more tailored search. I would also add maps to event listings to help visual learners and those new to the city decide if they want to go to an event.

In the end, user feedback validated my decision to add this feature to the AlexandriaVa.gov site: several participants commented that they wanted the city to implement the Family Info Hub.

Headshot of a woman

Like what you see here?

Let's build something together!