Coachless
Freelance Design Project
Role
UX/UI Designer
Scope
6 months
Skills
Design Systems
Data Visualization
B2C Desktop Design
Year
2025
Context
Coachless is a League of Legends statistics service that helps users improve at the game by calculating and tracking their Win Probability Added (WPA), a metric that measures how individual player decisions impact their chances of winning. I was contracted to redesign the UX/UI of the Coachless website in order to enhance usability and elevate product value.
At a glance
Problem
A clunky website with unintuitive navigation and no clear visual direction.
Solution
A cohesive design system and redesigned core product features to elevate product value.
Impact
+1000
+1000
new monthly subscribers for Coachless Premium.
+1000 new monthly subscribers for Coachless Premium.
And a smoother future design and development process for the entire team.
Problem Definition
Problem Definition
Problem Definition
The Coachless website was failing to attract new users due an unfocused visual direction that did not reflect the product's true value.
The Coachless website was failing to attract new users due an unfocused visual direction that did not reflect the product's true value.
The Coachless website was failing to attract new users due an unfocused visual direction that did not reflect the product's true value.
Existing users were frustrated by the website’s unintuitive navigation and had difficulty understanding game statistics.
Existing users were frustrated by the website’s unintuitive navigation and had difficulty understanding game statistics.
Existing users were frustrated by the website’s unintuitive navigation and had difficulty understanding game statistics.
The engineering team were building out every new feature from scratch, resulting in painfully slow development times and inconsistent UI design.
The engineering team were building out every new feature from scratch, resulting in painfully slow development times and inconsistent UI design.
The engineering team were building out every new feature from scratch, resulting in painfully slow development times and inconsistent UI design.
How might we help League players perceive the true value of Coachless, while also making the lives of the Coachless development team easier?
How might we help League players perceive the true value of Coachless, while also making the lives of the Coachless development team easier?
How might we help League players perceive the true value of Coachless, while also making the lives of the Coachless development team easier?
Process
Process
Process
Establishing a Solid Foundation
I crafted a design system from scratch for Coachless, improving visual cohesion and speeding up development handoff.
I crafted a design system from scratch for Coachless, improving visual cohesion and speeding up development handoff.
I crafted a design system from scratch for Coachless, improving visual cohesion and speeding up development handoff.
Review Page
Where Coachless users review previous matches and analyze their highlights. Designing multiple ways to filter through game highlights empowers users to interact with the product in the way that is most comfortable for them.
Where Coachless users review previous matches and analyze their highlights. Designing multiple ways to filter through game highlights empowers users to interact with the product in the way that is most comfortable for them.
Where Coachless users review previous matches and analyze their highlights. Designing multiple ways to filter through game highlights empowers users to interact with the product in the way that is most comfortable for them.
An unexpected twist
An unexpected twist
An unexpected twist
Some additional competitive analysis revealed an opportunity to lean into League's itemization system as a way to stand out from other LoL statistics websites.
Some additional competitive analysis revealed an opportunity to lean into League's itemization system as a way to stand out from other LoL statistics websites.
Some additional competitive analysis revealed an opportunity to lean into League's itemization system as a way to stand out from other LoL statistics websites.
After getting buy-in from key decision makers, we shifted the focus of the project towards redesigning the Coachless item experience.
After getting buy-in from key decision makers, we shifted the focus of the project towards redesigning the Coachless item experience.
After getting buy-in from key decision makers, we shifted the focus of the project towards redesigning the Coachless item experience.
Items Page
The Items page allows users to analyze the latest statistics of every item in the game. It was important that users could understand the hierarchy of information within the data table as well as the surrounding filters.
The Items page allows users to analyze the latest statistics of every item in the game. It was important that users could understand the hierarchy of information within the data table as well as the surrounding filters.
The Items page allows users to analyze the latest statistics of every item in the game. It was important that users could understand the hierarchy of information within the data table as well as the surrounding filters.
Users will help resolve your design conflicts.
While designing the table data visualizers, the client was concerned about potential accessibility issues for colorblind users. I designed the visualizers to be more distinct through physical size contrast to assuage these concerns, and conducted a quick usability test with users to validate my design decisions.
While designing the table data visualizers, the client was concerned about potential accessibility issues for colorblind users. I designed the visualizers to be more distinct through physical size contrast to assuage these concerns, and conducted a quick usability test with users to validate my design decisions.
While designing the table data visualizers, the client was concerned about potential accessibility issues for colorblind users. I designed the visualizers to be more distinct through physical size contrast to assuage these concerns, and conducted a quick usability test with users to validate my design decisions.
An honest reflection.
Seeing the impact that my designs had on real clients and real users reconfirmed my belief that deliberate and human-centered design can truly improve both user experiences and business outcomes.
Seeing the impact that my designs had on real clients and real users reconfirmed my belief that deliberate and human-centered design can truly improve both user experiences and business outcomes.
Seeing the impact that my designs had on real clients and real users reconfirmed my belief that deliberate and human-centered design can truly improve both user experiences and business outcomes.
However, if I could to do things differently I would've involved the development team more during the design process. The contractor/client relationship limited my interactions with the engineers, so handoff felt like a one-sided transaction that resulted in the final product looking slightly off from my original designs.
However, if I could to do things differently I would've involved the development team more during the design process. The contractor/client relationship limited my interactions with the engineers, so handoff felt like a one-sided transaction that resulted in the final product looking slightly off from my original designs.
However, if I could to do things differently I would've involved the development team more during the design process. The contractor/client relationship limited my interactions with the engineers, so handoff felt like a one-sided transaction that resulted in the final product looking slightly off from my original designs.
By emphasizing a collaborative dialogue between users, engineers, and designers alike, we can save time and resources by creating a more cohesive product that more closely aligns with the client's vision and our user group's needs.
By emphasizing a collaborative dialogue between users, engineers, and designers alike, we can save time and resources by creating a more cohesive product that more closely aligns with the client's vision and our user group's needs.
By emphasizing a collaborative dialogue between users, engineers, and designers alike, we can save time and resources by creating a more cohesive product that more closely aligns with the client's vision and our user group's needs.
