Knowledge Maps encourages novice web developers to construct conceptual models by way of analyzing the code of professional web features. The proposed process is to learn by either analyzing a diverse array of differently implemented professional examples which at initial glance appear visually similar, or by analyzing a diverse array of similarly implemented examples which at initial glance appear visually different. By doing this, learners can learn to identify professional developer techniques, the tradeoffs associated with each technique, and apply them them in professional contexts.

Winter 2018 was spent investigating this process with Javascript, but switched over as of Spring 2018 to CSS.

Spring 2018 had me digging deep into what the process of creating a knowledge map is like, focusing specifically on learning practices that would allow learners to quickly notice differences across similar and simple examples. Additionally, my studies tested characteristics towards providing help, including what type of help to provide, when to provide it, and how to provide effective help. The interface model was also tested on paper and transferred to electronic prototyping, and I look forward to working on this project further with professionally sourced examples via Ply and further developing the interface and system models.

As of Spring 2019, the project has shifted forward to devising measurements that can be used to measure user knowledge. Measurements are split into visual outcome and code implementation layers, both of which contribute to measuring user understanding of individual examples. Measurements across multiple examples are split into approach identification and rationale behind examples, as well as the pros/cons of each approach and situations in which one approach should be applied.

Fall 2019 had us making great progress in multiple areas: design arguments, interface arguments, system arguments, and related work. By building on top of the measurements from Spring 2019 quarter, we were able to generate design arguments which served as the foundations for a user's conceptual learning. After, we focused on the beginner web developer demographic and iteratively tested interface and system scaffolding characteristics which would help these novice users understand two professional grid examples. Our research in interface and system arguments culminated in the creation of the first Knowledge Maps digital prototype. After conducting a formal study in order to report our findings for a SRC (Student Research Competition) submission, we also ventured into researching work related to our project, including Ply(in DTR), Isopleth (from Delta Lab), Tutorions, and Chrome Developer Tools, among others.

In Winter 2020, the focus was on implementing a system model for generating the highlighted code properties and the interactive code properties. We introduced a new tier of highlighting: Tier 3, which consists of rules that alter flex/grid implicit dependencies, for example an @media query that changes a predefined implicit flex/grid code property. Additionally, we worked on generating guidelines to define if two examples were suitable for comparison. Backed by research in the learning sciences, two examples are good for comparison if they are similar but have salient differences that are easily identified visually. Future work would be to continue defining guidelines for identifying good flex and grid examples to compare.

In Spring 2021, the focus was on helping users create their own visual knowledge map for CSS grid. We first built our own visual knowledge map by:

1. (1) becoming experts in CSS grid techniques using existing tools like W3 Schools, CSS Tricks, and expert interviews
2. (2) examining professional websites that use a CSS grid layout and identifying their main visual features and the CSS techniques responsible for producing them
3. (3) identifying patterns and grouping sites by similar visual features and by similar techniques to create two versions of our grid knowledge map

Additionally, we created a prototype by incorporating the new professional grid sites into the existing KM comparison tool, adding new reflection questions to help users identify relevant visual and code features, and creating an interface for users to build their own visual knowledge map of sites grouped by feature. Finally, we ran design sprints and user tests to iterate on the design arguments.

Fall 2021

In Fall 2021, the focus was to synthesize the learnings from previous quarters into one design and integrate the knowledge map formation into the tool itself. We then ran a user study with 11 users to study how the KM platform compared to learning from tutorials. The study yielded positive results about the efficacy of the Knowledge Maps platform. We are currently writing the results about the study to submit a paper to the Student Research Competition.

Winter 2022 In Winter 2022, we explored how people could build richer knowledge maps as a continuation of our work for the Student Research Competition. We wanted to add more integration between the explore phase of the tool, where users compare and contrast example websites, and the knowledge map phase, where they build out a knowledge map. Towards that end, we added reflection questions and hints, and we built a more robust CSS editor. After adding these changes, our users were able to build much richer knowledge maps.

Spring 2022 In Spring 2022, we explored integrating more process management within the knowledge maps building procedure in order to effectively scaffold the process for novice users. This included experimenting with a hierarchical map structure that integrated both scientific and metacognitive processes in order to help users gain a deeper understanding of how CSS techniques create a complex visual outcome. After testing the initial design, we decided to continue utilizing the hierarchical map structure, but instead looking at how the map can compare and contrast two websites that look visually similar, but utilize different CSS techniques. This way, we can investigate how we can help users model and understand fine grain differences in CSS techniques that produce similar layouts. 

Fall 2023 Taking findings from the previous iterations alongside relevant literature, we have created a table-structured knowledge map (TKM) incorporated with process management. This new design can be filled out by users following the embedded scaffolding. The support provided influences how users fill out the TKM, directing their attention to relevant parts of the KM tool and code. This process management has three stages: exploration, deep dive, and mapping. In the exploration stage, users are asked to list out layout features they notice for each website and note if other sites are similar). In the deep dive step, users will be guided to look further and identify additional sites they might have overlooked for each of the groupings. Also, in the second step users are guided to find layout differences among similarly grouped sites, to help them analyze each site further. Thirdly, users are supported in mapping the visual similarities to lines of CSS code. In this step, users must map every line of CSS on the KM tool to a visual outcome, allowing them to understand how each line influences a site’s layout.

Winter 2023 This quarter we tested the TKM process in pilot studies and iterated on it accordingly. The current process management has the same three steps: exploration, deep-dive, and mapping to CSS as the last iteration. However, we have updated the process to be cyclical rather than make users finish each step before progressing further––a user will identify one visual feature then go to step two to find differences for that visual feature and then map all details noted in step 3 before returning back to step 1 and repeating the process. The cyclical modification allows users to reach step three faster without sacrificing the deep analysis reached by the previous iteration. In addition to the cyclical change in process, we added further scaffolding for users through the addition of hints and examples to make the km sheets process easy to understand. We also made updates to the KM tool by improving the UI and surfacing media queries and other CSS techniques that make major contributions to the layout of many professional websites. 

Spring 2023 This quarter we explored how to improve the usability of our tool through iterative user tests. Ultimately, we ended up combining the comparison tool and process management GoogleSheet into one integrated web app. This integration not only addresses the needs expressed by our users by simplifying their workflow in a unified platform.  All of the changes we made were guided by Nielsen’s 10 usability heuristics. We decided to use these heuristics are the driving force behind changes we wanted to make since testing from the previous quarter indicated that usability obstacles were preventing us from testing the efficacy of the tool. In addition, we made several usability changes like simplifying the complex instructions, and breaking complex steps (ex: deep dive and mapping) into further approachable steps to make the tool easier to use. Additionally, as users go through the three steps they are only given the necessary information to complete each step, eliminating other information that could be distracting or confusing to users. Lastly, there is an additional step added after mapping to CSS that allows users to visualize all the complex mapping they made in the previous steps and then reflect upon these mapping through scaffolding questions encouraging them to think deeply about their learning.