OpenGov Navigation

File Under: Product Design, Application, UX/UI, Information Architecture, OpenGov.

As any organization grows and new products are planned and added there comes a time when you have to reevaluate some of the solutions that are currently implemented. A major one faced at OpenGov and one that has been brewing for a bit was an issue of the scalability of our current implementation of our navigation. Foreseeing a point on the horizon where our navigation would break, I led an effort to investigate our current structure, what was being done in our industry, and what our options were. A lot of this revolved around taking a hard look at what navigation looked like in our product. How do users get to pages in our apps? How do they navigate those pages? What are their parts? There were two major components to this project. First our site map and navigation structure, going from page to page. And second, page hierarchy and how users move through a single page.

opengov point map

Analyzing OpenGov

The first portion of this task was to take a look at what we were currently doing in the product. I mapped out our site first by just clicks levels. Then, I tried to create a taxonomy of pages and page elements, looking for the rational and what could be consider a similar type of page. Finally I looked at how we organized information and navigation on the page, find what patterns and components we were using, and if there was any logic to how those were used.

Site Depth

This exercise was to get a handle on how far away a user is from the most popular tasks in our product and also helped me see on a macro-level what kinds of pages we had.

opengov point map
opengov point map

Analyzing Structures

I then took the information from the first exercise and created more of a mind map for how a user might think of navigation through our app, how deep something was but also what was the parent to that page and how did it surface. Especially for things like tools or sub-applications, they surfaced in a multitude of ways.

opengov point map

Current Patterns

I went back looking to create a taxonomy the components we use to navigate our site and where those components were used. There was a lot of inconsistency, especially when a user arrived into an application and was navigating a page’s first level of hierarchy.

Competitive Analysis

To get a sense of what our customers might be familiar with and the general industry standards, I took a look at 18 competitors. Because GovTech is still a burgeoning industry, I included other similiar B2B industries that perform similiar operations. I took a look at both site navigation and page structure (or navigation within a page). The patterns are summarized into number totals.

Observations + Analysis

When you examine the left-hand navigation structure, you tend to see these products offering 10 or more options. Because of the amount of content in them, they have to be a fairly large width resulting in a distracting visual effect. The amount of page real-estate they consume leads most of the competition to hiding them. This is done in 2 ways, fully hiding it and showing it with some kind of menu button, or having a very reduced option show and reveal the kitchen sink on hover or click. With the exception of a one competitor, all the sites are using full words to describe their products, most of these products do complicated or abstract things that icons just can’t describe in a meaningful way on their own. When icons do appear they are supplemental to the text.

Vertically bisected pages feel less connected than horizontal ones because hierarchies have a natural top to bottom pattern. So the vertically slicing function less like site-wide visual anchor and more like a separate and competitive part to the page.

Top horizontal navigations are either taking advantage of a smaller amount of site content or are making better organization choices. Some use a dropdown to reveal secondary choices, the user experience on this is reminiscent of desktop software as that is largely the paradigm there. Some sites have it persistent, some have it scroll.

Sites Analyzed

The sites I looked at fell into 4 categories where we felt we aligned best.

GovTech

1

CRM + ERP

8

BI Analytics

7

Government

2

Main Navigation

Navigation to a single application or a product line. Usually the first choice a user confronts.

Top

8

Left

8

Multiple

2

Secondary Navigation

Navigation to a single application or a sub-product in a line.

Dropdown

2

Left Panel

5

Overlay

3

Modal

2

None

7

Multiple

4

Page Navigation

Navigation of elements within a page. Also referred to as secondary.

Top Tabs

10

Left Panel

11

Dropdowns

2

Modal

1

Multiple

4

Component Navigation

Navigation within a page component. Also referred to as tertiary.

Top Tabs

6

Left Panel

3

Dropdowns

8

None

3

Multiple

2

Standardizing + Testing

The next steps required both investigating our information architecture of applications and looking at a standardized page structure and page navigation. We looked at what we currently had, what we new we would have to account for and how we could organize it. Through iterations and customer feedback we came up with a proposal for the structure of the product and a taxonomy of page types.

opengov point map
opengov point map
opengov point map
opengov point map
opengov point map

In tandem, we took some of the patterned we currently used and some of the ones revealed through research and created 5-6 directions for the page hierarchy. We then created click through mocks of our application for each of those directions and tested them with user. Learning what worked and what didn’t and also what would scale for us and how those decisions would affect the page overall. Ultimately we came to a conclusion which will debut at towards the end of the year!