Identifying the root cause
The seattle.gov homepage is visited by 77,300 residents every week on an average. According to usability studies
conducted by the city in the last year, residents have reported experiencing fatigue and confusion
looking for information on the city website.
The website content is currently organized based on the internal departments existing in the
The residents are unaware of the departmental structure within the city government and so the navigation
experience is not intuitive for them.
Residents miss out on beneficial resources offered by the city because relevant information is
not easily discoverable.
Current experience: Department based navigation
Structuring the navigation based on the mental model of the residents of Seattle will make it easier
to find information and services on the city’s website and contribute to a good experience.
What makes a Seattle resident?
To rethink the taxonomy it was important to understand the resident’s mindset when they land on
the website. Based on past research we know they came with a goal in mind and this goal differed
based on the type of resident. To make sure we capture all needs we took a personified approach by
consulting the personas previously created by the team for city residents.
Affinity mapping helped consolidate the information from our research and resulted in
8 high level themes which were the foundational categories of the new navigation architecture.
Affinity mapping to define high-level categories
First draft of the sitemap
Putting the sitemap to the test
It was now time to test if our sitemap accomodated the mental models that the residents
have when they come the city's website with a goal. We used userlytics to perform
unmoderated usability testing with participants from each of our persona segments.
Card sorting x 10 participants
Tree-jack testing x 9 participants
Testing with low-fidelity prototype x 6 participants
Card sorting via Userlytics
Before each exercise, I suggested we ask the participants what each category means
to them and what they think they might find in that category. This helped us understand their assumptions
about the terminology detached from any bias that our card sorting/prototype might put forward.
Changes after feedback
Government Help was the default choice for participants
who did not know where to place a card. To be more indicative of its actual content of discount
programs, it was changed to Government Aid.
We realised that Data and Research did not have much chance of being used by the average resident
and eliminated it as a high-level category.
Learning and Education & Transportation & Development were two new categories I pushed
to add as they were prime concerns for multiple participants when asked what they would
expect to find on a city website.
Highlights of changes after multiple rounds of usability testing
By audience or by topic
While categorizing, the “by audience” approach seemed more in alignment with the city personas. However, we often ran
into a situation where a resident could identify with multiple audiences. Therefore, we decided to go further with the “by topic”
navigation model while the “Information by audience” as a subcategory instead.
Different navigation models
Latest sitemap for seattle.gov
We had to incorporate the new and much larger sitemap on the website. We
hoped to enable the residents to accomplish their goal without being overwhelmed by excessive choice.
Updating the website design
Once we had a good hold on the taxonomy we started brainstorming ideas for appropriate
navigation elements to improve the UI. We went through the first round of sketches to
showcase our ideas and vote as a team. We concentrated on three key design areas in our
DESIGNING A MEGA MENU
The taxonomy that we had come up with had 8 top-level categories that had multiple sub-sections. To
accommodate this structure, a mega menu was the top solution that each of us sketched iterations for.
STRATEGIC PLACEMENT OF TOP TASKS
Since the taxonomy was fairly comprehensive, the team thought it would be a good idea to highlight the
top tasks of each category.
AGGREGATE PAGES TO CONSOLIDATE SIMILAR INFORMATION
These pages would serve as the hub for a set of similar services that span across departments and are united
by a goal or a particular audience.
PROTOTYPING AND TESTING
Fleshing out the solution
Next, we recruited residents that qualified as any of the city personas to try out the new navigation. We
ensured that each persona was represented in the participants. We conducted 12 moderated in-person usability
Usability testing session with a community advocate persona type
NEW DESKTOP NAVIGATION
The mega menu is the primary navigation that houses the sitemap. Apply and pay,
Information by audience are two categories with dropdown navigation outside of the mega menu.
In the mobile view, the mega menu transforms into a nested hamburger menu with all eight categories.
UXpin prototype as handoff for implementation
I created an aggregate page which collects all information on city resources for learning & education. These pages are also linked through the mega menu.
A human-centered navigation
The results of the usability testing showed improved time on task metrics and a much more intuitive experience
looking for information. After discussions with the departments and sharing the results the roadmap for the first
implementation of the new redesign has been set.
Through this project, I got an opportunity to work on information architecture at a large scale.
I learnt to design for equal representation of multiple target users i.e Seattle residents with
As a next step, I would track user interaction with the website and do further
usability testing to iterate on the design.