LeetCode • 2024 • Product Design
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.