Visual refresh and restructure of marketwatch.com (This is just a side project I worked on and not something I did officially for marketwatch. )
Before starting out, there were a few things I wanted to understand. In order to redesign the page, I wanted to identify some of the issues I personally noticed. Thus, I decided to conduct an audit of the page.
1. The first thing I noticed was that at once, the page looks really content heavy and dense. The excess information makes the page seem intimidating and as a result harms the overall experience. (See left image)
2. The overall navigation was also inconsistent and presented the user with too many options to choose from. As a user with not much background about financial news, I found it really hard to navigate through the website.
3. There was visual inconsistency across the landing page and the article pages of the website. (See image below)
Wireframing High-Level Solutions
Once I had some things I wanted to change about the website, I decided to put together some high-level ways of representing the same information and put together some wireframes.
A minor navigational restructuring with a more cohesive market tracker and news viewer with different sections below. This also has a new nav bar which allows you to focus on some items which fall under the same broad category thereby improving the navigation and making it easier for newer users to get information.
This high-level representation is based on a newspaper. We are treating each article equally and lay it out in a 3 column grid. Have one column for tracking markets and showing information on stocks that are on the user's wishlist. The navbar is similar to how it worked in version 1.
Have a showcase of some important articles followed by more distinct sections for different types of news eg. Market News. Show some of the more important and popular exchanges and the activity on them at the top as that is one of the main things user looks at.
From the wireframes, I decided to move forward with the third representation as it allowed the user to see what are some things that are more popular and some things they can focus on. It also provided shortcuts into the major exchanges and the stocks they have put in their wish list thereby allowing them to quickly get information on their activity without having to click through different sections on the landing page.
When coming up with the visual design for the page, I also audited some of the other popular financial news websites to understand some common trends they might be using. I audited Bloomberg, Wall Street Journal, and Reuters. Based on the wireframes and the audits, I put together the following design.