Embedded Files
Most coding platforms overwhelm users with scattered content, no clear learning path, and little sense of progress.
In the Education Technology course, we implement the learning sciences and UI designs on our platform, which is a prototype on how an online coding platform should be, which fixes the pain points with structured, company-specific practice, real interview readiness metrics, and visual explanations where they’re needed most.
With a streamlined interface and meaningful gamification, we have attempted to help the users stay focused, motivated, and truly prepared.
Affinity Diagram & Focus Group Interviews
Affinity Diagram & Focus Group Interviews
Based on the Focus Group Interview, we created the above Affinity Diagram and we got the following Inference:
The participants in the Focus Group found LeetCode 75 and 150 useful for preparing for the interviews but not for studying or getting better conceptually.
When we asked about sorting the coding problems into categories, the participants told us that it will be useful since Leetcode has too many questions. Also it is kind of hard to know where to start and what questions to focus on.
The participants also preferred having video solutions for the coding problems, similar to how NeetCode has done.
Many participants wanted some kind of a feedback while they are preparing for the interview which would help them improve their thought process.
Some participants said that working with someone will be useful to see how they approach a problem but some did not think it would be useful since the interviews are given individually.
User Testing and Prototyping
User Testing and Prototyping
- Home Page Redesign
Goal: We redesigned the homepage to reduce clutter and guide users more effectively through key features.
User Testing: Based on user feedback, we improved visual clarity by removing redundant sections, adding topic-based progress indicators, and ensuring easier access to step-by-step video explanations.
The result is a focused, intuitive experience that boosts motivation, learning retention, and interview readiness.
2. Roadmap
2. Roadmap
Goal: Many users feel lost when starting their competitive coding journey, they are unsure where to begin or what to focus on next. Interactive Roadmap, inspired by NeetCode, provides a clear, structured progression through essential Data Structures and Algorithms. It includes short video explanations for key problems, helping users deepen their understanding and bridge prior knowledge with new concepts.
User Insights: During testing, users appreciated the logical flow and clear direction, which helped them track mastered topics and focus on what’s next. Based on feedback, we improved visual clarity and ensured a consistent UI throughout the feature for a smoother learning experience.
3. Companies
3. Companies
Goal: Inspired by LeetCode, we created a dedicated space for company-specific questions which is tailored for effective prep.
Users can either browse commonly asked questions by specific companies, or take a mock assessment to simulate real online evaluations when they feel ready.
With an intuitive search bar and quick-select company logos, users can easily find and filter questions by their target employers, including the most searched and trending companies.
User Insights: User and TA feedback helped us streamline the interface, making it more visually impactful and easier to navigate, resulting in a more focused and personalised prep experience.
4. Interview Readiness
4. Interview Readiness
Goal: Even after solving hundreds of programming problems, many users still ask: “Am I ready for interviews?” Inspired by tools like Strava, Duolingo, and Chess.com, we designed a quantitative Readiness Score to track and motivate progress over time.
The score combines multiple factors including accuracy, difficulty, and consistency into a simple, understandable percentage-based score.
User Insights: Early prototypes confused users, so we refined it into a composite score with clear backing data. Usability tests showed that 4 out of 5 users felt more motivated, and all participants used the feedback to guide their next study session.
Now, learners have a clear answer to “Am I improving?”, and a data-backed way to prepare smarter, not just harder.
5. LeetCode Ranked
5. LeetCode Ranked
Goal: Originally envisioned as a real-time collaboration tool, LeetCode Ranked evolved from user feedback into a competitive, game-inspired feature that makes problem-solving more exciting and motivating. Users can level up, track their rank, and compete with peers which adds a layer of motivation and challenge, similar to video games.
User Insights: Testing revealed a strong desire for competition and achievement. One user said, “It would be awesome if we could level up like in games, it’d push me to keep learning!”
LeetCode Ranked transforms learning into a challenge worth climbing.
Learning Science Theories & Readings
Learning Science Theories & Readings
Our prototype is deeply rooted in proven learning theories to enhance both motivation and mastery. Every feature is intentionally designed to support how people learn best, blending structure, engagement, and self-regulation.
- Motivation & Engagement
Extrinsic Motivation:
Daily problem rewards and gamified elements like streaks and rankings promote external incentives to keep users returning.
(Inspired by ABC’s of How We Learn – “R is for Reward”)Intrinsic Motivation:
Visual cues like progress bars and readiness scores foster a sense of accomplishment and forward momentum.Goal-Setting Theory:
Quantifiable goals (e.g., Readiness Score) help users stay focused and motivated by offering small wins along their journey.
(How People Learn – Chapter 6)Gamification Theory:
Competitive features (like LeetCode Ranked) draw from video game design, increasing user engagement and retention.
- Cognitive Theories
Cognitive Load Theory:
Simplified interfaces, clear progress snapshots, and video explanations reduce mental effort, allowing users to focus on learning.
(How People Learn – Chapter 3)Component Skills Development:
The roadmap breaks Data Structures and Algorithms into digestible parts, supporting sequential skill-building.
(How Learning Works – Chapter 4)
- Mastery & Self-Regulation
Mastery Learning Theory:
Users advance only after achieving proficiency, with features like expert-led video solutions and pattern recognition for real-life assessments.Self-Regulated Learning (SRL):
Tools like the Readiness Score and personalized roadmaps encourage users to set goals, track progress, and adapt study plans.
(Zimmerman’s SRL Model & How Learning Works – Chapter 7)Self-Efficacy:
Highlighting completed concepts and showing visible progress builds confidence and a sense of believing in oneself.
- Learning Progression & Personalization
Scaffolding:
The roadmap supports step-by-step growth from basic to advanced topics, ensuring learners aren’t overwhelmed.Adaptive Learning:
Features adjust to performance levels, creating a tailored experience that matches the learner's evolving ability.Prior Knowledge Activation:
By connecting new problems with familiar concepts, learners retain information better and feel more confident.Multimodal Learning:
Combining visual (video), textual, and interactive content enhances understanding, especially for dense or complex material.
(How Learning Works – Chapter 4)
Page updated
Google Sites
Report abuse