When we launched the new CharlotteObserver.com last summer, there were four options available on our /contact form: contact the newsroom, advertising, subscribe, and report an issue. Anything else was handled in the top area of the header I call the “tri-nav” or simply not addressed.

The old form with lots of options.

Fast forward 10 months, and more departments in our company want more and direct access from the site rather than via this proxy. We also have a new partner that allows our readers to manage subscriptions online.

This is good, but the number of necessary contact points had grown. The tri-nav became unwieldy. And one of the site’s most important functions — being available for our readers — started becoming hard to use.

The old tri-nav.

So, today we launch a more focused tri-nav, division pages, and forms. They’re all available on CharlotteObserver.com right away.

For those of you who simply like things to work, we hope you like the changes better. For people who like to know how and why, like me, here’s how we came to the decision.

First Steps: Product Work

Much like the cliche, the first step is admitting you have a problem. The biggest decisions from a usability perspective were:

• Did we really need all those options? (A qualified yes — some were eliminated.)
• Does “Reader Services” make sense? (Not completely.)
• Should “Contact Us” be the primary listing? (Yes.)
• Should each division have its own section? (Yes, but all should be available on the contact page.)
• Should multiple forms be created to give better extensibility? (Yes.)
• Should we better use the space called “Print Edition” in the tri-nav? (Yes; it was moved under the “news” main nav heading.)
• Should we use the new space for print subscribers to manage accounts, since that was one of the biggest touch points? (Big Yes.)
• Should we have more than one staff listing? (No.)

So off to the whiteboard we went, but with markers AND sticky notes. We wrote down every incarnation of touch point, organized it, then organized it again. We asked people to review, some with the company, others who were subscribers or users who were willing to give feedback for free.

Then we took the output of all those meetings and recreated a visual representation quickly in OmniGraffle. This allowed us to tweak the final pieces. A sample of one of the hierarchies:

This then put us in a position to define where each link would go, how the pages would function, what new sub-sections needed creating, and how the groupings would help user behavior. That was done on an intranet site with me writing some product requirements and Dave and his team asking good questions. It was also done with Sharpies:

Code Work

Finally, code could begin. I worked on section builds, page builds and site structure while Dave did the jQuery code rework for the contact forms and built components. Nav, footer and header changes were made, and the forms accept actions more efficiently (from a tech perspective, this is a good thing).

Overall, the work we put into the planning paid off once again. The actual development was completed in about half the time we expected. A nice result, there, and hopefully our users appreciate the thoughts.

The tri-nav today.

Like the updates? Not so sure about the changes?

Please let us know anytime. Comments are always on, and we also watch twitter (and can be reached at @obs_interactive.

Thank you,

-Jason