Projects | G.O.A.T

G.O.A.T

Who is the Greatest of All Times in Formula One?

Overview

Role: Interaction Designer, Visual Designer, Developer 

Tools: Sketch, D3.js 

Duration: 3 months  

Details: 4 person team project @ Georgia Tech  

Try It: Demo


Who is the Greatest of All Time?

“GOAT” is an information visualization web app through which users can answer “Who is the Greatest Of All Time (GOAT)” in Formula One. Since the question is so subjective, it opens the visualization to multiple interpretations based on “criteria” that an individual deems necessary in determining their own GOAT. This subjective nature of the question makes it ideal for users with a varied level of F1 knowledge.


Process

Understanding

Exploring the Data

As a sports enthusiast, I took the lead in finding the dataset and researching existing visualizations.

F1 Data Set
This dataset proved to be the heart of the visualization, providing us with in-depth information about each formula one driver with multiple attributes.



Formula One Era and Engine Information
This combined dataset helped us provide more technology-related changes in the sport.

Figure: Era Dataset

Design Process


Given the size of the dataset, we decided to have a brainstorming session to discuss the various directions we could take to visualize the data. I led the brainstorming session and came up with 4 themes targeting different aspects of the sport. For each theme, we went into detail, discussing various data points needed and defining what each term in a prospective insight question meant.

Figure: Brainstorming


We conducted a quick in-class feedback session to understand which question excited users the most. We saw that users regardless of of their F1 experience, seemed the most excited in knowing "Who is the Greatest of All Time"?

Target Audience

We then decided to narrow down our target audience. Our users are F1 fans with at least a functional understanding of the sport, meaning that the user understands the rules, context, and basics of the sport at a level which allows them to follow along in an enjoyable manner when seeing an F1 race or coverage of the sport in general.

Answering this question provides them a unique opportunity to start a healthy debate with other fans and see how certain parameters contribute to the overall rankings.



User Goals

Based on the understanding of the data and the user, we finalized a set of goals that the visualization should help the user achieve
  • Compare drivers
  • Identifying the technological progression of the sport
  • Determining the Greatest of All Time
  • Search for particular drivers of interest
  • View driver career progression
  • Get familiar with the details of the sport


Information Viz Goals

Since it is an information viz project, it was highly important for us to treat it as one and defining goals helped us keep that in mind and not stray away from the visualization aspect.


Do not provide a conclusive answer

The visualization will not attempt to settle the debate around F1 team and driver GOAT (greatest of all time). However, it will clearly prompt, direct, and support the user in formulating their argument or coming to their own conclusion (about which driver and/or team is the most dominant, consistent, fastest rising, greatest of all time, etc).


Credibility

Make available and apparent the size scale and depth of the data being manipulated and shown to add credibility and the sense of completeness to the answers users create for themselves to the question.


Graphical Integrity

Respect the perception and visual hierarchy principles so as not to create misleading graphic representations which distort the data’s intrinsic qualities.


Design Alternatives & User Feedback

I sketched out two ideas: One creative and another focusing more on Scrolly-telling aspects.

Figure: Design Session



Idea 1: Creative Viz
This idea focused on innovation where we tried using driver dashboard to create strong visual metaphor to help users ease into the domain. I took inspiration from the pinterest board I created and made a rough user flow to bring the team on the same page.


Figure: Design Inspiration



Figure: Viz



Figure: User Flow






Idea 2: Scrolly-telling
This idea focused on taking users through an example scenario. This was focused more on telling a story through our data and not giving as much control of the visualization. I created narration flows.


Figure: Idea 2 - User Flow





User Feedback for Elimination of concept

Based on in-class and visualization expert feedback, we decided to move on with the creative visualization idea as it provided users with more opportunity to interact with the data.

Interface Details


Visualization Layout Breakdown

The main visualization page is divided into 6 main sections and one hidden compare section (shown in upcoming images) which appears once user selects up to 4 drivers. 5 of the 6 sections are interactive.


Figure: Final Visualization Breakdown




Main Gauge Inner and Outer arcs Explanation

The main gauge is divided into two arcs. Driver circles in the inner arc represent top 5 drivers in a particular year and the 5 driver circles spanning across a group of years (era) represent top 5 drivers in that particular era. Detailed information can be seen in the figure.


Figure: Arc Explanation




Technological Parameter Set Scale

All of the technological parameters had a different set of value and range but in order to provide a clear indication of differentiation, it was important to have all the parameters on the same scale. Hence, I normalized all the values from 0-10 to provide a clear visual representation.


Figure: Technological Set Parameter Gauge




