Finance answer is an element displayed at the top of the search results page, that combines the most relevant and helpful information on current and historical stock market data that is curated by Bing.
There are a lot of websites out there displaying vast amounts of information related to the stocks and our key objectives were simplicity and approachability. We wanted to give our original finance answer a visual refresh in order to present data as objectively as possible.
Rather than adding new features and levels of complexity to the design we decided to distil the most important data and group it in a way that would be easy to see and understand for users with different levels of financial knowledge. We looked at overall appearance of the answer by exploring details like colors, style of the lines, scope changers and overlays.
We decided to join two parts of the graph (historical data and volume) into one unit, as well as annotate previous close line in order to prevent confusion on where its starting point is. To help user follow the information better and solve alignment issues we mimicked reading behavior and moved Y-axis labels to right side of the graph, instead of constantly prompting user to look back to left side for the price reference. It was decided to visualize some of the data and show current information in relation to lows and highs of the current day as well as in 52 week range.
Framework styles & colors
After a bunch of explorations five main framework styles and three color options emerged, which we continued to iterate and explore further.
From the beginning of the project we wanted to divide answer into clearly distinguishable sections and using cards in a grey container seemed like a good idea. As soon as we started adding more carded information within the answer and look at different query options, it became clear that the whole search results page is becoming too boxy and cluttered and we have to simplify it.