Android Quote Details Redesign





Quote Details is one of the most important resources for TD Ameritrade clients to keep track of stocks they hold or are interested in. It’s a wide-ranging research tool that shows real-time data, access to charting features, the latest news stories, and more valuable information.

There were a few UI/UX issues with the original Quote Details section. The typography and scale needed an update to help make the screen easier to scan. The most important stock data (for example: price, day change, bid and ask price, etc.) was tightly packed and difficult to quickly parse. The charting did not have much visual depth or cues to help the client understand what it represented. The rest of the data was presented in a single, long list with no clear delineation.




Typography


The TDA Android app was initially created with a good bit of custom components, but the design team wanted to work with product owners and developers to start skewing the app towards a more native direction. One of the first opportunities to introduce change was to revise our type system to more closely follow the Material Design guidelines. Quote Details was the first project to utilize the new type system.




Charts


A common client pain point was the chart design. Clients simply wanted to have a better designed chart. The original charts did not have markers for the time of day or any way to indicate different market states. In research, clients frequently noted the usefulness of charts, but our chart feature was severely lacking.

My first step was to introduce more color to the chart to a) help it visually stand out more and b) use the color to indicate valuable information and market states. By using color, the chart now portrayed positive and negative changes from the previous day’s close and the shading represented the premarket, market open, and postmarket states.

The next step was to make the chart clearer to read. Many clients did not realize the chart was for 1 Day and also easily glossed over the High and Low values. Implementing the new type system and rearranging the layout of this valuable information gave more clarity to the chart section.




Layout


The original Quote Details presented the bulk of the data points in a single, long-scrolling list. The long-scrolling list made scanning the data difficult and created a burden on clients. For the redesign, the data points would be grouped with related data points so that the client could more easily find the type of data they were looking for. By grouping data points together, I could also create the feeling of unique tiles or cards for each set of data points. Adding the expand/collapse functionality allowed clients a level of customization in terms of which individual sets were important to them.




Final Product


When the first phase of the revamped Quote Details screen was released, it received rave reviews from clients. Clients commented on how much cleaner the design was and how much easier it was to find the information they wanted now that the data was grouped. Clients liked the “airiness” and typography of the new Quote Details compared to its previous compact look. It made the important data stand out. The chart was noted as a vast improvement. Clients commented on the new usage of color, pre and postmarket shading, and more descriptive design.




 Back