My List: Transforming a Simple Tool into Ecosystem

LeetCode • 2024 • Product Design

Problem statement
A Tool Falling Short

LeetCode, with its vast library of over 3,000 algorithm problems, is an invaluable resource for programmers. Yet, users often find themselves lost, asking: Where do I even start?

The platform introduced My List—a feature for users to create, manage, and organize problem lists. However, My List remained in its MVP stage: functional but basic. While advanced users created high-quality lists, most users treated it as a simple bookmark tool, lacking deeper engagement or ecosystem potential.

Disconnected Experience
Interfaces for creators and learners were inconsistent. The gap increased the cognitive load and hindered usability.
Inefficient Flows
Core actions required excessive clicks. Missing features made workflows frustratingly slow and directly discouraged engagement.
Lack of Dynamics
Users lacked the motivation to produce and spread high-quality lists, leaving its ecosystem potential untapped.
design impact
From Tool to Ecosystem

Through this project, My List evolved from a basic organizational tool to a core driver of LeetCode’s ecosystem. By improving layouts, workflows, and personalization, we made it easier to use and more meaningful, connecting users with the community.

Launched in June 2024, My List received great feedback and set a new design standard for other platform modules. Beyond fixing problems, it laid the groundwork for a collaborative ecosystem.

Set a new standard for Topics Libraries and Enterprise Libraries

Feedback and opportunity

story behind the design
Uncovering the Ecosystem Potential

Despite the tool’s shortcomings, Problem Lists created with My List had become a key part of users’ study routines. They helped structure vast problem sets into clear learning paths. But with few updates and limited supply, users turned to external resources. Meanwhile, a handful of great UGC Lists showed how user-driven creation could unlock My List’s real potential.

This insight shifted everything. My List wasn’t just a tool—it could be the center of a community-driven ecosystem. We aimed to move it from a top-down model to a community-driven system fueled by creation, sharing, and regeneration.

Breakthrough to Focus

With the goal clear, the next question was: where do we begin? We mapped user journeys and quickly found the big issues—clunky workflows and missing features.

But one insight stood out: users naturally switched roles. Learners tweaking lists became creators, and creators practicing lists became learners again. This role-switching flow was constantly disrupted by a fragmented experience. Fixing this disconnect became our first priority.

From there, we set our roadmap: unify layouts to reduce fragmentation, improve operational efficiency, and finally, create pathways for greater user participation.

Unifying Layouts: Making Things Seamless

The first step was closing the gap between creator and learner interfaces. I mapped out all the features, prioritized what mattered most, and merged overlapping ones. The focus was on keeping familiar workflows intact, ensuring the transition felt smooth and intuitive for users.

Layout Exploration

I designed 3 layout options, each balancing task flow and information hierarchy. Using Framer, I built interactive prototypes, which we tested and refined through team feedback and multiple iterations.

Guiding Focus Through Visual Flow

The left side showed list details, progress tracking, and a bold “Practice” button for quick task starts, guiding users naturally into their workflow.

The right side had a vertical problem list for easy scanning. Users could quickly spot unfinished tasks, browse line by line, and decide their next steps. This clear and flexible setup kept learners and creators focused and efficient.

Tool Upgrading: Efficiency at Every Step

Friction was a major barrier to user engagement. To fix this, I streamlined key workflows like saving problems, managing lists, and switching between them. The goal was clear: make every step intuitive, efficient, and scalable for long-term growth.

One-Click Saves

Data revealed that 95% of users relied on default lists, treating My List like a simple bookmark tool. This showed the need for quicker saves but made me wonder—was the clunky process holding them back?

To balance user habits with the platform’s goal of encouraging custom lists for deeper learning, I introduced One-Click Saves. Users could instantly save problems while still having the option to create or organize custom lists later. It made saving easier while encouraging deeper use over time.

A Modular Problem List

The Problem List is central to My List and the platform, but inconsistent designs across modules caused maintenance issues and fragmented experiences.

I created a modular, standardized component with dynamic fields. Fixed fields stayed visible, contextual fields adjusted to the scenario, and optional fields appeared on demand.

Dynamic interaction logic ensured smooth task handling. Creators could add or reorder problems intuitively, while learners focused on quick task navigation and saves. This design kept the experience seamless, no matter the user role or scenario.

Quick List Switching

Switching lists is a frequent task. I designed a collapsible sidebar for seamless navigation. Expanded, it displayed all lists for quick access without page reloads. Collapsed, it stayed out of the way, ensuring a distraction-free experience.

Building an Ecosystem: Boost Engagement

The goal wasn’t just a better tool—it was to inspire users to create, share, and collaborate, turning My List into a community-driven platform.

Letting Users Own Their Space

Analyzing user behavior revealed heavy emoji usage to add a personal touch. Inspired by this, I designed an emoji-based cover generator. In just seconds, users could create personalized covers, turning their lists into something truly their own. This simple change gave lists a sense of ownership and meaning.

Progress at a Glance

Tracking progress motivates learners. The old My List barely offered a vague progress bar—no detailed completion, no reset option, and no control over pacing.

The updated design introduced per-problem completion tracking, an overall progress chart and a one-click reset. These changes gave users clarity, motivation, and the flexibility to manage their learning on their terms.

Retrospective
Focusing on What Matters
We started with endless ideas but prioritized small, impactful changes. Focusing on what mattered most created meaningful progress without overcomplicating things.
Respecting User Behaviors
You can’t rush change. By respecting users’ habits and designing from their perspective, we created solutions that felt intuitive and encouraged deeper engagement.
Unleashing Tool Potential
This project proved how a simple tool can evolve. My List started as basic, but its potential to grow into a vibrant, collaborative ecosystem is clear and exciting.