Comparison Charts

We used three different kind of charts to represent detailed comparison view of the 8 parameters. We made use of line graphs to show trend lines for Poles, Podium Starts, Podium Finishes, Points, Pit Stops and Laps. Line charts provide less visual clutter and are more helpful is trend comparisons. We used stacked bar charts to show wins since there is only one winner per race. Stacked bar charts help understand dominance of a driver in a particular year/era amongst set of drivers. Bar charts were used to depict number of race comparison since race is also one of the parameter for driver comparison and line charts would create confusion in that senario as each driver would have 1 race per race.


Figure: Line Chart Example

Figure: Stacked Bar Example

Figure: Bars Example

Interaction Design


Interactions are a key element to information visualization. Each animation and interaction must add value to the visualization in that they should be able to guide the user and make them feel more connected to the visualization.



Interaction #1: Select drivers from the main gauge

User can select up to 4 drivers in the main gauge to compare their career top 5 finishes. Selecting drivers from main gauge also adds drivers to the comparison list.






Interaction #2: Selecting technological parameters to view changes in the sport

Users can see how various engine parameters have changed through the different formula one eras. This adds another talking point to settle the whole debate around "Who is the greatest of all time"?






Interaction #3: Selecting parameters to change the ranking of drivers


Users can see top 5 finishes across years and eras based on multiple parameters which can be selected from the parameter selection gauge.






Interaction #4: Hovering over drivers to view their information


Users can dive deeper into details of each driver by looking at the changing parameters at the top right corner and also in the center of the main gauge to support their argument.






Interaction #5: Searching for a driver


Searching for a driver helps users ease into the visualization as it acts as valuable starting point for users to first visualization drivers they know about.






Interaction #6: Choosing driver comparison by era/year/race


Once users have selected up to 4 drivers that they wish to compare, they have an option to compare these drivers by era, year or race hence providing more lens of comparison.






Interaction #7: Brushing driver performance based on a certain parameter


Users can further select area on parameter map to zoom in/out.






Interaction #8: Hovering over a year to view track wise breakdown


Users can also look at the track wise breakdown of drivers with podium finishes once they hover any year.






Interaction #9: Hovering over an era to view era description


Eras are important for the sport of formula one as they define major changes in technology and rules. Hovering over any of the era will provide users a small description of that era means.






Evaluation

I divided the evaluation in terms of both Utility and Usability to focus both on the value the visualization provides and the ease with which the visualization provides value.


Utility Metrics

Insightfulness

Users were able to gain meaningful insights from the visualization. Most of the times, they started using the viz by searching for a driver they knew - which proves the utility of the search function and were soon able to gain very personalized insights based on their previous knowledge of the sport.


Conversation Starter

As soon as users came across an insight, their first instinct was to discuss it with someone and either acted in confidence saying things like “yes, of course” or completely acted surprised and wanted to explore more and discuss with the other person. The conversational aspect of the viz is highlighted in the video above.



Usability Metrics

Welcoming: WOW Factor

As soon as the users loaded the application, they had a very positive reaction and found the visual design to be very appealing and welcoming. The gauge based design shifted their concentration on the sport 100% percent and proved to be the first point of having a totally immersive experience.


Discoverability

Even though the learning curve was a bit steep, users enjoyed going through the application and clicking various options at their disposal. They did not have any issues knowing how different components are linked together. Animations provided crucial help in redirecting user attention to different aspects of the visualization.


Learnability

Users faced some issues understanding what different gauges meant and how were the driver circles stacked on each other in the main gauge. This could be solved by taking a “Martini Glass” hand-holding approach wherein first users are given a walkthrough of the viz using a scenario and then let loose to explore the visualization themselves.


Reflections

I am proud of the final product delivered and the design and development process which led to it. This project helped me expand my understanding of information visualization. I am glad that I was able to apply the knowledge gained to a sports domain.

Highly collaborative ecosystem between design and development
This project was possible due to a highly collaborative environment between designers and developers. I not only acted as the main designer for the project but my development background also proved crucial to translate design-development lingo and vice-versa to bring the team on the same page. I regularly sat down with the developer to develop and test out different interactions and view them in action - which reduced the time to delivery.

Goal-Driven Design Process
This course taught me how important it is for information visualizations to tell a story and provide its users a direction to answer their own questions. This is possible when the visualization is crafted by its designers by keeping a certain goal in mind: for us, it was to help users answer: Who is the greatest of all times - which then led to multiple sub-questions. Throughout the design process, we made sure that a user was able to gain small nuggets of knowledge to finally answer the question.

Dear UXfolio Official,

Best,