App Design

UFC Versus

A fighter statistics comparison tool

Year :

2023

Industry :

Minor Information Design

Client :

HvA

Project Duration :

6 weeks

Problem :

This project was part of the Information Design technical track, with a strong focus on functionality and data-driven interaction rather than visual aesthetics. The goal was to design and develop an interactive web application using the SvelteKit framework, based on a personal interest, that could transform raw data into meaningful and accessible insights.

A key challenge was translating complex datasets into clear, engaging, and interactive visualisations that support user understanding and comparison. This required balancing technical implementation with usability and information clarity.

Solution :

I chose Ultimate Fighting Championship as the subject, due to its global popularity and the availability of structured and accessible fighter statistics. I sourced a comprehensive dataset containing detailed information on fighters and their performance metrics.

To create a focused and relevant experience, I filtered the dataset to the top 10 pound-for-pound fighters. I then designed an interactive comparison tool that allows users to explore and analyse performance differences. Two key visualisations were selected to support comparison and decision-making.

To enhance usability and engagement, I implemented interactive tooltips that appear on hover, revealing detailed contextual information. This progressive interaction made the data more approachable while reducing cognitive overload.

Challenge :

The main challenge was learning a new framework while working with real-world data. Handling datasets required cleaning, filtering, and structuring the information before it could be used effectively in the application.

Another challenge was ensuring clarity in the visualisations. Raw sports data can quickly become overwhelming, so I had to focus on simplifying the presentation and emphasising the most relevant metrics. This required continuous testing and iteration to improve readability and interaction.

Summary :

This project strengthened my understanding of information design, data visualisation, and interactive web development. I gained hands-on experience with the SvelteKit framework, working with datasets, and building functional web applications.

Most importantly, it improved my ability to transform complex data into interactive and user-friendly experiences, a skill that is directly applicable to UX, behaviour design, and decision-support systems.

More Projects

App Design

UFC Versus

A fighter statistics comparison tool

Year :

2023

Industry :

Minor Information Design

Client :

HvA

Project Duration :

6 weeks

Problem :

This project was part of the Information Design technical track, with a strong focus on functionality and data-driven interaction rather than visual aesthetics. The goal was to design and develop an interactive web application using the SvelteKit framework, based on a personal interest, that could transform raw data into meaningful and accessible insights.

A key challenge was translating complex datasets into clear, engaging, and interactive visualisations that support user understanding and comparison. This required balancing technical implementation with usability and information clarity.

Solution :

I chose Ultimate Fighting Championship as the subject, due to its global popularity and the availability of structured and accessible fighter statistics. I sourced a comprehensive dataset containing detailed information on fighters and their performance metrics.

To create a focused and relevant experience, I filtered the dataset to the top 10 pound-for-pound fighters. I then designed an interactive comparison tool that allows users to explore and analyse performance differences. Two key visualisations were selected to support comparison and decision-making.

To enhance usability and engagement, I implemented interactive tooltips that appear on hover, revealing detailed contextual information. This progressive interaction made the data more approachable while reducing cognitive overload.

Challenge :

The main challenge was learning a new framework while working with real-world data. Handling datasets required cleaning, filtering, and structuring the information before it could be used effectively in the application.

Another challenge was ensuring clarity in the visualisations. Raw sports data can quickly become overwhelming, so I had to focus on simplifying the presentation and emphasising the most relevant metrics. This required continuous testing and iteration to improve readability and interaction.

Summary :

This project strengthened my understanding of information design, data visualisation, and interactive web development. I gained hands-on experience with the SvelteKit framework, working with datasets, and building functional web applications.

Most importantly, it improved my ability to transform complex data into interactive and user-friendly experiences, a skill that is directly applicable to UX, behaviour design, and decision-support systems.

More Projects

App Design

UFC Versus

A fighter statistics comparison tool

Year :

2023

Industry :

Minor Information Design

Client :

HvA

Project Duration :

6 weeks

Problem :

This project was part of the Information Design technical track, with a strong focus on functionality and data-driven interaction rather than visual aesthetics. The goal was to design and develop an interactive web application using the SvelteKit framework, based on a personal interest, that could transform raw data into meaningful and accessible insights.

A key challenge was translating complex datasets into clear, engaging, and interactive visualisations that support user understanding and comparison. This required balancing technical implementation with usability and information clarity.

Solution :

I chose Ultimate Fighting Championship as the subject, due to its global popularity and the availability of structured and accessible fighter statistics. I sourced a comprehensive dataset containing detailed information on fighters and their performance metrics.

To create a focused and relevant experience, I filtered the dataset to the top 10 pound-for-pound fighters. I then designed an interactive comparison tool that allows users to explore and analyse performance differences. Two key visualisations were selected to support comparison and decision-making.

To enhance usability and engagement, I implemented interactive tooltips that appear on hover, revealing detailed contextual information. This progressive interaction made the data more approachable while reducing cognitive overload.

Challenge :

The main challenge was learning a new framework while working with real-world data. Handling datasets required cleaning, filtering, and structuring the information before it could be used effectively in the application.

Another challenge was ensuring clarity in the visualisations. Raw sports data can quickly become overwhelming, so I had to focus on simplifying the presentation and emphasising the most relevant metrics. This required continuous testing and iteration to improve readability and interaction.

Summary :

This project strengthened my understanding of information design, data visualisation, and interactive web development. I gained hands-on experience with the SvelteKit framework, working with datasets, and building functional web applications.

Most importantly, it improved my ability to transform complex data into interactive and user-friendly experiences, a skill that is directly applicable to UX, behaviour design, and decision-support systems.

More Projects

Create a free website with Framer, the website builder loved by startups, designers and agencies.