for MarketWatch
Market Watch Redesign Experiment, Part 1: Network Bar and Header (web only)
I have a mild fascination for stock market websites due to the shear volume of data. Most are tests in patience at best, others more bearable. MarketWatch seems to be one of the better in terms of layout, but they’re just as chock full of info.
I think MarketWatch could be simpler. This experiment challenges my assumptions.
Please note: I’m not trying to reinvent MarketWatch and I don’t assume that I know their business or their needs any better. The sheer volume of their content makes it hard for me to breathe and I’m testing myself to see if maybe I could generate a few solid ways to make it better. I want to simplify while reusing as many of the elements as possible. I’m assuming, too, that everything has a purpose, that I can’t just randomly throw features out or make MarketWatch look like a business they are not.
Current header for MarketWatch
Since I’m designing top down, I first focused on the “hat_div”, black bar at the top of the page. This typically serves as a website promotional tool for companies in the network; in the case of MarketWatch, it’s also where user’s can search.
On other websites in the network, the search box may or may not be present, all depending on the needs of site (as far as I can tell). I’d be curious to find out how well this really promotes as I have sneaking suspicion that it’s more often overlooked. So I decided to lump all the site links into a single network menu, prominently featured to the left.
I also move the design away from using the background of the page as the color of the “selected” network tab. Looks wonky on many sites in the network. A thin light line was also added to make body/network bar separation more pleasing.
On the main menu of MarketWatch is a membership promotion that I didn’t feel was getting the proper amount of visibility. I’ve move this to the middle of our now much freer network bar. Search stays where it is because the top/right is a natural place for search; having it here also makes sense network wide.
Currently the world map/summary that indicates which markets are open/closed and the status of the DOW and the like is squeezed in beneath the logo. Not sure how much visibility this really needs, but I’ve made a few enhancements and gave it a more prominent place.
Among other things, I’ve made “open” more bold and gave all the text a bit of a size/space bump. This move made it possible to free space around the logo, better focusing the brand. I’ve left date and time basically where they were.
Where this focus on the map/summary is risky is how it reduces the emphasis on news. Frankly I don’t understand why the featured articles were given so much real estate – but there may be a legitimate business reason.
In my approach, I’ve altered the featured articles to be image focused: a single square image is overlapped by a category name and short title. Controls are beneath, just as with the recent news list.
Recent news is still fairly spacious and keeps items to single lines, with a fade effect to the right to deal with long titles.
So far that’s about it. I’ve spent a fair amount of time designing a mobile version of the site, but it needs a bit more work. I should be posting about this and more changes to my MarketWatch concept soon.
Here’s my version of MarketWatch network bar and header as it exists today:
Simpler header for MarketWatch