Image
Top
Menu

Dispatch.com site redesign

Web design / UX design / Information architecture

For this year-long redesign project, I was responsible for refining Dispatch.com’s information architecture and design. The work included designing wireframes, more than 100 page mockups, sitewide icons (including more than 35 blog logos), and an extensive design style guide. I also worked closely with developers on design consistency, presented design options to small and large groups, and contributed to daily Agile standup meetings. (Please keep in mind that the following project overview is from a time when mobile and tablet visitors were barely on web designers’ radars. The redesign requirements and solutions would be very different today.)

Dispatch.com in 2010 (pre-redesign)

web-d-before

Problems to solve

After meeting with stakeholders from editorial, advertising and marketing departments, the redesign team compiled and prioritized the goals for the site redesign. They included:

    • Showing visitors The Dispatch’s breadth of content without overwhelming them with choices
    • Redesigning the navigation to be better organized and easier to use
    • Giving greater prominence to video, blogs and social media calls to action
    • Rebranding individual blogs to have their own visual identities, while still fitting in with the site
    • Promoting Classifieds, subscriptions and advertising without distracting from the site’s primary mission of delivering news

Navigation options

I created four options for navigation and presented the wireframes to The Dispatch Web team, who were enthusiastic about the options. The consensus was to move away from the cumbersome double horizontal navigation. The deep dropdown and horizontal / vertical hybrid navigation themes were viewed to be the most promising.

Basic mockups

I took the feedback from the navigation options and crafted two full-color flat mockups using the deep dropdown and horizontal/vertical navigation options.

1: Deep Dropdown Navigation

One of the benefits of this option was its ability to take the overwhelming number of news topics and narrow them down to four categories: News, Sports, Opinion, and Life & Entertainment. The deep dropdown menus showcased the many subcategories under each heading. Because there were only four top-level categories, we could use color-coding without overwhelming visitors with the Crayolas. The deep dropdown also allowed us to present the many Classified options and their varied logos in one spot.

2: Horizontal Main with Vertical Local Navigation

This navigation option shows eight top-level news categories without a dropdown menu. Some of the benefits of this approach were that none of the subcategories were hidden from view. Instead, subcategories were revealed in a left-hand rail on top-level index pages. The eight topic categories also gave visitors a better idea of what kind of news Dispatch.com had to offer. The downside of this was that a sub-level index page was often two clicks away as opposed to just one click away with the deep dropdown. The Classified options were presented in the right-hand rail with consistent icons as opposed to their varied logos, and were also listed in the top navigation by category. The color palette was limited to blue and orange as opposed to color-coded topics.

Final mockups

After gaining stakeholder feedback, we went with the deep dropdown version, which better reflected the breadth of content on Dispatch.com and provided the Classifieds sites with the best usability option. Before handing over the design to developers, I took some of the structural and typographic elements that I liked in the other mockup and applied them to the final version.

Documentation

SITE FLOW CHART

To help us organize the site, understand the navigation paths to various pages and visualize the breadth of content we were building out, I created these site flow charts.

DESIGN STYLE GUIDE

The redesigned Dispatch.com was built from scratch on a new version of the Open content-management system by a team of in-house and contract developers. To keep everyone on the same page I crafted the following design style guide. It documents the 960px-wide 12-column grid, the typography, the color palette and the sitewide components.

web-d-design-guide

Final thoughts

While the 2011 Dispatch.com redesign was a marked improvement over the previous presentation, there are several decisions that I would reconsider in hindsight.

1. There is too much.

We tried to minimize the visual clutter through the deep dropdowns and consistent typography, but there are simply too many links visible in the navigation. This is a difficult battle to fight when there are so many stakeholders who want their various pages or subsites to be visible and just one click away, but it’s a battle that needs to be fought.

2. The design was too complicated and the design stylebook too overly specific.

The typography and spacing requirements were especially cumbersome. I should have kept it simpler. Part of the problem was my lack of involvement in doing any actual coding. My other commitments to the print side of the newspaper kept me from getting my hands dirty. I would have quickly seen that the design specs were leading to too many lines of code.

3. It’s sometimes difficult to see what text is a link.

This problem stemmed from my decision to color-code the site, but not make text links follow the same color coding. I didn’t want a sea of red, for example, so I proposed a far-too-subtle shift from gray to black for text links. This was a big mistake because I let aesthetics trump usability.

4. The site relies too heavily on rails to offer related content.

On a story page, when a visitor has finished reading, there are rarely bottom links for her or him to read related stories. Instead, I placed those links higher up the page in a rail. This sidebar approach works well in print, but fails us on the web where vertical reading rules.

5. After the redesign went live, I failed to follow through.

I dropped off copies of the design stylebook to web producers and went back to designing print pages and illustrating stories. I should have continued to play a role in the day-to-day production, which requires thoughtful photo and design choices. Picture editing is just as important for a website as it is for a print publication, especially when stories and links require thumbnails of various sizes. More problems have presented themselves now that mobile and tablet viewing have become so widespread and important. Responsive web design was a brand new concept when this redesign launched and now it is standard. Hopefully, we can do a better job next time of keeping up.