Senior UX Designer
Kaggle.jpg

Kaggle Kernels

Redesign a cloud-based computational notebook to increase readability

 
notebook-hero.jpg
 
 

Kaggle Notebooks

Redesign a cloud-based computational notebook to increase readability

Status › Launched in 2018 · Role › Lead UX Designer

 

 
Published Kaggle notebook  before  redesign.

Published Kaggle notebook before redesign.

 
 
 

problem

Kaggle is a 1M+ online community of data scientists and machine learners built to generate and share computational notebooks and datasets for the purpose of collaboration. The original notebooks, however, lacked a flexible layout and suffered from discoverability issues. Notebooks additionally required a visual refresh to evolve into a Google property post acquisition, while still respecting the well known Kaggle brand.

 

Research

To gain an understanding of the current pain points associated with Kaggle notebooks, I conducted and analyzed HaTS Surveys and audited our external community forums to generate a comprehensive list of enhancements to focus on.

 

LEARNINGS

In general, contributors found it difficult to orient themselves across multiple sections and versions of a single notebook.

Due to the varied layouts exposed to authors vs. readers, in some cases contributors couldn’t reliably locate critical features, such as the ability to delete or publish a notebook for collaboration.

Working on a competition with multiple versions of a kernel and it’s submissions, I tend to lose some overview for the success of a single version.
— HaTS survey Participant
 

 

information re-Design

Before creating a responsive layout for the current content, I worked with stakeholders and internal users to reorient, and in some cases eliminate, existing notebook objects so that items placed close together in the UI layout would generate meaningful associations for the user.

 

Before and After: Block diagram visualizing associations between notebook objects

 
 

Framing the new object model into potential layouts

 
 

Final layout: Published view and Author view with augmented toolbar, but overall consistent look and feel

 
 
 
 

RESPONSIVE LAYOUT

After testing and verifying a final layout with organized content and discoverable actions, I scaled the design to fit a variety of devices. This included advocating for eliminating unnecessary functionality on smaller devices, such as forking for development.

 
notebook-responsive.jpg