CTA Report

Report on CTA Visualization of Group 1

Posted by Aditya Ranganathan on February 15, 2022 · 6 mins read

CS 424 Project Report Group -1

Group Members

Akash Magnadia Aditya Ranganathan Krishnan Chelakkarai Sivaraman

Akash’s Solution

The first thing that catches our attention in Akash’s solution is the use of visually pleasing colors chosen for each of the stations. The colors are consistent across the pages for all visualizations. This makes it easy for comparison. The usage of gradient hues for the yearly, monthly and day of the week gives us more context and makes it clear to see any trends and reveal the truth about the data. The gradient also helps us to quickly recognize any values that are below or above a certain range which make it easy to search for any unusual patterns that may emerge.

Another interesting aspect was the control panel which had checkboxes to choose the plots the user would like to view. The control panel allows users to select and/or deselect graphs as necessary. This gives more control to the user and also ensures that each plot can be seen individually or together. The placement of the control panel is also in such a way that it is reachable on the big screen.

The menu options are also placed in such a way that it is easily accessible. The Interesting insight menu option has a submenus for all the ten insights. The collapsible implementation of the insights menu de-clutters the menu and makes the interface clean and intuitive.

The control panel also extends for the interesting insights which enables the user to view the same data in multiple forms. This helps the user understand the insight and also see the big picture. For example, insight-3 is about how covid affected the ridership at UIC-Halsted station in 2020. The user views the same data in monthly/daily/weekly forms to get a better understanding of the insight. The user can also toggle the top and bottom graphs to mix and match graphs between stations they wish to compare like the impact of COVID-19 on O’Hare as well as UIC-Halsted. The validation added when all graphs in both top and bottom regions are deselected are also considerate.

Krishnan’s Solution

Krishnan’s solution is aesthetic and minimalist. The focus is more on presenting information in a clear and concise manner. The usage of separate boxes for each graph and table was a nice touch that both formatted and de-cluttered the interface. The controls are well-placed and intuitive.

Another great thing about his solution is the level of control offered by the data tables. The option to search for specific dates and/or specific ridership numbers is great for users hoping to search for possible discrepancies in the data. This granular level of detail is great for understanding any sudden spikes or declines that may have happened and allows for further research into the possible reasons why it may have happened. The ability to change the number of rows displayed is also great for users. It allows users with different reading speeds to adapt to the interface as they need.

The interface design of the interesting dates tab is also nice. The different dates can be viewed with the help of a dropdown menu which is placed in a great position that’s both accessible and easy to see. The titles on top of each graph are bold and immediately capture the users attention while at the same time briefly summarizing the event in question and how it influenced the ridership for that particular time period. The dates selected were also of interest. For example, the impact of George Floyd’s death and the BLM protests caused a significant decline in ridership from June 1st to June 2nd 2020. 7th October is also interesting. The nature of the events that occurred has had an influence on the ridership in October, most notably the spike in ridership considering that the general trend is the start in decline of ridership due to the onset of winter.

Aditya’s Solution

One of the intuitive parts of Aditya’s designs were the icons. It made understanding the titles easier by aiding icons in comprehending the title. Adding icons also removes some cognitive overload for the user operating the interface.

The colors for each station are unique for each station, which means it is much easier to recognize the station based on the color rather than reading the title after looking at the graph the second time around. Once again, this is another example of reduced cognitive overload by allowing users to know the stations without looking at the graph.

When we look at “Interesting Dates”, we can see that the title grabs the attention of the reader as it is big and bold, defining the focus of the page, which is the interesting insight. The description underneath the title is also in a big and easy to read font making it much easier to read.

The black and white contrast for table column details makes the table look modern and eye-catching. The contents of the tables are centered and only contain the information to compare the data between the graph and table.

The controls on the left hand side are easy to reach and self-explanatory.