Product Design: Help junior engineers learn deeper in programming
Iteration #1: Learning through nested highlighting
As I was researching how to design our first MVP for our Learning idea #1: Help junior engineers learn programming, I felt super depressed. Because people have already done all the ideas! What should I do?
In short, our idea is about: We want to help junior engineers to learn deeper. Deep enough for them not only to understand how a piece of code works, but learn how to apply it and potentially provide problem context and design philosophy so they don’t only know how to do it, but why and when to use a concept.
Because the problem is, as a beginner for learning a new tool or new concept, we always stop at a surface level of learning, because we assume that we roughly know it. Or, we are distracted by so many external resources that we see, and overwhelmed by the amount of information. Can we build a tool that allows engineers to really drill down into some important concepts and learn them by heart?
To do that, my design research focuses on 3 main dimensions: Highlighting tools, coding assistants, and chat-based tools to see how existing solutions look like.
Highlighting tools: These range from just highlighting the website to highlighting and creating a dictionary for keywords, and even making all the highlights a knowledge card so the learning can connect to each other.
Coding assistant: Coding assistant usually has a side panel at VS code, where they highlight the code and generate how to modify it.
Chat-based tools: Chat with websites or co-pilot with all the websites you are currently browsing
Highlighting tools
Highlighty
function: highlight
Feedly
Highlight + search for keywords
Sentelo
function: Highlight + summarize + explain + give an example
Recall
function: highlight + knowledge card + connect knowledge + question practices
Coding assistant
Codeium
function: Generate code explanation and code at their sidebar
Chat
ChatWebpage
function: Chat with websites
Sider
function: chat + explain + summarize + translate + write + OCR + grammar check (basically whatever interaction that you might need with the browser)
Many tools look really cool. However, most of the highlighting tools are limited to learning a keyword, not an entire concept. Even with the tool that won the Chrome extension award, Sider, acts more like an assistant for the web, but not for learning purposes.
Is there an opportunity that I can make a tool, that engineers can learn from a piece of code → to a concept → to the problem context or design philosophy to apply the concept? For example, can we look at props.name in react, but learn how the sharing state between components (Lifting State Up), to the single direction design philosophy in react?
To constrain the scope of MVP, we decided to only implement one idea: whenever there is a highlight, you will keep drilling down on that highlight. In contrast to asking one question on every different webpage, we are imagining a situation where you highlight something that you are curious or confused about, and AI will give you more explanation on it, and then you keep drilling down from the explanation that AI provides you.
Well…for sure I’m not only imagining this. I would love to have coding examples to practice the new concepts, want to have AI to know where my exact blockage on this learning is, what to learn next, and how can I apply this concept to my project…….
However, we decided just to focus on the nested highlighting idea for our first user testing round. We aren’t sure if this is a good idea yet!
Feeling Note: I was initially feeling quite discouraged because I was that those top Chrome extension products cover even more functions! Even though our ideas have a 10% difference, 90% is the same. So…maybe I shouldn’t even try? But several friends told me, that the first version of ideas will always be similar and a product is great isn’t only because it’s a brand new idea, there are so many other things that matter. So I decided to give this idea a shot!