The QD page has been a cornerstone of LeetCode, offering coding challenges with real-time evaluations. It played a key role in the platform’s growth, helping millions of users sharpen their skills. But as the product evolved, so did the QD page—becoming increasingly cluttered, rigid, and frustrating for users.

We designed the Dynamic Layout to give users full control over their workspace, allowing them to manage layouts and workflows with intuitive interactions. Tailored to align with unique goals and preferences, it redefines how users learn and solve challenges. By early 2024, the Dynamic Layout launched globally, transforming the QD page with a flexible, task-focused, and seamless interface.

User feedback painted a conflicting picture: what thrilled power users frustrated beginners—and vice versa. Existing research focused too heavily on active users, ignoring the needs of casual and novice learners. To bridge the gap, I turned to online communities where users openly shared their challenges.

The insight was striking:

As I dug deeper, I found it wasn’t just about who the users were—it was also situational. A single user’s workflow could shift based on their goals, the type of problem they were tackling, or even their confidence that day.

It’s the interplay of individual and situational factors that shapes a wide variety of learning paths. This diversity made it clear: a one-size-fits-all design wouldn’t work.

The idea was ambitious but faced major hurdles: conflicting priorities between global and China teams, and the risks of rebuilding a core function with unpredictable user acceptance. The team had been stuck patching issues, unable to move forward.

Without a PM, I stepped up to pitch the Dynamic Layout as a bold yet practical solution. Backed by data, user stories, and prototypes to demonstrate its value and feasibility.

The pitch secured stakeholder buy-in, clarified project goals, and set a clear design strategy. With the project greenlit, I collaborated with developers to prioritize tasks and create a phased plan, ensuring steady progress while managing risks.

The QD page’s architecture was a tangle of interconnected modules, where adjusting one feature often caused unexpected breaks elsewhere. A fundamental overhaul was necessary.

I led an audit of the layout to map dependencies and reusable elements. To rebuild efficiently, I worked closely with developers, decoupling modules one by one while running design and development in parallel.

This approach resulted in a scalable, modular framework of panes, tabs, and toolbars. By separating foundational functionalities from core features, we created a cleaner, well-organized structure that was flexible and easy to maintain.

With the modular foundation in place, the next step was enabling users to take full control of their workspace. Drag-and-drop emerged as the centerpiece for flexibility, but making it intuitive required careful design and iteration.

My first attempt at defining drag-and-drop hit areas caused misplacements during testing due to awkward angles. Inspired by real-world behavior, I redesigned the structure: stacking centrally for stability and using edges for accessibility.

Introducing a "merge" command and logical hit zones allowed users to add or combine elements effortlessly, ensuring flexibility without chaos.

Predictability was key to making dragging intuitive. Users needed immediate feedback at every step to feel confident about their actions.

Early demos revealed excitement about flexibility but concerns over cognitive overload. Using Kanban for transparent management, we iterated quickly. Public beta testing surfaced key challenges, leading us to refine the balance between flexibility and structure, ensuring a more intuitive user experience.

Testing workflows like "viewing a new solution post" revealed conflicting user needs. Advanced users wanted flexibility, while others struggled with extra tabs and broken layouts.

Realizing "one design doesn’t fit all," I implemented Progressive Disclosure: a default simplified layout for most users, with advanced options for power users. This layered approach balanced complexity and accessibility.

Flexibility risked distraction as the Dynamic Layout scattered attention. Leveraging visual attention principles, I developed a three-step solution: ensure visibility, provide real-time updates, and use visual cues to guide focus. This proactive approach kept users engaged and minimized distractions in complex workflows.

Launching a new version often disorients users, risking inefficiency. To ease the transition, I balanced familiarity with onboarding—combining default adoption, optional reversion, and guided tours. This minimized the learning curve and left users feeling confident and supported.

The modular foundation and flexible layout set the stage for a dynamic learning environment, but unlocking its full potential required refining the content itself. We focused on three key areas: formatting, graphs, and tools.

The problem description is the first thing users see, and it needs to be clear, readable, and actionable. Initially, it was cluttered and hard to read, overwhelming users with dense information. I restructured the layout to transform cluttered, dense text into clear, actionable guidance.

Error messages posed another hurdle, with up to 7 inconsistent types causing confusion. By modularizing these into reusable components, I created a unified system that made errors easier to understand and resolve.

Graphs were critical for AC submissions but were hampered by poor navigation and missing indicators. I redesigned them to highlight key metrics and added a mini-map for advanced users to zoom in on data ranges.

To further streamline the experience, I integrated community-shared solutions directly into the graph layout. Users could now access code samples with a single click, eliminating disruptive modal switches.

Driven by advanced coding needs, assistant tools like the Raw Editor, Code Formatter, and AI-powered Complexity Analysis elevate the experience to a new level of professionalism.