Making ML Competitions More Approachable
The product
Kaggle is a platform that offers machine learning competitions across various categories of interest and skill level. Users build their ML skills by competing in competitions and learning from the community.
Design System Impact
The new component I designed became a useful addition to the design system. Teammates have reused the component as a guidance tool on Kaggle’s homepage and as a work organization tool on users’ profile page.
Proposing a Solution
Identifying this as an opportunity to improve the UX for new users, I decided to propose a new feature. I wrote a Project Requirements Document that highlighted the user need, my proposed solution, and the project’s alignment with business goals, and presented it to senior stakeholders. They agreed that this was a problem worth solving, and approved the project.
Identifying an Opportunity
Noticing a Problem
This project sprang from a heuristic evaluation of Kaggle that I conducted. While exploring the site, I noticed that the Competitions landing page divided content into unclear categories. As a newcommer, I had no idea what a “Playground” or “Community” competition meant.
Validating the User Need
I suspected that other new users were similarly confused. Upon investigation, I discovered several new users in the Kaggle forums seeking clarification on our categories:
“What is Tabular Playground? and is this for beginners or intermediate/advanced?” - User in Kaggle forum
I also found past user research stating that Kaggle-specific jargon was a big barrier to new user engagement. New users get intimidated and confused by the internal lingo, which makes it harder for them to use the platform.
Ideation
Brainstorming
To brainstorm ideas, I did a Crazy Eights rapid sketching exercise while keeping 3 How Might We questions in mind:
HMW make categories clear and helpful?
HMW introduce new users to different types of competitions?
HMW direct users to the right type of competition for them?
Early Explorations: Going Broad
I went very broad in my early wireframing, exploring some light solutions that required minimum UI changes to more radical solutions that necessitated restructuring our categories or the entire landing page.
Option1: Shelves
Restructures landing page to give each category its own section with a description + content preview
Feedback: Favorite amongst design team for its glanceability, easiness to browse, and UX consistency with other pages
Option 2: Mini Info Cards
Expands current chips to more informative filter cards
Feedback: Favorite amongst stakeholders for its simplicity, scalability, & encouragement to explore
Winner!
Option 3: “Learn More” button
Opens up a dialogue explaining our competition categories
Feedback: Least popular; too heavy
Guiding Questions
Hierarchy: How much attention do we want to draw to this section?
Visual: How might we incorporate visual intrigue? What are the pros and cons of adding color?
Narrowing Down Options
To decide which design approaches to further explore, I evaluated each approach against design criteria that included scalability, discoverability, and my original HMW goals. The solution options that met the most criteria were:
Info Cards
Shelves
Learn more
Team Feedback
Next Step: Present wireframes of these three options to the design team and to project stakeholders for feedback.
Choosing Design Direction
Post-Feedback Iterations
Adding the New Component to our Design System: Defining component specs & behaviors
The Problem
Platform-specific language confuses new users and creates a barrier to engagement.
With competitions organized into unclear categories, new users struggle to find a suitable competition to join.
The Goal
Help users understand each category's meaning so that they can quickly find a competition that suits them.
Component Specs & Handoff
Scope creep example: What if we completely recategorized our competitions into three skill levels - Beginner, Intermediate, and Advanced?
With my design approach selected, I could now zoom into the details and experiment with hierarchy, iconography, brand colors, UX writing, and more. I needed to figure out how to make this design useful to both novel and veteran users.
Questions
Interaction: Should this section appear for all users, or just newbies? Should it be dismissible?
Interaction: What happens when the user clicks on the card? What happens if multiple filters are applied?
Scope Creep: Restructuring Categories
The original goal of this project was simple: explain what each category meant. This goal, however, was a very zoomed-in solution to the user’s broader need: to easily find the right competition for them. Was doubling down on our current categories the right solution, or were we solving the wrong problem?
I started exploring more creative ways to guide users to suitable competitions, including restructuring of our categories to be skill-level based instead of topic-based. While this solution had unique strengths, it required more engineering and product restructuring than planned. After realigning with stakeholders on goals and scope, I eliminated this option as out of scope.
Post-Implementation Adjustments: Notes to engineer
Impact
User Impact: More Exploration, Less Intimidation
With more informative and inviting competition categories, exploration of our competition offerings through these filter chips has increased by 9%.