Financial Sense Redesign

By jeffrubow April 14, 2011

We were approached by the good folks at financialsense.com to see if we could improve their website and make it more user friendly. Financial Sense is a website devoted to financial news and editorials. They also put out a regular newshour talkshow with expert interviews and in-depth analysis.

The primary goals of the financialsense.com redesign were to promote the Financial Sense Newshour, emphasize exclusive and featured content, and to establish clear navigation and page hierarchy.

Home Page Comparison
Left: The old home page. Right: Final home page redesign.

If everyone shouts, no one gets heard.

The first page we redesigned was the home page. The overall color scheme was designed to be very neutral with grays and browns. These colors re-enforced their brand, and set the tone as a serious news site. With a very neutral color palette, important items could be featured with bright colors which would create contrast and demand attention.

We separated the main content area of the home page into a clear hierarchy of three main sections. On top is the “Featured” section. This contains the most recent Financial Sense Newshour, The featured Market Observation, and the Featured Editorial. These are the most important items on the page and are treated accordingly, with the most color, the most contrast, and largest size.

Featured

This is followed by the “Me Too” section. These are other recent articles that are treated with a style similar to the Featured Editorial, but smaller in size. The typography and layout of these featured sections were designed to look like newspaper columns. Note the dates within the byline. Here we used a serif font with oldstyle figures to compliment the all caps bold sans-serif author names. We also abbreviated the dates in the smaller featured area to leave more room for long names.

Me Too

The third section below that is the “Everything Else” section. This includes older Financial Sense Editorials ordered by date and links to other external related articles. These are styled as simple text links. These have the least importance on the page, but are still given classy treatment with sensible spacing and typographic embellishments.

Everything Else

Where am I?

It would be easy to get lost in a large site like financialsense.com if the navigation wasn’t clear. We designed the navigation to be a persistent expandable left sidenav that would continually inform you of where you were in the site and would easily allow you to explore it.

Sidenav

In order to maximize the available space for featured articles on the home page, the navigation was moved to the top. When you hover the mouse over one the the top “tabs” the secondary navigations changes to show the related sub-navigation. Only the home page uses this two tiered horizontal navigation. This is because although it takes up considerably less space, it is also less helpful in determining where you are in the site.

It’s all about the content.

Since financialsense.com is a site that is focused on news and editorials, the most important part to get right is the articles themselves. That meant styling the typography to be easy to read, and to have a clear hierarchy. Titles were set in a font called “News Gothic FS” which is linked using the @font-face css technology. This non-standard, yet sophisticated font gives the whole site the look and feel of a newspaper. The headings within the article body use the serif font Georgia, and sans-serif Arial/Helvetica. Special attention was given to line spacing, margins, and gutter widths, which can be as important to the ease of reading as the actual font choices can be.

Content

The people at financialsense.com were very happy with the redesign, as were their users. Here is a comment received after the redesign launched:

“Since I was one of those negative commenters on the last site redesign, I figured I owed it to you to tell you how much I really like this re-do!  It  is much cleaner, and with fewer categories I will quickly find my way around  this new layout.

Thank you for taking the time to improve my experience here.  Now that the layout quality matches the quality of the content, I will be spending more time here reading, and listening to podcasts.

Well done!”

-Rodney ( financialsense.com user)