Joseph Loves Chill Music
By Joseph
The beginning
Flawed Mangoes
Holocene
Bon Iver
Joseph
Joseph
Joseph
Joseph
Sonalysis
Sonalysis
Leveraging AI to provide real-time detailed football analytics and data storage.
Leveraging AI to provide real-time detailed football analytics and data storage.
Leveraging AI to provide real-time detailed football analytics and data storage.
Leveraging AI to provide real-time detailed football analytics and data storage.
Other Projects
Other Projects
Year
Year
2022
2022
Role
Role
Brand Designer
Brand Designer
Product Designer
Product Designer
SKILLS
SKILLS
User Research
User Research
Visual Design
Visual Design
Design System
Design System
Prototyping
Prototyping
The Product
The Product
Soccer fans typically have limited access to information, particularly during live matches. This has the potential to limit how games are analyzed and its impact on future matches. To name a few of the issues that sports analysts, coaches, and players face, they include difficulty gathering and recording important details about live games, bias in accessing players' strengths and weaknesses, difficulty managing players' records, difficulty getting a panorama view of the pitch during a match, and the near impossibility of predicting future game success.
Sonalysis provides detailed real-time analytics of a soccer game to users from their homes in Africa or anywhere else in the world, by developing a data-driven application that can collect and make available analytical data from a soccer match, which is designed to cater to the needs of club admins, coaches, players, and football analysts.
Sonalysis uses cutting-edge technology to become the go-to platform for detailed soccer analytics and data storage, but like all things it was time for improvement.
Soccer fans typically have limited access to information, particularly during live matches. This has the potential to limit how games are analyzed and its impact on future matches. To name a few of the issues that sports analysts, coaches, and players face, they include difficulty gathering and recording important details about live games, bias in accessing players' strengths and weaknesses, difficulty managing players' records, difficulty getting a panorama view of the pitch during a match, and the near impossibility of predicting future game success.
Sonalysis provides detailed real-time analytics of a soccer game to users from their homes in Africa or anywhere else in the world, by developing a data-driven application that can collect and make available analytical data from a soccer match, which is designed to cater to the needs of club admins, coaches, players, and football analysts.
Sonalysis uses cutting-edge technology to become the go-to platform for detailed soccer analytics and data storage, but like all things it was time for improvement.
Soccer fans typically have limited access to information, particularly during live matches. This has the potential to limit how games are analyzed and its impact on future matches. To name a few of the issues that sports analysts, coaches, and players face, they include difficulty gathering and recording important details about live games, bias in accessing players' strengths and weaknesses, difficulty managing players' records, difficulty getting a panorama view of the pitch during a match, and the near impossibility of predicting future game success.
Sonalysis provides detailed real-time analytics of a soccer game to users from their homes in Africa or anywhere else in the world, by developing a data-driven application that can collect and make available analytical data from a soccer match, which is designed to cater to the needs of club admins, coaches, players, and football analysts.
Sonalysis uses cutting-edge technology to become the go-to platform for detailed soccer analytics and data storage, but like all things it was time for improvement.
My role
My role
I led the brand/product design of this project. At this time, development of this project had started so I was supposed to carry out the redesign without bringing the developers back or make any change that would affect the current engineering process from the frontend to backend to AI to data engineering (I know right 😅). I started by doing secondary research of existing products to do a competitive analysis of their process and value proposition to see the basis of the redesign.
I also had several sessions with the team of engineers to understand what had been done, and why it was done that way, and basically understand the engineering process since this is a project that is heavily reliant on AI.
The team included me as the Brand/Product Designer, one Product Manager, two Front-end Developers (one mobile, one web), one AI Engineer, one Data Engineer, one Dev-Ops Engineer, and one Back-end Engineer.
I led the brand/product design of this project. At this time, development of this project had started so I was supposed to carry out the redesign without bringing the developers back or make any change that would affect the current engineering process from the frontend to backend to AI to data engineering (I know right 😅). I started by doing secondary research of existing products to do a competitive analysis of their process and value proposition to see the basis of the redesign.
I also had several sessions with the team of engineers to understand what had been done, and why it was done that way, and basically understand the engineering process since this is a project that is heavily reliant on AI.
The team included me as the Brand/Product Designer, one Product Manager, two Front-end Developers (one mobile, one web), one AI Engineer, one Data Engineer, one Dev-Ops Engineer, and one Back-end Engineer.
I led the brand/product design of this project. At this time, development of this project had started so I was supposed to carry out the redesign without bringing the developers back or make any change that would affect the current engineering process from the frontend to backend to AI to data engineering (I know right 😅). I started by doing secondary research of existing products to do a competitive analysis of their process and value proposition to see the basis of the redesign.
I also had several sessions with the team of engineers to understand what had been done, and why it was done that way, and basically understand the engineering process since this is a project that is heavily reliant on AI.
The team included me as the Brand/Product Designer, one Product Manager, two Front-end Developers (one mobile, one web), one AI Engineer, one Data Engineer, one Dev-Ops Engineer, and one Back-end Engineer.
Defined Goals
Defined Goals
After I was done with my research, I had a session with the Sonalysis team to discuss the goals for research
Create a more intuitive and delightful design
Reduce the probability of churn/bounce rate
Lesser steps to complete tasks within the application
Easy/better navigation for users
After I was done with my research, I had a session with the Sonalysis team to discuss the goals for research
Create a more intuitive and delightful design
Reduce the probability of churn/bounce rate
Lesser steps to complete tasks within the application
Easy/better navigation for users
After I was done with my research, I had a session with the Sonalysis team to discuss the goals for research
Create a more intuitive and delightful design
Reduce the probability of churn/bounce rate
Lesser steps to complete tasks within the application
Easy/better navigation for users
Defining user categories
Defining user categories
🖥️ Club Admins: These are the owners of the club/representative of the owners, they are the ones who onboard the other users within the club
🖥️ Club Admins: These are the owners of the club/representative of the owners, they are the ones who onboard the other users within the club
🖥️ Club Admins: These are the owners of the club/representative of the owners, they are the ones who onboard the other users within the club
💼 Coaches: This is the coaching staff of the club, who are in charge of team management, team creation, and uploading videos for analytics.
💼 Coaches: This is the coaching staff of the club, who are in charge of team management, team creation, and uploading videos for analytics.
💼 Coaches: This is the coaching staff of the club, who are in charge of team management, team creation, and uploading videos for analytics.
⚽ Players: The players of the club, their access shows them their analytics in matches, stats in a match and for the season.
⚽ Players: The players of the club, their access shows them their analytics in matches, stats in a match and for the season.
⚽ Players: The players of the club, their access shows them their analytics in matches, stats in a match and for the season.
Crafted the user flow for each user
Crafted the user flow for each user
To better understand how users go from point A to point B, the user flow was created for every function.
To better understand how users go from point A to point B, the user flow was created for every function.
To better understand how users go from point A to point B, the user flow was created for every function.
Redesigning the logo
Redesigning the logo
The icon was designed to represent AI and analytics which is what Sonalysis is about. A gradient colour scheme was also chosen to give a modern feel to the brand and logo.
The icon was designed to represent AI and analytics which is what Sonalysis is about. A gradient colour scheme was also chosen to give a modern feel to the brand and logo.
The icon was designed to represent AI and analytics which is what Sonalysis is about. A gradient colour scheme was also chosen to give a modern feel to the brand and logo.
New Logo
Old Logo
New Logo
Old Logo
High-fidelity prototypes
High-fidelity prototypes
Onboarding screen
Onboarding screen
The Call-to-Actions were changed to just two “SIgn up” and “Login”
Content and the imagery were updated
The layout of the screen was changed, for users to better digest the information on the screen
The Call-to-Actions were changed to just two “SIgn up” and “Login”
Content and the imagery were updated
The layout of the screen was changed, for users to better digest the information on the screen
The Call-to-Actions were changed to just two “SIgn up” and “Login”
Content and the imagery were updated
The layout of the screen was changed, for users to better digest the information on the screen
New Onboarding Screen
Old Onboarding Screen
Dashboard screen
Dashboard screen
From the previous design there was no dashboard to show the activities of the user, this was design in the new design
Users can see the overview of the team, staff and players from the dashboard.
The icons were changed to the same icon pack for consistency
From the previous design there was no dashboard to show the activities of the user, this was design in the new design
Users can see the overview of the team, staff and players from the dashboard.
The icons were changed to the same icon pack for consistency
From the previous design there was no dashboard to show the activities of the user, this was design in the new design
Users can see the overview of the team, staff and players from the dashboard.
The icons were changed to the same icon pack for consistency
New Dashboard Screen
Old Dashboard Screen
Team management screen
Team management screen
The first goal was to pass the information of this screen in the simplest form and also taking info/functions not required
The players were also classified into their positions to help users find what they’re looking for seamlessly
A button to “Edit team info” was added
The players with blue mark on them are the players that have claimed their account. Since the Club Admins are the ones that create an account and then invite other users (Coaches, Players), the blue mark was added to signify those that have verified their account
The first goal was to pass the information of this screen in the simplest form and also taking info/functions not required
The players were also classified into their positions to help users find what they’re looking for seamlessly
A button to “Edit team info” was added
The players with blue mark on them are the players that have claimed their account. Since the Club Admins are the ones that create an account and then invite other users (Coaches, Players), the blue mark was added to signify those that have verified their account
The first goal was to pass the information of this screen in the simplest form and also taking info/functions not required
The players were also classified into their positions to help users find what they’re looking for seamlessly
A button to “Edit team info” was added
The players with blue mark on them are the players that have claimed their account. Since the Club Admins are the ones that create an account and then invite other users (Coaches, Players), the blue mark was added to signify those that have verified their account
New Team Management Screen
Old Team Management Screen
Player stats screen
Player stats screen
The first goal was to present the information here in the simplest form
Added horizontal scrollable tabs for users to access other metrics
Also focused on showing just the relevant information like the player rating fro mthe match, time played, goals and commits.
The first goal was to present the information here in the simplest form
Added horizontal scrollable tabs for users to access other metrics
Also focused on showing just the relevant information like the player rating fro mthe match, time played, goals and commits.
The first goal was to present the information here in the simplest form
Added horizontal scrollable tabs for users to access other metrics
Also focused on showing just the relevant information like the player rating fro mthe match, time played, goals and commits.
New Player Stats Screen
Old Player Stats Screen
Video analytics screen
Video analytics screen
The first change here was the design of the nested tabs, using the stroke as the primary tab and fill for the secondary tab.
The content here was rearranged, by placing the mini map under the video that allowed users to the high quality video and mini map at the same time.
The first change here was the design of the nested tabs, using the stroke as the primary tab and fill for the secondary tab.
The content here was rearranged, by placing the mini map under the video that allowed users to the high quality video and mini map at the same time.
The first change here was the design of the nested tabs, using the stroke as the primary tab and fill for the secondary tab.
The content here was rearranged, by placing the mini map under the video that allowed users to the high quality video and mini map at the same time.
New Video Analytics Screen
Old Video Analytics Screen
Comparison screen
Comparison screen
A totally different approach was taken for the comparison screens, because comparison is a very generic feature on football or sport applications, which then brought the question of what could be done better? What value could this give to users that they won’t find elsewhere. The answer was to not just show comparison but suggest practical ways to improve for the users
By using AI, we could take the date from the stats and suggest ways for the players to improve
Also show analytics like overall performance, strengths and weakness to give players more context on the stats being shown
A totally different approach was taken for the comparison screens, because comparison is a very generic feature on football or sport applications, which then brought the question of what could be done better? What value could this give to users that they won’t find elsewhere. The answer was to not just show comparison but suggest practical ways to improve for the users
By using AI, we could take the date from the stats and suggest ways for the players to improve
Also show analytics like overall performance, strengths and weakness to give players more context on the stats being shown
A totally different approach was taken for the comparison screens, because comparison is a very generic feature on football or sport applications, which then brought the question of what could be done better? What value could this give to users that they won’t find elsewhere. The answer was to not just show comparison but suggest practical ways to improve for the users
By using AI, we could take the date from the stats and suggest ways for the players to improve
Also show analytics like overall performance, strengths and weakness to give players more context on the stats being shown
New Comparison Screen
Old Comparison Screen
Handover and Design System
Handover and Design System
While working on the design, I created the design system with the developers to make the development faster and seamless, I also created custom design components and variants on Figma to aid collaboration. Checkout some of them
While working on the design, I created the design system with the developers to make the development faster and seamless, I also created custom design components and variants on Figma to aid collaboration. Checkout some of them
While working on the design, I created the design system with the developers to make the development faster and seamless, I also created custom design components and variants on Figma to aid collaboration. Checkout some of them
I also redesigned the web application for all the users
I also redesigned the web application for all the users
This included the same process and mindset, to make the web application intuitive and delightful by applying the new brand guide.
This included the same process and mindset, to make the web application intuitive and delightful by applying the new brand guide.
This included the same process and mindset, to make the web application intuitive and delightful by applying the new brand guide.
Bonus - Email templates
Bonus - Email templates
I also designed email templates for communication with users from sign up to continuous activity with the mobile or web app.
I also designed email templates for communication with users from sign up to continuous activity with the mobile or web app.
I also designed email templates for communication with users from sign up to continuous activity with the mobile or web app.
My takeaways from this projects
My takeaways from this projects
Visual design is my favorite part of product design, hence working on this project was very exciting, although a part of the work focused on UX but most of the solutions were UI solutions. It was also my first time working with an AI Engineer which was exciting for me.
Visual design is my favorite part of product design, hence working on this project was very exciting, although a part of the work focused on UX but most of the solutions were UI solutions. It was also my first time working with an AI Engineer which was exciting for me.
Visual design is my favorite part of product design, hence working on this project was very exciting, although a part of the work focused on UX but most of the solutions were UI solutions. It was also my first time working with an AI Engineer which was exciting for me.
Other Projects
Other Projects